Flutter依赖注入与状态管理插件beholder_provider的使用

Flutter依赖注入与状态管理插件beholder_provider的使用

在Flutter开发中，依赖注入和状态管理是非常重要的部分。beholder_provider 是一个强大的插件，它结合了依赖注入和状态管理的功能，帮助开发者更高效地构建应用程序。

插件简介

beholder_provider 提供了一种简单的方式来管理应用的状态，并通过依赖注入机制将这些状态注入到需要的地方。它的核心概念包括 ViewModel 和 Provider，通过这些工具可以轻松实现状态管理和组件间的通信。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 beholder_provider 依赖：

dependencies:
  beholder_provider: ^x.x.x

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

2. 创建 ViewModel

ViewModel 是用来管理状态的核心类。以下是一个简单的计数器 ViewModel 的示例：

import 'package:beholder_provider/beholder_provider.dart';

class CounterVm extends ViewModel {
  // 定义一个可观察的状态变量
  late final counter = state(0);
}

在这个例子中，我们创建了一个 CounterVm 类，并通过 state() 方法定义了一个可观察的状态变量 counter，初始值为 0。

3. 使用 Provider 提供 ViewModel

接下来，我们需要在应用中使用 ViewModelProvider 来提供 CounterVm 实例。以下是一个完整的示例代码：

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

// 定义 ViewModel
class CounterVm extends ViewModel {
  late final counter = state(0);
}

// 主应用构建函数
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ViewModelProvider(
        create: (_) => CounterVm(), // 创建 ViewModel 实例
        builder: (context, watch) {
          return CounterPage(watch); // 将 ViewModel 注入到页面
        },
      ),
    );
  }
}

// 计数器页面
class CounterPage extends StatelessWidget {
  final Watcher watcher;

  CounterPage(this.watcher);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示当前计数值
            Text(
              '${watcher(CounterVm().counter)}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            // 增加计数的按钮
            ElevatedButton(
              onPressed: () {
                // 更新计数器状态
                watcher(CounterVm().counter).set((value) => value + 1);
              },
              child: Text('Increase'),
            ),
            // 减少计数的按钮
            ElevatedButton(
              onPressed: () {
                // 更新计数器状态
                watcher(CounterVm().counter).set((value) => value - 1);
              },
              child: Text('Decrease'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


beholder_provider 是一个用于 Flutter 的依赖注入和状态管理插件。它结合了依赖注入和状态管理的功能，使得在 Flutter 应用中管理状态和依赖变得更加简单和高效。以下是如何使用 beholder_provider 的基本指南。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  beholder_provider: ^1.0.0  # 请使用最新版本

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

2. 基本使用

2.1 创建依赖注入容器

beholder_provider 使用 Beholder 类来管理依赖注入。你可以创建一个 Beholder 实例，并在其中注册你的依赖。

import 'package:beholder_provider/beholder_provider.dart';

final beholder = Beholder();

void main() {
  beholder.registerSingleton<MyService>(() => MyService());
  runApp(MyApp());
}

2.2 使用依赖注入

在需要的地方，你可以通过 beholder 获取已注册的依赖。

class MyService {
  void doSomething() {
    print('Doing something...');
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myService = beholder.get<MyService>();
    myService.doSomething();

    return Scaffold(
      appBar: AppBar(
        title: Text('Beholder Provider Example'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

2.3 状态管理

beholder_provider 还提供了状态管理的功能。你可以使用 BeholderProvider 来管理状态。

class CounterState {
  int count = 0;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BeholderProvider<CounterState>(
      create: () => CounterState(),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterState = BeholderProvider.of<CounterState>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Beholder Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counterState.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterState.count++;
          BeholderProvider.notifyListeners<CounterState>(context);
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

3. 高级用法

3.1 依赖注入的生命周期

beholder_provider 支持不同的依赖注入生命周期，如 Singleton、Transient 和 Scoped。

beholder.registerSingleton<MyService>(() => MyService()); // 单例
beholder.registerTransient<MyService>(() => MyService()); // 每次获取都创建一个新实例
beholder.registerScoped<MyService>(() => MyService()); // 在某个作用域内单例

3.2 状态管理的通知

你可以使用 BeholderProvider.notifyListeners 来通知状态变化，并更新 UI。

BeholderProvider.notifyListeners<CounterState>(context);
回到顶部