美文网首页Flutter自学教程
【Flutter 2-4】Flutter手把手教程UI布局和Wi

【Flutter 2-4】Flutter手把手教程UI布局和Wi

作者: 弗拉德x | 来源:发表于2021-01-06 14:53 被阅读0次

    作者 | 弗拉德
    来源 | 弗拉德(公众号:fulade_me)

    Statelesswidget

    如果一个Widget从初始化到使用再到销毁,整个过程中都不需要修改其UI的样式,例如纯展示页面,我们就用Statelesswidget。常见的Statelesswidget有:TextIconImageIconDialog等。可以看到这些往往都是一些展示类的,不需要改变其状态的控件。
    使用Statelesswidget更轻量,更节省内存资源。初始化Statelesswidget的时候不会附带一些动态更新UI的方法,这样也会提升我们软件的性能。

    需要注意的是:
    在iOS开发中,初始化一个Label并命名为la,改变它的文字内容,会调用la.text = @"new text",我们可以理解为Label不是Statelesswidget的,因为它的text属性被改变了。那Flutter的Text为什么又是Statelesswidget的呢?因为Flutter中一切Widget都是 “配置文件”,当我们修改文本之后,Flutter会帮助我们重新初始化一个Text,而不是修改当前的Text对象,这是与原生开发不一样的地方。

    Statefulwidget

    Statefulwidget是可变的Widget,在我们的开发中会大量使用Statefulwidget。它实现了一个setState方法,当我们调用这个方法的时候,该Statefulwidget会被重新渲染,注意是重新被渲染,而不是局部更新。
    当我们调用setState时,Flutter在收到该消息后,会重新调用其build方法重新构建这个widget,从而达到更新UI的目的。

    来看如下代码:

    
    class StatefulWidgetDemoPage extends StatefulWidget {
      @override
      _StatefulWidgetDemoPageState createState() => _StatefulWidgetDemoPageState();
    }
    
    class _StatefulWidgetDemoPageState extends State<StatefulWidgetDemoPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {});
            },
            child: Icon(Icons.add),
          ),
          appBar: AppBar(
            title: Text("StatefuleWidget Demo"),
            centerTitle: true,
            backgroundColor: Colors.blue,
          ),
          body: Column(
            children: [
              Container(
                width: 100,
                height: 100,
                margin: EdgeInsets.all(10),
                /// 颜色一个随机值
                color: _randomColor(),
              ),
            ],
          ),
        );
      }
    
      /// 获取一个随机的颜色值
      _randomColor() {
        return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),
            Random().nextInt(255));
      }
    }
    

    我们定义了一个生成随机颜色的方法_randomColor(),它会返回一个Color对象,然后我们又定义了一个ContainerContainer的初始化参数color的值是_randomColor()的返回值。然后我们在FloatingActionButtononPressed的方法中调用一下setState方法,这个时候Flutter会重新绘制StatefulWidgetDemoPage,所以每次点击按钮,我们可以看到Container的颜色都是不一样的。

    一切都是Widget

    在Flutter中我们看到的UI元素都是由Widget生成的,包括手势,在Flutter中也是WidgetWidget并不是我们看到的UI元素,我们实际看到的UI元素叫ElementWidgetElement的配置数据。
    我们写了大量的Widget经Flutter处理渲染生成了Element来展示在手机屏幕上。所以当我们调用setState方法的时候,我们只是更新了配置数据,Flutter依照更新后的配置数据来生成新的Element来达到渲染UI的目的。

    注意
    一个 Widget可以对应多个Elememt对象,这等同与一个配置文件可以生成多个实例对象一样。

    想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->statefulwidget_page.dart查看,并且可以下载下来运行并体验。

    相关文章

      网友评论

        本文标题:【Flutter 2-4】Flutter手把手教程UI布局和Wi

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