Flutter状态管理插件very_simple_state_manager的使用

very_simple_state_manager是一个简单易用的状态管理插件，它结合了Flutter核心组件、BLoC架构、ChangeNotifier的简洁性和Riverpod的状态感知能力。本文将详细介绍如何使用这个插件，并提供完整的示例代码。

🔍 工作原理

• 简单：易于理解和实现。
• 响应式：UI会随着状态的变化自动更新。
• 干净：逻辑与UI分离，便于代码组织。
• 无依赖：仅依赖于Flutter内置的ValueNotifier和ValueListenableBuilder。

🚀 开始使用

首先，在您的Flutter项目中添加该插件：

flutter pub add very_simple_state_manager

📖 使用方法

1. 创建状态管理器

创建一个简单的计数器管理器：

class CounterManager extends StateManager<int> {
  CounterManager() : super(0);

  void increment() {
    state = state + 1;
  }
}

2. 在UI中使用

Option 1: StateBuilder

这是最简单的方式，用于响应状态变化：

class CounterWidget extends StatefulWidget {
  [@override](/user/override)
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  late final CounterManager _counter;

  [@override](/user/override)
  void initState() {
    super.initState();
    _counter = CounterManager();
  }

  [@override](/user/override)
  void dispose() {
    _counter.dispose(); // 不要忘记释放状态管理器
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: StateBuilder(
        stateManager: _counter,
        builder: (context, count) => Center(
          child: Text('Count: $count'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Option 2: ManagedWidget

这是一个替代StatelessWidget的选择，自动在状态变化时重建：

class CounterWidget extends ManagedWidget<CounterManager, int> {
  [@override](/user/override)
  CounterManager createStateManager() => CounterManager();

  [@override](/user/override)
  Widget build(BuildContext context, int state) { 
    return Scaffold(
      body: Center(
        child: Text('Count: $state'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: stateManager.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Option 3: ManagedStatefulWidget

当您需要StatefulWidget的功能并自动在状态变化时重建时：

class CounterWidget extends ManagedStatefulWidget<CounterManager, int> {
  const CounterWidget({super.key});

  [@override](/user/override)
  CounterManager createStateManager() => CounterManager();

  [@override](/user/override)
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends ManagedState<CounterManager, int, CounterWidget> {
  void _handleIncrement() {
    stateManager.increment(); 
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Count: $state'), 
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _handleIncrement,
        child: Icon(Icons.add),
      ),
    );
  }
}

Option 4: SelectedStateBuilder

当您只需要基于状态的一部分进行重建时：

class ComplexCounterManager extends StateManager<CounterState> {
  ComplexCounterManager() : super(CounterState(count: 0, lastUpdated: DateTime.now()));

  void increment() {
    state = CounterState(count: state.count + 1, lastUpdated: DateTime.now());
  }
}

class CounterWidget extends StatelessWidget {
  final ComplexCounterManager _counter = ComplexCounterManager();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SelectedStateBuilder(
            stateManager: _counter,
            selector: (state) => state.count,
            builder: (context, count) => Text('Count: $count'),
          ),
          SelectedStateBuilder(
            stateManager: _counter,
            selector: (state) => state.lastUpdated,
            builder: (context, lastUpdated) => Text('Last Updated: $lastUpdated'),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

💪 简单却强大

处理复杂的状态管理也可以保持代码的整洁和可维护性：

class UserManager extends StateManager<UserState> {
  UserManager(this._repository) : super(InitialUserState());

  final UserRepository _repository;

  Future<void> loadUser(String id) async {
    state = LoadingUserState();

    try {
      final user = await _repository.getUserById(id);
      state = LoadedUserState(user);
    } on Exception catch (e) {
      state = ErrorUserState(e);
    }
  }

  void updateName(String newName) {
    state = LoadedUserState(state.user.copyWith(name: newName));
  }
}

实际示例Demo

下面是一个完整的示例应用，演示如何在实际项目中使用very_simple_state_manager：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Very Simple State Manager Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Please run one of the example main files:\n\n'
          '- state_builder_main.dart\n'
          '- selected_state_builder_main.dart\n'
          '- managed_widget_main.dart\n'
          '- managed_stateful_widget_main.dart',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 16),
        ),
      ),
    );
  }
}

// 示例中的CounterWidget可以替换为上述任意一种方式
class CounterWidget extends ManagedWidget<CounterManager, int> {
  [@override](/user/override)
  CounterManager createStateManager() => CounterManager();

  [@override](/user/override)
  Widget build(BuildContext context, int state) { 
    return Scaffold(
      appBar: AppBar(title: Text('Counter Example')),
      body: Center(
        child: Text('Count: $state'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: stateManager.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}