Flutter学习笔记(9)--组件Widget

2019/7/22 1:10:06 人评论 次浏览 分类:flutter

广告开始--------------------------

Dart教程/Flutter入门必备基础视频教程/2019年5月录制

文件格式:视频     

预览网址:【直接浏览网址即可】http://nicethemes.cn/product/view51.html

Flutter入门必备基础视频教程。

广告结束--------------------------

如需转载,请注明出处:Flutter学习笔记(8)--Dart面向对象

在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调用setState()来通知框架,框架会再次调用State的构建方法来更新用户界面),Flutter会自动通过绑定的数据更新Widget,所以你需要做的就是实现Widget界面,并且和数据绑定起来。

Widget分为有状态StatefulWidget和无状态StatelessWidget两种,在Flutter中,Widget仅支持一帧,理解起来就是一次性绘制整个界面,无状态就是指当绘制完这一帧后,保持在这一帧的状态下不会变化,而有状态的Widget当数据更新时,其实是绘制了新的Widget,只是state实现了跨帧的数据同步保存。

上面简单的说了有状态和无状态两种Widget,那么我们该怎么选择在什么时机有哪种Widget呢?举两个简单的例子说明一下

1.在app的启动页面,我们需要展示一张启动图,但是展示过后,我们不需要这张图片发生任何的改变,保持在这一帧的状态下就可以了,这时候,我们就可以选择无状态StatelessWidget

2.在一个页面里面,有一个text和一个button,需求是点击button后,text的内容需要发生变化,也就是说根据用户交互或在网络请求下,页面需要发生变化,需要重新绘制,这种情况下,我们就需要有状态的StatefulWidget。

如果还是有一点不理解的话,那就记住一个规则:如果一个widget发生了变化(例如用户交互、网络请求更新页面),那么它就是有状态的,反之,如果widget绘制完之后,不会发生任何变化,那么它就是无状态的。

上面我们已经讲了无状态和有状态的widget,接下来具体讲一下这两种的实现方式:

  • 无状态StatelessWidget

继承StatelessWidget,通过build返回一个布局好的组件

import 'package:flutter/material.dart';    void main() => runApp(DEMOWidget());      class DEMOWidget extends StatelessWidget {      @override    Widget build(BuildContext context) {      return MaterialApp(        title: '无状态Widget',        home: Scaffold(          appBar: AppBar(            title: Text('无状态Widget Demo'),          ),          body: Center(            child: Text('这是一个无状态的Demo'),          ),        ),      );    }  }

  • 有状态StatefulWidget

import 'package:flutter/material.dart';    void main() => runApp(SampleApp());      class SampleApp extends StatelessWidget {    // This widget is the root of your application.    @override    Widget build(BuildContext context) {      return new MaterialApp(        title: 'Sample App',        theme: new ThemeData(          primarySwatch: Colors.blue,        ),        home: new SampleAppPage(),      );    }  }    class SampleAppPage extends StatefulWidget {    SampleAppPage({Key key}) : super(key: key);      @override    _SampleAppPageState createState() => new _SampleAppPageState();  }    class _SampleAppPageState extends State {    // Default placeholder text    String textToShow = "I Like Flutter";      @override    Widget build(BuildContext context) {      return new Scaffold(        appBar: new AppBar(          title: new Text("Sample App"),        ),        body: new Center(child: new Text(textToShow)),        floatingActionButton: new FloatingActionButton(          onPressed: _updateText,          tooltip: 'Update Text',          child: new Icon(Icons.update),        ),      );    }      void _updateText() {      setState(() {        // update the text        textToShow = "Flutter is Awesome!";      });    }  }

下一章节:Flutter学习笔记(10)--基础知识

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->