Flutter——Widget系列4、widget状态分类,有状态(StatefulWidget)和无状态(StatelessWidget)

image.png

前言

简单粗暴来说,一个widget,如果在运行的过程中需要变化,就是有状态的。

Fluter的widget,安卓状态来说,可以分为:有状态(StatefulWidget)和无状态(StatelessWidget)

无状态(StatelessWidget)

状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件被build的时候它们就使用这些不可变的数据来构建自己的UI。

无状态的组件,前面我们已经使用无数次了,重点是看StatefulWidget,有状态的组件。

有状态(StatefulWidget)

有状态的wdiget,其持有状态可能在Widget生命周期中发生变化。

  • Checkbox、Radio、Slider、InkWell、Form和TextField是有状态小部件的示例,它们是StatefulWidget的子类。

  • 对于有可变状态控件的管理,官方文档是写了有3种模式:控件自己管理状态交给父控件管理状态以及混合管理 (自己和父部件各管理一部分)

实现一个StatefulWidget至少需要两个类:
一个StatefulWidget
一个State类。

  • StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在,当在State内部改变任何子控件需要的变量时,都需要使用setState

一句话来说,就是一个有状态的组件,需要两个类,分别是StatefulWidget和State,而状态组件的内容,需要用到setState方法。


一、 有状态(StatefulWidget)

实现StatefulWidget需要的两个类

实现一个StatefulWidget至少需要两个类:
一个StatefulWidget
一个State类。

如何改变StatefulWidget的内容

  • StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在,当在State内部改变任何子控件需要的变量时,都需要使用setState

例子

例子1 控件自己管理状态

一个计数器,点击自身,统计点击次数。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    final wordPair = new WordPair.random();

    return MaterialApp(
        title: 'Flutter 测试标题',
        theme: new ThemeData(
          primaryColor: Colors.red,
        ),
        home: new Scaffold(
          appBar: AppBar(
            title: Text("测试呀"),
          ),
          body: new Counter(),
        ));
  }
}

class Counter extends StatefulWidget {
  // 经典写法,继承自StatefulWidget的Widget返回一个自己的State私有类
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  // State类里面定义私有变量,我们的状态变化,会通过setState方法具体操作
  int _count = 0;

  void _increment() {
    setState(() {
      ++_count;
    });
  }

  Widget build(BuildContext context) {
    return new Container(
        decoration: new BoxDecoration(color: Colors.grey[100]),
        child: new Center(
            child: new RaisedButton(
                // 按下时的事件
                onPressed: _increment,
                // 内容不写死,数据动态显示,一切都是因为_increment里面的setState方法
                child: new Text('click count : ${_count}'))));
  }
}

.
.

重要都在备注里面了,如果非要说说逻辑,大概就是:

  • 1、继承自StatefulWidget的Widget返回一个自己的State私有类
  • 2、State类里面定义私有变量,我们的状态变化,会通过setState方法具体操作
  • 3、通过一定的事件或者条件,触发setState改变数据
  • 4、数据展示的逻辑,不写死,根据变量的调整动态调整
2019-08-27 13.57.03.gif

.
.

例子2 父控件管理子控件状态


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    final wordPair = new WordPair.random();

    return MaterialApp(
        title: 'Flutter 测试标题',
        theme: new ThemeData(
          primaryColor: Colors.red,
        ),
        home: new Scaffold(
          appBar: AppBar(
            title: Text("测试呀"),
          ),
          body: new ParentWidget(),
        ));
  }
}


//------------------------- parent widget ----------------------------------

class ParentWidget extends StatefulWidget {

  ParentWidget() {
    print('ParentWidget init');
  }

  @override
  State<StatefulWidget> createState() {
    return _ParentWidgetState();
  }
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  _ParentWidgetState() {
    print('ParentWidgetState init');
  }

  void _handleSonChanged(bool newValue) {
    print('parent _handleSonChanged is call : $newValue');
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    print('ParentWidgetState build is call');
    return new Center(
      child: SonWidget(onChanged: _handleSonChanged, isShowAndroid: _active,),
    );
  }
}

//------------------------- child widget ----------------------------------

class SonWidget extends StatelessWidget {

  SonWidget({
    Key key, this.isShowAndroid: false, 
    @required this.onChanged
  }): super(key: key) {
    print('Son SonWidget init : ${this.isShowAndroid}');
  }

  final bool isShowAndroid;
  final ValueChanged<bool> onChanged;

  void _handleSon() {
    print('child _handleSon : $isShowAndroid');
    onChanged(!isShowAndroid);
  }

  @override
  Widget build(BuildContext context) {
    print('Son SonWidget build method');
    return GestureDetector(
      onTap: _handleSon,
      child: Container(
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
            color: isShowAndroid ? Colors.lightGreen[700] : Colors.grey[600]
        ),
        child: Center(
          child: Text(isShowAndroid ? 'Android' : 'Flutter',
            style: TextStyle(fontSize: 32.0, color: Colors.white),),
        ),
      ),
    );
  }
}

核心:子控件的构造方法,暴露出事件参数,父控件创建子控件的时候,传入参数,进而实现父控件改变自控内容的目的。

所以核心代码:

image.png
初始化顺序

