Flutter未知功能插件ngex的潜在使用（注意：由于介绍为undefined，以下基于插件名称进行合理推测） Flutter功能扩展插件ngex的潜在使用

Flutter未知功能插件ngex的潜在使用（注意：由于介绍为undefined，以下基于插件名称进行合理推测）

Flutter功能扩展插件ngex的潜在使用

Ngex 是一个简单的状态管理框架，适用于 Flutter 应用。它允许你在全局范围内创建数据存储，或者将其用作应用程序控制器的数据管理器。

导入库

首先，你需要导入 ngex 包：

import 'package:ngex/ngex.dart';

StoreValue

StoreValue 允许我们在存储中创建一个值，并将初始值作为唯一参数传递。

让我们来看一个 StoreValue 的示例：

import 'package:ngex/ngex.dart';

class Store {
  final counter = StoreValue<int>(10); // 初始值为10
  void increment() => counter++; // 设置增量值

  final list = StoreValue<List<int>>([]);
  void addItem(int item) {
    list.value.add(item);
    list.notify();
  }

  void listWatch() {
    // 开始监听属性变化
    list.watch((element) => print(element));
  }
}

StoreBuilder

StoreBuilder 是一个 Flutter 小部件，允许我们管理应用视图中的状态更改。此小部件接收一个值和一个构建器作为参数，这些参数将允许进行状态管理。

让我们来看一个 StoreBuilder 的示例：

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final counter = StoreValue<int>(10);

  void increment() {
    counter.value++;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Container(
        child: StoreBuilder(
          value: counter,
          builder: (context, state) {
            return Text("${state.value}");
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => increment(),
        child: const Icon(Icons.navigation),
      ),
    );
  }
}

NgexStore

NgexStore 是一个接口，允许你创建一个存储，可以用来扩展你的控制器类，从而允许你将数据层与业务逻辑分离。

此外，NgexStore 还有一个名为 initStore 的方法，在开始使用存储时执行，允许根据情况执行必要的方法或验证。

让我们来看一个 NgexStore 的示例：

首先，我们需要创建三个文件：store.dart, controller.dart 和 view.dart。

store.dart

class AppStore extends NgexStore {
  final counter = StoreValue<int>(10);

  void increment() {
    counter.value++;
  }
}

controller.dart

class AppController extends AppStore {
  [@override](/user/override)
  void initStore() {
    counter.watch((val) => print("Counter value is: ${val}"));
    super.initStore();
  }

  void incrementCounter() {
    increment();
  }
}

view.dart

class _MyAppState extends State<MyApp> {
  final ctrl = AppController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Container(
        child: StoreBuilder(
          value: ctrl.counter,
          builder: (context, state) {
            return Text("${state.value}");
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ctrl.incrementCounter(),
        child: const Icon(Icons.navigation),
      ),
    );
  }
}