Flutter状态管理插件utopia_hooks_riverpod的使用

Flutter状态管理插件utopia_hooks_riverpod的使用

utopia_hooks_riverpod 是一个结合了 hooks_riverpod 和 utopia_hooks 的状态管理工具。它允许开发者更方便地在 Flutter 应用中管理状态，并且通过 Hook 的方式简化了状态的使用。

以下是一个完整的示例，展示如何使用 utopia_hooks_riverpod 来管理状态。

示例代码

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:utopia_hooks_riverpod/utopia_hooks_riverpod.dart';

// 定义一个简单的状态模型
class CounterState {
  int count = 0;

  void increment() {
    count++;
  }

  void decrement() {
    count--;
  }
}

// 创建一个 Provider 来管理 CounterState
final counterProvider = StateNotifierProvider<CounterState>((ref) {
  return CounterState();
});

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'utopia_hooks_riverpod 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends HookConsumerWidget {
  const CounterPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    // 使用 useProvider 获取 CounterState
    final state = useProvider(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('utopia_hooks_riverpod 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          // 显示当前计数
            Text(
              '当前计数:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '${state.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 增加计数按钮
          FloatingActionButton(
            onPressed: () {
              state.increment();
            },
            tooltip: '增加',
            child: const Icon(Icons.add),
          ),
          const SizedBox(width: 10), // 添加间距
          // 减少计数按钮
          FloatingActionButton(
            onPressed: () {
              state.decrement();
            },
            tooltip: '减少',
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


utopia_hooks_riverpod 是一个结合了 flutter_hooks 和 riverpod 的状态管理插件，旨在简化 Flutter 应用中的状态管理。它允许你使用 flutter_hooks 的钩子函数来管理 riverpod 的状态，从而减少样板代码并提高代码的可读性。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0
  riverpod: ^1.0.0
  utopia_hooks_riverpod: ^1.0.0

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

基本用法

1. 创建一个 Provider

首先，你需要创建一个 Provider 来管理你的状态。riverpod 提供了多种类型的 Provider，例如 Provider、StateProvider、StateNotifierProvider 等。

import 'package:riverpod/riverpod.dart';

final counterProvider = StateProvider<int>((ref) => 0);

2. 在 Widget 中使用 utopia_hooks_riverpod

接下来，你可以在 Widget 中使用 utopia_hooks_riverpod 提供的钩子函数来访问和修改 Provider 的状态。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:utopia_hooks_riverpod/utopia_hooks_riverpod.dart';
import 'package:riverpod/riverpod.dart';

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useProvider(counterProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Counter: ${counter.state}',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  counter.state++;
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

  • ProviderScope: 这是 riverpod 的根组件，所有的 Provider 都需要在 ProviderScope 下使用。
  • useProvider: 这是 utopia_hooks_riverpod 提供的钩子函数，用于访问 Provider 的状态。它返回一个 StateController，你可以通过 state 属性来访问和修改状态。

其他功能

utopia_hooks_riverpod 还提供了其他一些钩子函数，例如 useProviderState、useProviderListener 等，用于更细粒度的状态管理。

useProviderState

useProviderState 允许你直接访问 Provider 的状态，而不需要手动调用 state 属性。

final counter = useProviderState(counterProvider);

useProviderListener

useProviderListener 允许你在 Provider 的状态发生变化时执行一些操作。

useProviderListener(counterProvider, (previous, next) {
  print('Counter changed from $previous to $next');
});
回到顶部