美文网首页
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知识点总结二

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