初始化输出日志:


flutter: ParentWidget init
flutter: ParentWidgetState build is call
flutter: Son SonWidget init : false
flutter: Son SonWidget build method
Reloaded 1 of 432 libraries in 2,751ms.
image.png
点击回调执行顺序

点击输出日志:

第一次点击
flutter: child _handleSon : false
flutter: parent _handleSonChanged is call : true
flutter: ParentWidgetState build is call
flutter: Son SonWidget init : true
flutter: Son SonWidget build method

第二次点击
flutter: child _handleSon : true
flutter: parent _handleSonChanged is call : false
flutter: ParentWidgetState build is call
flutter: Son SonWidget init : false
flutter: Son SonWidget build method

第三次点击
flutter: Son SonWidget init : false
flutter: Son SonWidget build method
flutter: child _handleSon : false
flutter: parent _handleSonChanged is call : true
flutter: ParentWidgetState build is call
flutter: Son SonWidget init : true
flutter: Son SonWidget build method

一切是那么重新,在父控件控制子控件的时,刷新ui会让子控件重新初始化和和build(绘制)。

image.png

.
.

参考:为你的 Flutter APP 添加交互性

2019-08-27 15.56.01.gif

.
.

例子3 混合管理

也就是,父控件管,子控件自己也管,一起管

混合管理就是某些状态由自己管理,某些状态由父部件来管理。
下面的例子就是一个混合管理状态的例子,部件 TabboxC 在被点击时有三个状态变换,背景色,文字和边框。
示例中,背景色和文字的状态交由父部件来管理(和上一个示例类似),而边框状态由自己管理。
既然父部件和子部件都能管理状态,那么它们都是要继承StatefulWidget类。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    final wordPair = new WordPair.random();

    return MaterialApp(
        title: 'Flutter 测试标题',
        theme: new ThemeData(
          primaryColor: Colors.red,
        ),
        home: new Scaffold(
          appBar: AppBar(
            title: Text("测试呀"),
          ),
          body: new ParentWidget2(),
        ));
  }
}


// ------------parent widget-----------
class ParentWidget2 extends StatefulWidget {
  ParentWidget2() {
    print('Parent init');
  }

  @override
  State<StatefulWidget> createState() {
    return _ParentWidgetState2();
  }
}

class _ParentWidgetState2 extends State<ParentWidget2> {

  _ParentWidgetState2() {
    print('_Parent  State init');
  }

  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    print('_Parent _handleTapboxChanged method is called');
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    print('_Parent State build is called');
    return TabboxC(onChanged: _handleTapboxChanged, active: _active,);
  }

}

// ------------child widget-----------
class TabboxC extends StatefulWidget {
//  构造方法
  TabboxC({
    Key key,
    this.active: false,
    @required this.onChanged
  }) : super(key: key) {
    print('TabboxC init');
  }

  final bool active;
  final ValueChanged<bool> onChanged;

  @override
  State<StatefulWidget> createState() {
    return _TapboxCState();
  }
}

class _TapboxCState extends State<TabboxC> {

  bool _highlight = false;

  _TapboxCState() {
    print('_TapboxC  State init');
  }

  void _handleTapDown(TapDownDetails details) {
    print('_TapboxC tap down');
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    print('_TapboxC tap up');
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    print('_TapboxC tap cancel');
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    print('_TapboxC tap clicked');
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    print('_TapboxCState build is called');
    return  Center(
      child: GestureDetector(
//              down
        onTapDown: _handleTapDown,
//              up
        onTapUp: _handleTapUp,
//              cancel
        onTapCancel: _handleTapCancel,
//              click
        onTap: _handleTap,
        child: Container(
          width: 200.0,
          height: 200.0,
          decoration: BoxDecoration(
//                  Box 颜色  父控件 控制(通过回调方法)
              color: widget.active ? Colors.lightGreen[700] : Colors
                  .grey[600],
//                  边框颜色  自己控制
              border: _highlight ? Border.all(
                  color: Colors.teal[700], width: 10.0) : null
          ),
          child: Center(
            child: Text(widget.active ? 'Active' : 'Inactive',
              style: TextStyle(fontSize: 32.0, color: Colors.white),),
          ),
        ),
      ),
    );
  }
}

2019-08-27 16.10.52.gif

按下释放后的一瞬间,才有边框。

初始化

初始化时候的顺序和上面类似,我们来看看点击事件被触发时候的执行顺序:

flutter: _TapboxC tap down
flutter: _TapboxCState build is call
flutter: _TapboxC tap up
flutter: _TapboxC tap clicked
flutter: _Parent _handleTapboxChanged method is call
flutter: _Parent State build is call
flutter: TabboxC init
flutter: _TapboxCState build is call

执行流程:


image.png

大家可能会发现,子部件在 Down 事件中调用了 setState(...) 方法,然后执行了一次 build 操作;而在 Up 事件中同样也调用了 setState(...) 方法,但是为什么没有执行 build 操作,而是直接执行了 click 操作。这里面可能和 Android 里面类似,在 View 的 onTouchEvent 方法里面,onClick 方法也是在 ACTION_UP 里面执行的。

参考:为你的 Flutter APP 添加交互性


END

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容