Flutter 组件之StatefulWidget与StatelessWidget

在flutter中自定义组件其实就是一个类, 想要定义组件必须要继承StatefulWidget或StatelessWidget

• StatefulWidget：有状态组件, 持有的状体可以再Widget生命周期中发生改变。只要我们想改变页面中的数据,这个时候就需要继承StatefulWidget类
• StatelessWidget：无状态组件,状态不可改变

无状态组件

//直接继承无状态组件的类就可以使用
class StudyFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("我是头部的内容"),
        ),
        body: Text("无状态内容部分"),
      ),
    );
  }
}

有状态组件

与Vue,React中的数据绑定很相似
下面这个案例通过点击按钮可以动态生成一个列表数据,数据视图实时更新

 class ShowListView extends StatefulWidget {//继承StatefulWidget主结构
   ShowListView({Key key}) : super(key: key);

   @override//重写动态数据构建方法
   _ShowListViewState createState() => _ShowListViewState();
 }
	//定义私有函数来继承数据类就可以了
 class _ShowListViewState extends State<ShowListView> {
   List list = new List();
	//这里就是有状态组件的主要结构了,这里写你要定义的代码
   @override
   Widget build(BuildContext context) {
     return ListView(children: <Widget>[
       Column(
         children: this.list.map((value) {
           return ListTile(
             title: Text(value),
           );
         }).toList(),
       ),
       RaisedButton(
         onPressed: () {
           setState(() {
             this.list.add("我是第2条新闻");
           });
         },
         child: Text("submit"),
       )
     ]);
   }
 }