Flutter状态管理插件vanilla_state的使用

Flutter状态管理插件vanilla_state的使用

特点

具有以下功能：

  • 状态管理：VanillaNotifier
  • 状态监听小部件：VanillaListener, VanillaBuilder
  • VanillaNotifier依赖注入小部件：InheritedVanilla
  • 辅助工具以简化和加快不可变状态管理：EqualityChecker, StateWithStatus, VanillaUtilsMixin

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  vanilla_state: ^1.0.0

或者使用命令行添加：

flutter pub add vanilla_state

然后导入包：

import 'package:vanilla_state/vanilla_state.dart';

使用示例

下面是一个简单的示例，展示了如何使用vanilla_state来管理状态。

1. 创建一个状态管理器

class CounterNotifier extends VanillaNotifier<int> {
  CounterNotifier() : super(0); // 初始化状态为0

  void increment() {
    state = state + 1; // 增加状态值
  }

  void decrement() {
    state = state - 1; // 减少状态值
  }
}

2. 主应用文件

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: InheritedVanilla<CounterNotifier>(
        createNotifier: () => CounterNotifier(), // 创建状态管理器实例
        child: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

3. 主页面

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按了按钮多少次：',
            ),
            VanillaBuilder<CounterNotifier, int>( // 使用VanillaBuilder来监听状态变化
              builder: (context, state) {
                return Text(
                  '$state', // 显示当前状态值
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: context.read<CounterNotifier>().increment, // 增加状态值
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter状态管理插件vanilla_state的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter状态管理插件vanilla_state的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用vanilla_state插件进行状态管理的示例代码。vanilla_state是一个轻量级的状态管理库，旨在简化状态提升和跨组件通信。

首先，确保你已经在pubspec.yaml文件中添加了vanilla_state依赖：

dependencies:
  flutter:
    sdk: flutter
  vanilla_state: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

示例代码

1. 创建状态类

首先，我们定义一个简单的状态类。在这个例子中，我们将创建一个计数器状态。

// counter_state.dart
import 'package:vanilla_state/vanilla_state.dart';

class CounterState extends StateNotifier<int> {
  CounterState() : super(0);

  void increment() {
    state++;
  }

  void decrement() {
    state--;
  }
}

2. 创建UI组件

接下来，我们创建一个使用CounterState的Flutter组件。

// main.dart
import 'package:flutter/material.dart';
import 'package:vanilla_state/vanilla_state.dart';
import 'counter_state.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建CounterState实例并提供给子组件
    final counterState = useProvider(CounterState());

    return Scaffold(
      appBar: AppBar(
        title: Text('Vanilla State Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counterState.state}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => counterState.increment(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => counterState.decrement(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

注意，在上面的代码中，我们使用了useProvider来提供和访问CounterState实例。不过，vanilla_state库通常与provider库结合使用来进行依赖注入。因此，你需要在pubspec.yaml文件中添加provider依赖：

dependencies:
  provider: ^latest_version  # 请替换为最新版本号

然后，确保在main.dart文件的顶部导入provider：

import 'package:provider/provider.dart';

为了完整地使用provider，你还需要在MaterialApp的builder属性中包裹一个MultiProvider：

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<CounterState>(create: (_) => CounterState()),
      ],
      child: MyApp(),
    ),
  );
}

这样，CounterState就被提供给了整个应用，并且可以在任何子组件中通过useProvider访问。

总结

上述代码展示了如何在Flutter中使用vanilla_state插件进行状态管理。通过定义一个状态类并使用provider库将其提供给UI组件，你可以轻松地在组件之间共享和更新状态。希望这对你有所帮助！

回到顶部