Flutter状态管理插件widget_state

Flutter状态管理插件widget_state_notifier的使用

widget_state_notifier 是一个为Flutter应用程序设计的简单而强大的状态管理库。它提供了 WidgetStateNotifier 类来管理和广播状态变化，并且提供了 WidgetStateConsumer 小部件来在UI中消费状态变化。

开始使用

在您的 pubspec.yaml 文件中添加 widget_state_notifier 包：

dependencies:
  widget_state_notifier: ^1.0.0

使用方法

使用 `WidgetStateNotifier`

// 初始化一个 WidgetStateNotifier 实例
WidgetStateNotifier<int> counterStateNotifier = WidgetStateNotifier<int>(currentValue: 0);

// 发送新的状态
counterStateNotifier.sendNewState(newValue);

// 添加控制器以监听状态变化
counterStateNotifier.addController(yourChangeNotifier, yourListenerFunction);

// 在不再需要时释放控制器
counterStateNotifier.removeController();

使用 `WidgetStateConsumer`

WidgetStateConsumer<int>(
  widgetStateNotifier: counterStateNotifier,
  widgetStateBuilder: (context, data) {
    return Text('Counter Value: $data');
  },
);

示例

以下是一个简单的示例，展示了如何使用 WidgetStateNotifier 和 WidgetStateConsumer 来管理并在Flutter应用中消费状态：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  [@override](/user/override)
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  WidgetStateNotifier<int> counterStateNotifier = WidgetStateNotifier<int>(currentValue: 0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Example'),
      ),
      body: Center(
        child: WidgetStateConsumer<int>(
          widgetStateNotifier: counterStateNotifier,
          widgetStateBuilder: (context, data) {
            return Text('Counter Value: $data');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterStateNotifier.sendNewState(counterStateNotifier.currentValue! + 1);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

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

vueper 1楼•4 天前

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

当然，以下是一个关于如何在Flutter中使用widget_state_notifier插件进行状态管理的代码示例。widget_state_notifier是一个简化的状态管理库，基于Riverpod和State Notifier，使得状态管理更加简洁和高效。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0  # 如果你打算使用Hooks
  flutter_riverpod: ^1.0.0  # Riverpod库

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

接下来，我们创建一个简单的计数器应用，展示如何使用widget_state_notifier进行状态管理。

1. 创建State Notifier类

首先，我们创建一个State Notifier类来管理计数器的状态。

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

  void increment() {
    state++;
  }

  void decrement() {
    state--;
  }
}

final counterProvider = StateNotifierProvider<CounterNotifier>((ref) {
  return CounterNotifier();
});

2. 创建UI组件

接下来，我们使用Riverpod的ConsumerWidget来消费我们的状态提供者，并创建UI组件。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_notifier.dart'; // 假设上面的代码在这个文件中

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

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

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(counterProvider.notifier).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

在这个示例中，我们创建了一个CounterNotifier类来管理计数器的状态，并通过StateNotifierProvider提供了一个状态提供者。然后，在CounterScreen组件中，我们使用ConsumerWidget和ref.watch来监听状态的变化，并使用ref.read来调用状态提供者的方法。

3. 添加减少按钮（可选）

为了让示例更完整，我们可以添加一个减少按钮：

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              ref.read(counterProvider.notifier).decrement();
            },
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () {
              ref.read(counterProvider.notifier).increment();
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

这样，你就拥有了一个简单的计数器应用，它使用widget_state_notifier（实际上是通过Riverpod实现的）进行状态管理。希望这个示例对你有帮助！

Flutter状态管理插件widget_state_notifier的使用