Flutter 搞懂有状态和无状态

刚开始学flutter的时候,快被有状态(Stateful)和无状态(Stateless)搞疯了,想想真麻烦,写一个组件还要想它的状态。但写了一年多flutter,回过头再来看,发现蛮简单的。

开始之前我们需要先明白组件的定义:

  • 组件:在Flutter中,组件可以是任何自定义的界面元素,包括一个页面,这里不得不提一句老话:一切皆Widget。你可以将一个页面封装在一个自定义的类中,并使用Flutter中的组件生命周期方法和属性来管理页面的状态和行为。

在上面关于组件的定义中,可以发现组件需要管理内部的状态,而有状态(Stateful)无状态(Stateless)是对两种组件类型的描述。只要是组件,就一定需要有状态(Stateful)无状态(Stateless)来定义和描述。

1、有状态组件

有状态组件则是指那些包含内部状态,会随着用户交互或其他因素而改变的组件。这些组件的行为不是预定义的,而是可以根据内部状态的改变而改变。在Flutter中,有状态组件通常需要使用StatefulWidget来实现。

使用有状态组件的情况通常是在你需要根据用户的交互或其他内部状态的改变来更新组件的情况下。例如,当用户点击一个按钮时,你可能希望显示一个不同的屏幕;或者当用户输入一些文本时,你可能希望更新一个显示区域的内容。在这些情况下,你需要使用有状态组件来存储和更新内部状态。

一个经典的计时器的demo:

import 'package:flutter/material.dart';  
  
class MyCounter extends StatefulWidget {  
  @override  
  _MyCounterState createState() => _MyCounterState();  
}  
  
class _MyCounterState extends State<MyCounter> {  
  int _count = 0;  
  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: [  
        Text('Count: $_count'),  
        Button(  
          child: Text('Increment'),  
          onPressed: () {  
            setState(() {  
              _count++;  
            });  
          },  
        ),  
      ],  
    );  
  }  
}

这个有状态组件MyCounter显示一个计数器的界面,包括一个文本标签和一个按钮。它使用_MyCounterState类来存储和管理内部状态(_count变量)。当用户点击按钮时,计数器的值会递增,并触发组件的重新构建和更新。

请注意,有状态组件需要使用_MyCounterState类来维护内部状态,并在build方法中使用setState方法来更新组件的输出。

组件的展示内容和输出结果,没有确定性,依赖于用户点击了多少次,即和用户行为有关。,这也符合个有状态组件的定义。

2、无状态组件

无状态组件是指那些不包含内部状态,不会随着用户交互而改变的组件。它们的行为是预定义的,不会受到外部因素的影响。在Flutter中,大多数基础组件都属于无状态组件,如Text、Button、Container等。这些组件的输出是预先确定的,不会因为用户的交互或其他内部状态的改变而改变。

使用无状态组件的情况通常是在你不需要根据用户的交互或其他内部状态的改变来更新组件的情况下。如果一个组件的行为不会随着状态的改变而改变,那么就可以使用无状态组件。

无状态组件demo:

import 'package:flutter/material.dart';  
  
class MyText extends StatelessWidget {  
  final String text;  
  
  MyText({this.text});  
  
  @override  
  Widget build(BuildContext context) {  
    return Text(text);  
  }  
}

这个无状态组件MyText显示一个文本标签,它的输出是预先确定的,不会受到任何内部状态的影响。

组件的展示内容和输出结果,从一开始就知道了。

将上面的demo再简化一下:

Widget _MyText(String text) {
   return Text(text);
}

可以发现:你可以将无状态组件看作是一个纯粹的函数,根据输入参数返回相应的输出结果

3、案例分析

Picker选择器 Alert选择器 Alert弹窗
  • 1、picker选择器。虽然他的结果在你的预料之内,但是因为要记录上一次的结果,所以内部必然存在记录年月日的index参数,这个参数即状态,滚动滚轮就会发生变化,所以这是一个有状态(Stateful)的组件(和计时器中的变量_count类似),即StatefulWidget

  • 2、Alert选择器。展示结果在预料之内,并且不需要记录上一次的选择,所以这是一个妥妥的无状态(Stateless)组件,即StatelessWidget

  • 3、Alert弹窗。虽然展示的内容是根据外部传入的内容变化的,但最终展示的效果在预料之内,并且不需要记录上一次的选择,所以这也是一个妥妥的无状态(Stateless)组件,即StatelessWidget

实际开发中上面的三个案例,也可以全部封装成有状态组件,以达到方便风格统一的目的。只不过后两者没有实际的状态需要维护。

4、不适用有状态组件的场景

有状态组件具有更多的灵活性和功能,可以更好地管理组件的状态,并且可以响应用户的交互操作。然而,有状态组件也有一些缺点。例如,它们需要更多的代码和开发时间来创建和维护,而且可能会使组件之间的依赖关系变得复杂,从而导致维护和测试的难度增加。

举一个例子:有一个组件在很多页面出现,或者说一个页面有多个相同的组件。需要根据不同页面、不同位置展示不同的数据源,这时候如果使用有状态(Stateful)组件去维护内部的数据和展示逻辑,组件内部将变得非常庞大、负责,维护起来也变的更加繁琐,甚至于你可能会喊一句重构啊~,以此来发泄对这段代码的不满。这种情况下,无状态(Stateless)组件无疑是一个更好的选择。

总之,在项目开发中,可以根据实际情况来选择是否全部封装成有状态组件,以达到方便风格统一的目的。建议在实践中进行灵活选择,并进行适当的代码组织和维护。

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

推荐阅读更多精彩内容