Flutter状态管理插件flutter_package_state_manager的使用
Flutter状态管理插件flutter_package_state_manager的使用
特性
- 管理简单和复杂的状态类型。
- 支持同步和异步状态更新。
- 观察并响应状态变化。
示例
final manager = StateManager();
// 创建状态
manager.createState<int>('counter', 0);
// 更新状态
manager.updateState<int>('counter', 1);
// 重置状态
manager.resetState<int>('counter', 0);
// 观察状态变化
manager.observeState('counter', () {
print("Counter updated: ${manager.getState<int>('counter')}");
});
完整示例Demo
以下是一个完整的示例代码，展示了如何使用flutter_package_state_manager来管理一个简单的列表的状态。
import 'package:flutter/material.dart';
import 'package:flutter_package_state_manager/flutter_package_state_manager.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: '状态管理插件示例',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const StateManagementScreen(),
);
}
}
class StateManagementScreen extends StatefulWidget {
const StateManagementScreen({Key? key}) : super(key: key);
[@override](/user/override)
_StateManagementScreenState createState() => _StateManagementScreenState();
}
class _StateManagementScreenState extends State<StateManagementScreen> {
final stateManager = StateManager();
final TextEditingController _controller = TextEditingController();
[@override](/user/override)
void initState() {
super.initState();
stateManager.createState<List<String>>('itemList', []);
stateManager.observeState('itemList', () {
setState(() {});
});
}
// 添加
void _addItem() {
final newItem = _controller.text;
if (newItem.isNotEmpty) {
final currentList = stateManager.getState<List<String>>('itemList');
currentList.add(newItem); // 添加项目到列表
stateManager.updateState<List<String>>('itemList', currentList); // 更新状态
_controller.clear();
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Item Added')));
} else {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('请输入项目')));
}
}
// 更新
void _updateItem(int index, String newItem) {
final currentList = stateManager.getState<List<String>>('itemList');
currentList[index] = newItem;
stateManager.updateState<List<String>>('itemList', currentList);
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('项目已更新')));
}
// 删除
void _removeItem(int index) {
final currentList = stateManager.getState<List<String>>('itemList');
currentList.removeAt(index);
stateManager.updateState<List<String>>('itemList', currentList);
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('项目已删除')));
}
// 重置
void _resetList() {
stateManager.updateState<List<String>>('itemList', []);
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('列表已重置')));
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('状态管理样例 CRUD'),
backgroundColor: const Color(0xFF5E5E5E),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 20),
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: '输入项目',
labelStyle: TextStyle(color: const Color(0xFF5E5E5E)),
filled: true,
fillColor: const Color.fromARGB(255, 255, 255, 255),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: const Color(0xFF919191)),
),
),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: _addItem,
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF5E5E5E),
padding: const EdgeInsets.symmetric(vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
),
child: const Text(
'添加项目',
style: TextStyle(color: Colors.white),
),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: _resetList,
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFC6C6C6),
padding: const EdgeInsets.symmetric(vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
),
child: const Text(
'重置列表',
style: TextStyle(color: Color(0xFF303030)),
),
),
const SizedBox(height: 20),
Expanded(
child: StreamBuilder<List<String>>(
stream: Stream.periodic(const Duration(milliseconds: 100), (_) {
return stateManager.getState<List<String>>('itemList');
}),
initialData: [],
builder: (context, snapshot) {
final itemList = snapshot.data ?? [];
return ListView.builder(
itemCount: itemList.length,
itemBuilder: (context, index) {
return Card(
margin: const EdgeInsets.symmetric(vertical: 8),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: ListTile(
title: Text(
itemList[index],
style: TextStyle(color: const Color(0xFF303030)),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.edit),
color: const Color(0xFF5E5E5E),
onPressed: () {
_controller.text = itemList[index];
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('编辑项目'),
content: TextField(
controller: _controller,
decoration: const InputDecoration(
labelText: '编辑项目',
),
),
actions: [
TextButton(
onPressed: () {
_updateItem(index, _controller.text);
Navigator.of(context).pop();
},
child: const Text('保存'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('取消'),
),
],
);
},
);
},
),
IconButton(
icon: const Icon(Icons.delete),
color: const Color(0xFF303030),
onPressed: () => _removeItem(index),
),
],
),
),
);
},
);
},
),
),
],
),
),
);
}
}
更多关于Flutter状态管理插件flutter_package_state_manager的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter状态管理插件flutter_package_state_manager的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_package_state_manager 并不是 Flutter 官方或广泛认可的第三方状态管理插件。可能你指的是某个特定的包，或者是一个自定义的包。在 Flutter 中，有许多流行的状态管理解决方案，如 Provider, Riverpod, Bloc, GetX, MobX, Redux 等。
如果你有特定的 flutter_package_state_manager 包的使用需求，建议查看其官方文档或源代码以获取详细的使用方法。以下是一个假设的 flutter_package_state_manager 的使用示例，假设它的用法类似于 Provider 或 GetX。
假设的 flutter_package_state_manager 使用示例
-
添加依赖: 在
pubspec.yaml文件中添加依赖：dependencies: flutter_package_state_manager: ^1.0.0 -
创建状态管理类: 假设这个包使用类似于
Provider的方式，你可以创建一个状态管理类：import 'package:flutter_package_state_manager/flutter_package_state_manager.dart'; class CounterManager extends StateManager { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } } -
在应用中提供状态: 在你的应用顶层提供这个状态管理类：
import 'package:flutter/material.dart'; import 'package:flutter_package_state_manager/flutter_package_state_manager.dart'; import 'counter_manager.dart'; void main() { runApp( StateManagerProvider( manager: CounterManager(), child: MyApp(), ), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter State Manager', home: HomeScreen(), ); } } -
在子组件中使用状态: 在需要使用状态的组件中，获取状态并更新 UI：
import 'package:flutter/material.dart'; import 'package:flutter_package_state_manager/flutter_package_state_manager.dart'; import 'counter_manager.dart'; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { final counterManager = StateManagerProvider.of<CounterManager>(context); return Scaffold( appBar: AppBar( title: Text('Counter App'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Count: ${counterManager.count}', style: TextStyle(fontSize: 24), ), SizedBox(height: 20), ElevatedButton( onPressed: () { counterManager.increment(); }, child: Text('Increment'), ), ], ), ), ); } }
