小菜鸡开始学习flutter之二十七

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

今日目标

前面我们学习了那么多布局相关的组件，但是我们创建组件的时候都是使用的无状态组件，也就是单纯的写样式，今天我们来学习了解有状态的组件 statefulwidget,学习在页面上绑定数据并修改数据

StatefulWidget

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget.
StatelessWidget是无状态组件，状态不可改变的widget
StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变，通俗的来说，如果我们想改变页面中的 数据的话这个时候就需要用到StatefulWidget
大家如果是像我一样使用vscode编码的话，建议大家安装awesome flutter snippets这个插件，可以方便我们快速的输出代码。
我们通过一个例子来学习 例： 实现一个点击按钮数值加1的功能 首先我们用一下我们熟悉的statelesswidget来试试看

class HomeContent extends StatelessWidget {
  int count = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 200,
        ),
        Text('${this.count}'),
        ElevatedButton(
            onPressed: () {
              count++;
              print(count);
            },
            child: Text('按钮'))
      ],
    );
  }
}

可以看到无论我们点击按钮多少次，页面上显示的始终都是1，但开始我们在控台上可以看到count的数值是发生了改变的。这就是statelesswidget，它无法动态的改变页面上的数据。

class HomeContent extends StatefulWidget {
  HomeContent({Key? key}) : super(key: key);

  @override
  State<HomeContent> createState() => _HomeContentState();
}

class _HomeContentState extends State<HomeContent> {
  int count = 1;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 200,
        ),
        Chip(label: Text('${count}')),
        ElevatedButton(
            onPressed: () {
              setState(() {
                this.count++;
              });
            },
            child: Text('点击'))
      ],
    );
  }
}

如上的代码就是一个自定义的有状态组件写法，可以看到我们初始定义的count是1，现在图上已显示为8了，说明页面状态发生了改变。
修改数据的时候是通过setState()这个方法来实现数据更新的

class HomeContent extends StatefulWidget {
  HomeContent({Key? key}) : super(key: key);

  @override
  State<HomeContent> createState() => _HomeContentState();
}

class _HomeContentState extends State<HomeContent> {
  List list = [];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(
            children: this.list.map((value) {
          return ListTile(
            title: Text('这是一个片段${value}'),
          );
        }).toList()),
        SizedBox(
          height: 200,
        ),
        ElevatedButton(
            onPressed: () {
              setState(() {
                this.list.add(this.list.length);
              });
            },
            child: Text('按钮'))
      ],
    );
  }
}

结合一下之前咱们学习的listview，就很轻松的写出俩一个可以动态增加的列表页。
怎么样是不是感觉有状态的组件也不是很难呀~

ending

持续学习~~ 如有不正确的地方还请指正。