Flutter学习 - 状态管理篇

前言

对于UI而言，最基础的就是展示数据，刷新数据，Flutter提供了一套状态管理机制来做这些事情

案例

通过一个案例来解释Flutter的状态管理机制是如何运作的，假设我们需要实现一个SegmentHeader，通过点击不同的按钮改变页面的背景色。 第一步创建一个继承自StatefulWidget的SegmentHeader类，同时创建_SegmentHeaderState

class SegmentHeader extends StatefulWidget {
  const SegmentHeader({super.key});

  @override
  State<StatefulWidget> createState() => _SegmentHeaderState();
}

class _SegmentHeaderState extends State<SegmentHeader> {
  @override
  Widget build(BuildContext context) {
    ...
  }
}

Flutter中Widget会随着每次更新重新创建，但是State会保留，所以状态字段都会放在State类中，目前需要保存的状态就是用户点击了那个Segment

class _SegmentHeaderState extends State<SegmentHeader> {
  var selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    ...

在_SegmentHeaderState中定义一个selectedIndex表示用户选择了哪个SegmentTab，接下来增加几个tab，并响应点击事件

class _SegmentHeaderState extends State<SegmentHeader> {
  var selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(child: buildItem(0, "Red", Colors.red)),
        Expanded(child: buildItem(1, "Blue", Colors.blue)),
        Expanded(child: buildItem(2, "Cyan", Colors.cyan)),
        Expanded(child: buildItem(3, "Purple", Colors.purple)),
      ],
    );
  }

  Widget buildItem(int index, String title, Color color) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedIndex = index;
        });
      },
      child: Container(
        margin: const EdgeInsets.all(5),
        height: 40,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            color: selectedIndex == index ? Colors.amber : Colors.white),
        child: Text(
          title,
          style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

在tab的点击事件中，通过setState修改selectedIndex的值，并且通过判断selectedIndex的值是否与当前tab的index相等来高亮选中的tab。最后再增加一个回调，告知上层选中的tab改变了

class SegmentHeader extends StatefulWidget {
  final Function(int, Color)? tabSelectedChanged;

  const SegmentHeader({super.key, this.tabSelectedChanged});

  @override
  State<StatefulWidget> createState() => _SegmentHeaderState();
}

class _SegmentHeaderState extends State<SegmentHeader> {
  var selectedIndex = -1;

...

  Widget buildItem(int index, String title, Color color) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedIndex = index;
        });
        if (widget.tabSelectedChanged != null) {
          widget.tabSelectedChanged!.call(index, color);
        }
      },
      child: ...
    );
  }
}

将写好的SegmentHeader整合到页面中，并控制页面的颜色

class LearnStatefulWidget extends StatefulWidget {
  const LearnStatefulWidget({super.key});
  @override
  State<StatefulWidget> createState() => _LearnStatefulWidgetState();
}

class _LearnStatefulWidgetState extends State<LearnStatefulWidget> {
  Color bgColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基本State管理"),
      ),
      body: Column(
        children: [
          SegmentHeader(
            tabSelectedChanged: (idx, color) {
              setState(() {
                bgColor = color;
              });
            },
          ),
          Expanded(
              child: Container(
            color: bgColor,
          ))
        ],
      ),
    );
  }
}

通过SegmentHeader的回调控制bgColor，从而达到改变颜色的目的

Provider库

在上面的案例中，我们使用系统的setState进行状态管理，但是有个问题，子Widget向父Widget的数据传递只能依靠回调，这样的话层级多了就很容易陷入回调地狱，为了更好的管理状态，我们可以使用三方状态管理库，比如Flutter官方推荐的Provider，接下来我们通过Provider来改造上面的案例。首先添加依赖

dependencies:
  provider: ^6.0.0

接下来定义一个数据模型来存储状态，目前这个页面需要存储的就是当前选择的索引和背景颜色

class SegmentPageModel extends ChangeNotifier {
  int selectedIndex = -1;
  Color bgColor = Colors.white;

  void setSelectedIndex(int val) {
    selectedIndex = val;
    notifyListeners();
  }

  void setBgColor(Color val) {
    bgColor = val;
    notifyListeners();
  }
}

这个模型继承了ChangeNotifier，当数据改变时，调用notifyListeners来通知外部，接下来重写SegmentHeader，由于使用了Provider，我们可以将SegmentHeader调整成为StatelessWidget

class SegmentHeader extends StatelessWidget {
  const SegmentHeader({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(child: buildItem(0, "Red", Colors.red)),
        Expanded(child: buildItem(1, "Blue", Colors.blue)),
        Expanded(child: buildItem(2, "Cyan", Colors.cyan)),
        Expanded(child: buildItem(3, "Purple", Colors.purple)),
      ],
    );
  }

  Widget buildItem(int index, String title, Color color) {
    return Consumer<SegmentPageModel>(builder: (context, value, child) {
      return GestureDetector(
        onTap: () {
          value.setSelectedIndex(index);
          value.setBgColor(color);
        },
        child: Container(
          margin: const EdgeInsets.all(5),
          height: 40,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              color:
                  value.selectedIndex == index ? Colors.amber : Colors.white),
          child: Text(
            title,
            style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
          ),
        ),
      );
    });
  }
}

这里一个重大改变就是需要动态改变的Widget被Consumer包裹起来，顾名思义，Consumer就是消费者的意思，当模型发送改变通知，Consumer就会重新build。在onTap回调里，我们调用setSelectedIndex和setBgColor触发模型的数据更新。现在有了消费者，模型实例还缺少生产的地方，需要通过ChangeNotifierProvider Widget来生产模型实例

class LearnProvider extends StatelessWidget {
  const LearnProvider({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Provider管理"),
        ),
        body: ChangeNotifierProvider(
          create: (context) => SegmentPageModel(),
          child: Column(
            children: [
              const SegmentHeader(),
              Expanded(
                  child: Consumer<SegmentPageModel>(
                builder: (context, value, child) => Container(
                  color: value.bgColor,
                ),
              ))
            ],
          ),
        ));
  }
}

在ChangeNotifierProvider的create中，返回模型实例即可，ChangeNotifierProvider的Consumer子Widget都会接收到同一个模型实例。

总结

本篇博客介绍了基础的状态管理方式以及三方状态管理库Provider，当然还有很多其他状态管理库，比如redux，Bloc，可以根据自己项目的复杂程度进行选择。