EMPIRE

一个简单、轻量的 Flutter 状态管理库

特点

一种类似 Model-View-ViewModel (MVVM) 的状态管理方法。与其他状态管理解决方案相比，它具有更少的样板代码，并大大减少了 Widget 构建函数中的混乱。

用法

一个使用经典 Flutter Counter App 的简单示例。

counter_view_model.dart

class CounterViewModel extends EmpireViewModel {
  late final EmpireProperty<int> count;

  @override
  void initProperties() {
    count = createProperty(0);
  }

  Future<void> incrementCounter() async {
    count(count.value + 1);
  }
}

counter_page.dart

class CounterPage extends EmpireWidget<CounterViewModel> {
  const CounterPage({Key? key, required CounterViewModel viewModel})
      : super(key: key, viewModel: viewModel);  

  @override
  EmpireState<EmpireWidget<EmpireViewModel>, CounterViewModel> createEmpire() => _CounterPageState(viewModel);
}

class _CounterPageState extends EmpireState<CounterPage, CounterViewModel> {
  _CounterPageState(super.viewModel);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Example')),
      body: Center(
        child: Text('${viewModel.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

main.dart

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Empire State Example',
      home: CounterPage(
        viewModel: CounterViewModel(),
      ),
    );
  }
}

我们的业务逻辑以一种干净简单的方式与 UI 分离。即使在更复杂的情况下，使用其他状态管理解决方案时，通常需要创建单独的类来表示您的状态，但使用 Empire，即使支持最复杂的场景，也只需如此简单的操作。

通过扩展 EmpireWidget 和 EmpireState 并提供 EmpireViewModel，当您的视图模型中的 EmpireProperty 发生变化时，您的 UI 将自动更新。

应用程序范围的状态管理

如果您有应用程序范围的数据，希望所有 Widget 随时都能访问，那么 Empire Widget 就派上用场了。

为您的应用程序创建一个 ViewModel

application_view_model.dart

class ApplicationViewModel extends EmpireViewModel {
  late final EmpireProperty<User?> loggedInUser;

  @override
  void initProperties() {
    loggedInUser = createProperty(null);
  }

  void updateUser(User user) => loggedInUser(user);
}

将您的 CupertinoApp 或 MaterialApp 的子项设置为 Empire Widget。提供一个函数来生成唯一的应用程序状态 ID。这会告诉您的应用程序需要刷新 Empire Widget 下方的 Widget 树。在此示例中，我们使用 Uuid 包来处理创建唯一 ID，但我们由您决定要在应用程序中包含哪些依赖项。每当 ApplicationViewModel 中的 loggedInUser 属性发生更改时，都会调用此函数，并触发您的应用程序 UI 进行更新。

main.dart

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Empire(
        ApplicationViewModel(),
        onAppStateChanged: () => const Uuid().v1(),
        child: Builder(
          builder: (context) {              
            final appViewModel = Empire.viewModelOf<ApplicationViewModel>(context);
            final loggedInUser = appViewModel.loggedInUser;

            return Column(
              children: [
                Text('User: ${loggedInUser}'),
                TextButton(
                  child: Text('Update User'),
                  onPressed: () => appViewModel.updateUser(User('foo', 'bar')),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

附加信息

此包零依赖任何其他包。

您可以在此处找到完整的 API 文档

开发人员

© 2022 Strive Business Solutions

GitHub

查看 Github