Flutter中StatefulWidget有状态组件

在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget。

StatelessWidget 是无状态组件，状态不可变的 widget

StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变，如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget。

利用有状态的组件实现一个点击按钮计数的效果。

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomePage()
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 定义有状态组件
class HomePage extends StatefulWidget {
    HomePage({Key key}) : super(key: key);
    _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    // 当前需要改变的状态值
    int countNum = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            
            children:<Widget>[
                // 添加间距
                SizedBox(height:200),
                // 小标签
                Chip(label: Text("${this.countNum}")),
                // 添加间距
                SizedBox(height:20),
                // 按钮
                RaisedButton(
                    child:Text("按钮"),
                    // 点击事件
                    onPressed: (){
                        // 改变状态，有状态组件里才有
                        setState(() {
                            this.countNum++;
                        });
                    }
                )
            ],
        );
    }
}

在有状态组件中，以上代码中的按钮点击时，数字会每次加1，效果图如下：

利用有状态组件实现类似于toDoList的效果。

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomePage()
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}



// 定义有状态组件
class HomePage extends StatefulWidget {
    HomePage({Key key}) : super(key: key);
    @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    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()
                ),
                // 添加间距
                SizedBox(height:20),
                // 按钮
                RaisedButton(
                    child: Text("按钮"),
                    // 点击事件
                    onPressed:(){
                        // 改变状态，有状态组件才有
                       setState(() {
                          this.list.add("新加一条数据");
                       });
                    },
                )
            ],
        );
    }
}

在有状态组件中，以上代码中的按钮每点一下，上面的数据列表就会添加一条数据，效果图如下：