美文网首页Flutter
从零开始学Flutter--Widget

从零开始学Flutter--Widget

作者: Observer_观者 | 来源:发表于2020-09-23 14:00 被阅读0次

    Widget的概念

    在面向对象的语言中有一句话叫 一切皆对象,而在Flutter中有一种说法是 一切皆Widget

    Widget是描述一个UI元素的配置数据的对象,不仅仅是一个控件,包含对一个UI元素的样式或者事件等描述

    Widget的createElement函数

    Widget与Elemen的关系
    从上面的概念中其实可以看出,widget只是配置信息,他不是真正呈现的对象,真正显示出来的是Elemen,一个widget可以对应多个Elemen,也就是说Elemen可以随便选择需要的widget,两个Elemen对象选择一个widget他们就展示出来的样式是一样的

    StatelessWidget 和 StatefulWidget

    StatelessWidget 一种无状态改变的widget,当描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时,无状态widget非常有用,反过来就是StatefulWidget

    通俗的讲就是如果一个UI元素是一个不会改变的文本元素(这里可以是任何UI元素),就用StatelessWidget ,如果这个UI元素会改变他的包括Text属性等状态,就用StatefulWidget,也可以这样说 StatefulWidget包含StatelessWidget,但是StatelessWidget是不能达到StatefulWidget的效果的。

    AboutDialog, CircleAvatar和 Text 都是StatelessWidget的子类。
    Checkbox, Radio, Slider, InkWell, Form, 和 TextField 都是有状态的widget,也是StatefulWidget的子类。

    其中从这两个类的子类就可以大致看出这两个类的的区别

    举个例子

    继承StatelessWidget

    class PageDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Scaffold(
          appBar: new AppBar(
            title: Text("举个例子"),
          ),
          body: new Center(
            child: Text("我继承StatelessWidget,状态不会改变"),
          ),
        );
      }
    }
    

    效果图就不截了,当我们继承StatelessWidget之后,只需要实现 build 函数,我们没有办法再去修改他的状态

    继承StatefulWidget

    class PageOne extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return new TextSatte();
      }
    }
    
    class TextState extends State {
      var _count = 0;
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Scaffold(
          appBar: new AppBar(
            title: Text("举个例子"),
          ),
          body: new Stack(
            children: <Widget>[
              new Align(
                child: Text("我继承StatefulWidget$_count"),
              ),
              new Align(
                alignment: new FractionalOffset(0.5, 1),
                child: new MaterialButton(
                  onPressed: () {
                    setState(() {
                      _count++;
                    });
                  },
                  child: Text("改变状态"),
                ),
              )
            ],
          ),
        );
      }
    }
    

    继承StatefulWidget 之后,他让我们必须去实现createState函数,返回一个State,然后我们继承 State 自己写一个TextState,在我们去改变UI元素状态的时候,我们调用了一个 setState 系统函数,然后达到了改变UI元素状态的效果,这是继承 StatelessWidget 做不到的

    总结
    这里我们学习了widget的含义,知道了他的两个子类StatelessWidget 和StatefulWidget 的区别,其实有一些不好判断是否需要改变状态的UI元素,可以都用StatefulWidget来做,后面确定不需要修改之后可以再修改成StatelessWidget,熟能生巧之后,以后打代码就更加得心应手了。

    相关文章

      网友评论

        本文标题:从零开始学Flutter--Widget

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