Flutter Riverpod 状态管理上手技巧分享

这篇文章距离上次修改已过223天，其中的内容可能已经有所变动。

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

// 定义一个状态Notifier，包装需要管理的状态
class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() {
    state++;
  }
}

// 使用Provider控制状态
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用Consumer来读取状态
              Consumer(builder: (context, ref, _) {
                final counter = ref.watch(counterProvider);
                return Text('$counter', style: Theme.of(context).textTheme.headline4);
              }),
              const SizedBox(height: 20),
              // 使用Consumer来触发状态变化
              Consumer(builder: (context, ref, _) {
                return ElevatedButton(
                  onPressed: () => ref.read(counterProvider.notifier).increment(),
                  child: const Text('Increment'),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码展示了如何使用Flutter Riverpod插件库管理状态。我们定义了一个CounterNotifier，它包装了一个整数状态，并提供了一个increment方法来改变状态。然后我们创建了一个counterProvider，它用来全局提供和获取CounterNotifier的实例。在MyApp的build方法中，我们使用Consumer来读取状态，并展示在一个Text控件中，同时使用另一个Consumer来创建一个ElevatedButton，当按钮被点击时，会触发状态的变化。这个例子简单而直接地展示了如何使用Riverpod进行状态管理。

Flutter Riverpod 状态管理上手技巧分享

评论已关闭

推荐阅读