Flutter 组件之StatefulWidget与StatelessWidget

末蓝、 2023-07-17 06:07 20阅读 0赞

> 在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"),
           )
         ]);
       }
     }