flutter StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据

Flutter 中自定义组件简介

// 在Flutter中，自定义组件实质上是一个类，此类可以继承StatelessWidget或StatefulWidget。
// StatelessWidget是一个无状态的组件，这意味着它的状态在其生命周期内不会改变。
// 反之，StatefulWidget是一个有状态的组件，这意味着它在其生命周期内可以改变状态。
// 当我们需要改变页面中的数据时，我们通常使用StatefulWidget配合setState()方法。

有状态组件 代码示例

// 下面是一个名为HomeCenter的有状态组件示例。这个组件持有一个状态`list`。
// 该组件包含一个按钮，点击时，会在列表中添加一个新的条目。

class HomeCenter extends StatefulWidget {
  // 定义HomeCenter构造函数，它可能接收一个key。
  HomeCenter({Key key});

  // createState方法返回与此widget关联的状态对象。
  _HomeCenterState createState() => _HomeCenterState();
}

class _HomeCenterState extends State {
  // 初始化一个空列表来保存数据
  var list = [];

  @override
  Widget build(BuildContext context) {
    // 返回一个ListView，其中包含多个子组件
    return ListView(
      children: [
        // 使用Column来垂直放置子组件
        Column(
          children: list.map((val) {
            // 遍历list并为每个条目创建一个Text widget
            return Text(val['title']);
          }).toList(),
        ),
        Container(
          // 容器中包含一个RaisedButton组件
          child: RaisedButton(
            child: Text('点击'),
            onPressed: () {
              // 当按钮被点击时，更新状态来增加一个新的条目到list中
              setState(() {
                this.list.add({
                  'title': '111'
                });
              });
            }
          ),
        )
      ]
    );
  }
}