Flutter上下文引用插件context_ref的使用

context_ref简介

context_ref 是一个用于简化Flutter中上下文引用和状态管理的插件。它提供了一种更方便的方式替代 InheritedWidget，使得在Flutter应用中管理和访问状态变得更加简单。

更多高级特性可以参考 context_plus。

主要特性

• Ref<T>：绑定到 context 的类型为 T 的值。
  • .bind(context, () => Value())：创建并绑定值到 context。当 context 被销毁时自动调用 dispose()。
  • .bindLazy(context, () => Value())：与 .bind() 类似，但值仅在首次访问时创建。
  • .bindValue(context, value)：绑定已创建的值到 context。值不会自动销毁。
  • .of(context)：获取绑定到 context 或其最近祖先的值。

入门指南

添加依赖

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

flutter pub add context_ref

初始化应用

确保你的应用被 ContextRef.root 包裹：

void main() {
  runApp(
    ContextRef.root(
      child: MaterialApp(
        home: MyApp(),
      ),
    ),
  );
}

(可选) 错误处理

为了在热重载时获得更好的错误信息，可以包裹默认的错误处理器：

void main() {
  ErrorWidget.builder = ContextRef.errorWidgetBuilder(ErrorWidget.builder);
  FlutterError.onError = ContextRef.onError(FlutterError.onError);
  runApp(
    ContextRef.root(
      child: MaterialApp(
        home: MyApp(),
      ),
    ),
  );
}

使用示例

示例1：初始化并传播值

下面是一个简单的例子，展示如何初始化并在子组件中访问值：

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

final _state = Ref<_State>();

class _State {
  String message = "Hello, World!";
}

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

  @override
  Widget build(BuildContext context) {
    // 创建并绑定状态到当前上下文
    _state.bind(context, () => _State());
    return const _Child();
  }
}

class _Child extends StatelessWidget {
  const _Child();

  @override
  Widget build(BuildContext context) {
    final state = _state.of(context);
    return Center(
      child: Text(state.message),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Context Ref Example')),
        body: const Example(),
      ),
    );
  }
}

示例2：提供已初始化的值

如果你已经有一个值，并希望将其传递给子组件，可以使用 bindValue 方法：

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

final _params = Ref<Params>();

class Params {
  final String paramValue;

  Params(this.paramValue);
}

class Example extends StatelessWidget {
  const Example({
    super.key,
    required this.params,
  });

  final Params params;

  @override
  Widget build(BuildContext context) {
    // 绑定已创建的值到当前上下文
    _params.bindValue(context, params);
    return const _Child();
  }
}

class _Child extends StatelessWidget {
  const _Child();

  @override
  Widget build(BuildContext context) {
    final params = _params.of(context);
    return Center(
      child: Text(params.paramValue),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Context Ref Example')),
        body: const Example(params: Params("Passed Param")),
      ),
    );
  }
}

通过这些示例，你可以看到 context_ref 插件是如何简化状态管理和上下文引用的。希望这对你有所帮助！