Flutter上下文增强插件context_plus的使用

简介

context_plus 是一个将 context_ref 和 context_watch 结合在一起的Flutter插件，旨在简化状态管理和响应式编程。它允许开发者更方便地管理上下文和监听变化。访问 context-plus.sonerik.dev 获取更多信息和交互示例。

安装

1. 添加依赖

   在 pubspec.yaml 文件中添加 context_plus 依赖：

   dependencies:
     context_plus: ^latest_version
   

   或者使用命令行工具：

   flutter pub add context_plus
   

2. 包裹应用根节点

   使用 ContextPlus.root 包裹你的应用程序根节点：

   void main() {
     runApp(
       ContextPlus.root(
         child: MaterialApp(
           home: MyHomePage(),
         ),
       ),
     );
   }
   

3. 可选配置

   • 设置错误处理程序以获取更好的热重载相关错误信息：

     void main() {
       ErrorWidget.builder = ContextPlus.errorWidgetBuilder(ErrorWidget.builder);
       FlutterError.onError = ContextPlus.onError(FlutterError.onError);
       runApp(MyApp());
     }
     

   • 移除 context_ref 和 context_watch（如果你已经在使用它们）：

     # Remove these from pubspec.yaml if you have them
     # context_ref: ^version
     # context_watch: ^version
     

功能特性

Ref<T>

Ref<T> 是一个绑定到上下文的值引用，提供了 .bind()、.bindLazy()、.bindValue() 和 .of() 方法来创建和获取绑定值。

.bind()

final _counter = Ref<int>();

_counter.bind(context, () => 0); // 创建并绑定一个初始值为0的计数器

.bindLazy()

final _lazyCounter = Ref<int>();

_lazyCounter.bindLazy(context, () => 0); // 懒加载计数器

.bindValue()

final _fixedValue = Ref<String>();

_fixedValue.bindValue(context, "Hello, World!"); // 绑定一个固定值

.of()

final value = _counter.of(context); // 获取绑定的值

观察者模式

context_plus 支持多种类型的观察者模式，如 Listenable、ValueListenable、Future、Stream 等，并提供了 .watch()、.watchOnly() 和 .watchEffect() 方法来进行监听。

.watch()

final counter = ValueNotifier<int>(0);

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '${counter.watch(context)}', // 监听并显示计数器值
      style: TextStyle(fontSize: 24),
    );
  }
}

.watchOnly()

final user = ValueNotifier<User>(User());

class UserAgeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '${user.watchOnly(context, (u) => u.age)}', // 只监听用户年龄的变化
      style: TextStyle(fontSize: 24),
    );
  }
}

.watchEffect()

final stream = StreamController<int>();

class StreamEffectWidget extends StatefulWidget {
  @override
  _StreamEffectWidgetState createState() => _StreamEffectWidgetState();
}

class _StreamEffectWidgetState extends State<StreamEffectWidget> {
  final key = Object();

  @override
  void initState() {
    super.initState();
    stream.stream.watchEffect(context,
      effect: (snapshot) {
        if (snapshot.hasData) {
          print('Stream data: ${snapshot.data}');
        }
      },
      key: key,
      immediate: true,
    );
  }

  @override
  void dispose() {
    stream.close();
    stream.unwatchEffect(context, key: key);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

示例代码

以下是一个完整的示例，展示了如何使用 context_plus 来构建一个简单的计数器应用：

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

void main() {
  ErrorWidget.builder = ContextPlus.errorWidgetBuilder(ErrorWidget.builder);
  FlutterError.onError = ContextPlus.onError(FlutterError.onError);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ContextPlus.root(
      child: MaterialApp(
        title: 'Context Plus Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _counter = Ref<int>();
    _counter.bind(context, () => 0);

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

通过这个示例，你可以看到如何使用 context_plus 来创建和管理状态，以及如何在UI中响应这些状态的变化。希望这能帮助你更好地理解和使用 context_plus 插件！