Flutter状态管理插件hooks_state_notifier的使用
Flutter状态管理插件hooks_state_notifier的使用
此包提供了类似于useValueListenable
的useStateNotifier
钩子。此外还有useCreateStateNotifier
钩子,它会创建一个StateNotifier
并自动处理其生命周期。
使用
// 1. 创建你的状态通知器(StateNotifier)
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state++;
void decrement() => state--;
}
// 2. 扩展钩子小部件(HookWidget)
class ReadMeExample extends HookWidget {
const ReadMeExample({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
// 3. 创建你的通知器(useCreateStateNotifier会自动处理其生命周期)
final notifier = useCreateStateNotifier(() => CounterNotifier());
// 4. 监听你的状态
final state = useStateNotifier(notifier);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkResponse(
onTap: notifier.increment, // 点击时增加计数
child: const Icon(Icons.add),
),
Text(
'$state', // 显示当前状态
style: const TextStyle(fontSize: 30),
),
InkResponse(
onTap: notifier.decrement, // 点击时减少计数
child: const Icon(Icons.remove),
),
],
);
}
}
完整示例
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_state_notifier/hooks_state_notifier.dart';
import 'package:state_notifier/state_notifier.dart';
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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends HookWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: const Center(child: ReadMeExample()), // 在页面中心显示ReadMeExample
);
}
}
// 创建状态通知器
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state++;
void decrement() => state--;
}
// 钩子小部件
class ReadMeExample extends HookWidget {
const ReadMeExample({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
final notifier = useCreateStateNotifier(() => CounterNotifier()); // 创建并管理状态通知器
final state = useStateNotifier(notifier); // 监听状态通知器的状态变化
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkResponse(
onTap: notifier.increment, // 增加按钮
child: const Icon(Icons.add),
),
Text(
'$state', // 显示当前状态
style: const TextStyle(fontSize: 30),
),
InkResponse(
onTap: notifier.decrement, // 减少按钮
child: const Icon(Icons.remove),
),
],
);
}
}
更多关于Flutter状态管理插件hooks_state_notifier的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter状态管理插件hooks_state_notifier的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
hooks_state_notifier
是一个结合了 flutter_hooks
和 state_notifier
的状态管理插件,它允许你在 Flutter 中使用 StateNotifier
来管理状态,同时利用 flutter_hooks
来简化状态管理代码。这种结合使得状态管理更加简洁和高效。
安装
首先,你需要在 pubspec.yaml
中添加依赖:
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
state_notifier: ^1.0.0
hooks_state_notifier: ^0.1.0
然后运行 flutter pub get
来安装依赖。
基本用法
1. 创建 StateNotifier
首先,你需要创建一个继承自 StateNotifier
的类来管理你的状态。
import 'package:state_notifier/state_notifier.dart';
class CounterStateNotifier extends StateNotifier<int> {
CounterStateNotifier() : super(0);
void increment() {
state++;
}
void decrement() {
state--;
}
}
2. 使用 hooks_state_notifier
在组件中使用状态
在 Flutter 组件中,你可以使用 useStateNotifier
钩子来访问和监听 StateNotifier
的状态。
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_state_notifier/hooks_state_notifier.dart';
class CounterPage extends HookWidget {
[@override](/user/override)
Widget build(BuildContext context) {
final counterNotifier = useStateNotifier(() => CounterStateNotifier());
final counter = useValueListenable(counterNotifier);
return Scaffold(
appBar: AppBar(
title: Text('Counter Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Counter:',
),
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: counterNotifier.value.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
),
SizedBox(height: 10),
FloatingActionButton(
onPressed: counterNotifier.value.decrement,
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
),
);
}
}