Flutter共享状态管理插件stacked_shared的使用

概述

stacked_shared 是一个用于在Flutter和纯Dart项目之间共享代码的包。通过这个包，可以避免在不需要的地方引入Flutter框架，从而提高代码的可重用性和模块化。

包的功能

• 该包包含所有在Flutter和纯Dart包之间共享的代码。
• 目的是减少不必要的依赖，提升代码的灵活性和可维护性。

示例代码

以下是一个简单的示例，展示了如何使用 stacked_shared 包来实现基本的状态管理功能。请注意，由于示例代码较为简单，我们将构建一个基本的应用程序框架，并演示如何初始化和使用状态管理。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  stacked_shared: ^x.x.x  # 使用最新版本号替换 x.x.x

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

2. 创建模型和视图模型

接下来，我们创建一个简单的模型和视图模型，以便于管理应用的状态。

// lib/models/counter_model.dart
class CounterModel {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}

// lib/view_models/counter_view_model.dart
import 'package:stacked/stacked.dart';
import 'models/counter_model.dart';

class CounterViewModel extends BaseViewModel {
  final CounterModel _model;

  CounterViewModel(this._model);

  int get count => _model.count;

  void incrementCounter() {
    _model.increment();
    notifyListeners(); // 通知UI更新
  }
}

3. 创建视图

接下来，创建一个简单的Flutter视图来显示和操作计数器。

// lib/views/counter_view.dart
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'view_models/counter_view_model.dart';

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
      viewModelBuilder: () => CounterViewModel(CounterModel()),
      builder: (context, model, child) => Scaffold(
        appBar: AppBar(title: Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Text(
                '${model.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: model.incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

4. 运行应用程序

最后，设置主函数以启动应用程序。

// lib/main.dart
import 'package:flutter/material.dart';
import 'views/counter_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stacked Shared Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterView(),
    );
  }
}

通过上述步骤，您已经成功地使用 stacked_shared 包创建了一个简单的状态管理示例。您可以根据需要扩展此示例，以适应更复杂的应用场景。