自建Flutter状态管理库：100行代码掌握状态管理精髓

2023-10-04 05:19:45

揭开状态管理的神秘面纱

Flutter应用中，状态是至关重要的。它承载着用户交互产生的数据，决定着界面呈现的样貌。而状态管理，便是确保状态变化井然有序、可控可追溯的技术。

市面上琳琅满目的状态管理库虽然方便，却也掩盖了状态管理的本质。为了真正掌握这门技术，我们何不跳出框架，从头开始构建自己的状态管理库呢？

100行代码，打造专属状态管理库

借助Flutter提供的ChangeNotifierProvider和ValueListenableBuilder，我们可以用不到100行代码搭建一个简易的状态管理库。核心思想是将状态封装在一个Provider中，然后使用ValueListenableBuilder监听状态变化，实现UI更新。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class MyStateProvider extends ChangeNotifier {
  int count = 0;

  void increment() {
    count++;
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => MyStateProvider(),
      child: ValueListenableBuilder(
        valueListenable: Provider.of<MyStateProvider>(context),
        builder: (context, value, child) {
          return Scaffold(
            body: Center(
              child: Text('Count: ${value.count}'),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () => Provider.of<MyStateProvider>(context, listen: false).increment(),
              child: Icon(Icons.add),
            ),
          );
        },
      ),
    );
  }
}