Flutter工具集插件semibox_mobx_base_utils的使用

Semibox mobx base utils

这是一个包，包含函数和小部件以使应用程序开发更快更方便。目前它由一个开发者开发。

Support

1. Base screen

[BaseScreen] 是应用程序中所有屏幕的基础类。

• 它为屏幕提供了一些有用的方法。
• 每个屏幕都应该继承此基类。
• 示例：

class MyHomePage extends BaseScreen {
     const MyHomePage({Key? key}) : super(key: key);
     [@override](/user/override)
     State<MyHomePage> createState() => _MyHomePageState();
}

2. BaseScreenState

[BaseScreenState] 是应用程序中所有屏幕状态的基础类。

• 它提供了 [store]。
• 使用 AutomaticKeepAliveClientMixin 可以在用户导航到其他屏幕时保持屏幕活动。
• 它还提供了 [initState] 方法来初始化 [store] 实例。
• 它还提供了 [build] 方法来构建屏幕。
• 每个屏幕状态都应该继承此基类。
• [BaseScreenState] 是一个有状态的小部件。
• 示例：

class _MyHomePageState extends BaseScreenState<MyHomePage, MainStore> {}

2. Store

State managements

/// 在更新前清理：
///    flutter packages pub run build_runner watch --delete-conflicting-outputs

part 'example_store.g.dart';

class ExampleStore = _ExampleStore with _$ExampleStore;

abstract class _ExampleStore with Store, BaseStoreMixin {
  [@override](/user/override)
  void onInit(BuildContext context) {}

  [@override](/user/override)
  void onDispose() {}
}

完整示例Demo

以下是一个完整的示例，展示了如何使用 semibox_mobx_base_utils 包来创建一个简单的应用。

main.dart

import 'package:flutter/material.dart';
import 'package:semibox_mobx_base_utils/semibox_mobx_base_utils.dart';
import 'example_store.dart'; // 引入你的 Store 类

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends BaseScreen {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends BaseScreenState<MyHomePage, ExampleStore> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 Store
    store.onInit(context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${store.someValue}', // 假设你有一个名为 someValue 的变量
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 更新 Store 中的数据
          store.updateSomeValue();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

example_store.dart

// 这个文件通常通过 build_runner 自动生成
part 'example_store.g.dart';

class ExampleStore = _ExampleStore with _$ExampleStore;

abstract class _ExampleStore with Store, BaseStoreMixin {
  [@observable](/user/observable)
  int someValue = 0;

  [@action](/user/action)
  void updateSomeValue() {
    someValue++;
  }

  [@override](/user/override)
  void onInit(BuildContext context) {
    // 初始化操作
  }

  [@override](/user/override)
  void onDispose() {
    // 清理操作
  }
}