Flutter 组件之StatefulWidget与StatelessWidget-蒲公英云

Flutter 组件之StatefulWidget与StatelessWidget

末蓝、 2023-07-17 06:07 61阅读 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"),
       )
     ]);
   }
 }