1. 首页
  2. IT资讯

Flutter中可变状态控件状态管理的两种方式

Flutter 有两种状态控件:StatelessWidget、StatefulWidget,对于有可变状态控件的管理,官方文档是写了有3种模式:控件自己管理状态、交给父控件管理状态以及混合管理。我个人初学对于自己管理比较好理解,对于父控件管理理解起来有点困难,所以只能多看多学。这里写一下两种状态管理的方式和代码,加深自己的印象,尤其是父控件管理方式。

项目说明:两种方式实现一个容器盒子,点击的时候切换颜色和显示内容。我将把这两个盒子做到一个页面,虽然最终效果是一样的,但是实现方式不同。

一、控件自身管理自己的状态

 /* TapBoxA 是自身widget管理自己状态  */ class TapBoxA extends StatefulWidget {   @override   _TapBoxAState createState() {     return new _TapBoxAState();   } }  class _TapBoxAState extends State<TapBoxA> {   bool _aActive = false;    void _aActiveChanged() {     setState(() {       if (_aActive) {         _aActive = false;       } else {         _aActive = true;       }     });   }    @override   Widget build(BuildContext context) {     return new GestureDetector(       onTap: _aActiveChanged,       child: new Center(         child: new Container(           alignment: Alignment.center,           width: 200.0,           height: 200.0,           child: new Text(             _aActive ? 'Active' : 'Inactive',             style: new TextStyle(fontSize: 50.0, color: Colors.white),           ),           decoration: new BoxDecoration(               color: _aActive ? Colors.green[400] : Colors.grey),         ),       ),     );   } }

二、由父控件管理子控件的状态

子控件自身是无状态的控件,但是父控件会在子控件发生变化以后得知这一更新,并进行状态的更新以及控件的重绘。

 /* TapBoxB 是父widget管理子widget状态; TapBoxB 继承自无状态控件,不管理任何状态  */ class TapBoxB extends StatelessWidget {   TapBoxB({Key key, this.bActive: false, this.onChanged}) : super(key: key);   final bActive;   final ValueChanged<bool> onChanged;    void _bActiveChanged() {     onChanged(!bActive);   }    @override   Widget build(BuildContext context) {     return new GestureDetector(       onTap: _bActiveChanged,       child: new Center(         child: new Container(           alignment: Alignment.center,           width: 200.0,           height: 200.0,           child: new Text(             bActive ? 'Active' : 'Inactive',             style: new TextStyle(fontSize: 50.0, color: Colors.white),           ),           decoration: new BoxDecoration(               color: bActive ? Colors.green[400] : Colors.grey),         ),       ),     );   } }  /* ParentWidget类是TapBoxB的父类 他会得知盒子是否被点击从而管理盒子的状态,通过setState更新展示内容  */ class ParentWidgetB extends StatefulWidget {   @override   _ParentWidgetBState createState() {     return new _ParentWidgetBState();   } }  class _ParentWidgetBState extends State<ParentWidgetB> {   bool _bActive = false;    void _handleTapBoxBChanged(bool value) {     setState(() {       _bActive = value;     });   }    @override   Widget build(BuildContext context) {     return new TapBoxB(       bActive: _bActive,       onChanged: _handleTapBoxBChanged,     );   } }

最后是代码整合,把上面两个不同方式实现盒子点击状态更改的代码在一个APP里展示出来

 import 'package:flutter/material.dart';  void main() => runApp(new MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new MaterialApp(       title: 'TapBox',       theme: new ThemeData(primaryColor: Colors.white),       home: new Scaffold(         appBar: new AppBar(           title: new Text('TapBox'),         ),         body: new Column(           mainAxisAlignment: MainAxisAlignment.spaceEvenly,           children: <Widget>[             new TapBoxA(),             new ParentWidgetB(),           ],         ),       ),     );   } }

运行后首页显示如下:

Flutter中可变状态控件状态管理的两种方式

点击后状态发生变化(但是实现方式是不同的):

Flutter中可变状态控件状态管理的两种方式

 

  • 点赞
  • 收藏
  • 分享

    • 文章举报

Flutter中可变状态控件状态管理的两种方式 Flutter中可变状态控件状态管理的两种方式
走路不穿鞋
发布了6 篇原创文章 · 获赞 0 · 访问量 1万+

私信 关注

原文始发于:Flutter中可变状态控件状态管理的两种方式

主题测试文章,只做测试使用。发布者:sys234,转转请注明出处:http://www.cxybcw.com/79682.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code