美文网首页
Flutter知识点总结二

Flutter知识点总结二

作者: woniu | 来源:发表于2020-06-16 11:06 被阅读0次

一、StatefulWidget和StatelessWidget

1、StatelessWidget:通常用来展示哪些数据固定不变的。
2、StatefulWidget:数据会发生改变,我们使用StatefulWidget。

比如Flutter默认程序中的计数器案例,点击了+号按钮后,显示的数字需要+1;
比如在开发中,我们会进行下拉刷新、上拉加载更多,这时数据也会发生变化.

二、StatefulWidget问题

1、定义到Widget中的数据都是不可变的,必须定义为final,为什么呢?

a、Flutter在设计的时候就决定了一旦Widget中展示的数据发生变化,就重新构建整个Widget;
b、Flutter通过一些机制来限定定义到Widget中的成员变量必须是final的;
Widget源码:

@immutable
abstract class Widget extends DiagnosticableTree {
    // ...省略代码
}
  • @immutable注解标明的类或者子类都必须是不可变的。所以,定义到Widget中的数据一定是不可变的,需要使用final来修饰。
2、如何存储Widget状态?

既然Widget是不可变,那么StatefulWidget如何来存储可变的状态呢?
a、StatelessWidget无所谓,因为它里面的数据通常是直接定义完后就不修改的。
b、但StatefulWidget需要有状态(可以理解成变量)的改变,这如何做到呢?

4、Flutter将StatefulWidget设计成了两个类,也就是你创建StatefulWidget时必须创建两个类:

a、一个类继承自StatefulWidget,作为Widget树的一部分;
b、一个类继承自State,用于记录StatefulWidget会变化的状态,并且根据状态的变化,构建出新的Widget;

5、创建一个StatefulWidget,我们通常会按照如下格式来做:

a、当Flutter在构建Widget Tree时,会获取State的实例,并且它调用build方法去获取StatefulWidget希望构建的Widget;
b、那么,我们就可以将需要保存的状态保存在MyState中,因为它是可变的;

class MyStatefulWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // 将创建的State返回
    return MyState();
  }
}

class MyState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return <构建自己的Widget>;
  }
}
6、思考:为什么Flutter要这样设计呢?

这是因为在Flutter中,只要数据改变了Widget就需要重新构建(rebuild).

7、如何可以让Flutter知道我们的状态发生改变了,重新构建我们的Widget呢?

我们需要调用一个State中默认给我们提供的setState方法;
可以在其中的回调函数中修改我们的变量;

 RaisedButton(
                color: Colors.orangeAccent,
                child: Text("-1", style: TextStyle(fontSize: 18, color: Colors.white),),
                onPressed: () {
                     setState(() {
                        counter++;
                 });
                },
              )

相关文章

  • Flutter知识点总结二

    一、StatefulWidget和StatelessWidget 1、StatelessWidget:通常用来展示...

  • Flutter 知识点总结

    flutter column row布局的列表自适应宽高mainAxisSize: MainAxisSize.mi...

  • Flutter 总结《二》

    Q1: Flutter是如何自定义View? 通过继承CustomPainter,然后实现paint(Canvas...

  • Flutter 使用总结

    Flutter 使用总结 Flutter 安装 下载:Flutter SDK[https://flutter.de...

  • Flutter知识点二

    Multiple module support or walk around Import multiple Fl...

  • flutter 知识点总结(一)

    文档参考 https://zhuanlan.zhihu.com/p/102193331[https://zhuan...

  • Flutter知识点总结一

    一、设置图片的圆角 由于图片不能直接设置圆角,所以我们需要采用其它方式来设置: 1、使用ClipRRect进行设置...

  • Android-Flutter 面试真经

    关于Android Flutter 相关的面试知识点,我通过这次面试期间问道的问题进行了总结,将被问的问题第一反应...

  • Flutter实现拼图游戏

    实现这个小游戏, 需要哪些知识点了? 一. 加载图片 二. 绘图api 在flutter中有着跟android近乎...

  • 无标题文章

    综和复习本月知识点总结: 一:微信小程序 二:vue复习 三:js复习 四:新知识点 一:微信小程序知识点总结 开...

网友评论

      本文标题:Flutter知识点总结二

      本文链接:https://www.haomeiwen.com/subject/bcelxktx.html