Flutter上下文管理插件full_context的使用

Flutter上下文管理插件full_context的使用

特性

  • 可以通过FullContext小部件创建类型提供者；
  • 在FullContext的子组件中可以通过其类型在上下文中操作状态。

入门

添加类型提供者并创建一个类型：

Widget build(BuildContext context) => FullContext(
      onInit: (context) => context.set<int>(1), // 初始化状态值为1
      builder: (context) => YourWidget(), // 构建你的组件
    );

使用

当有FullContext作为直接或间接的父组件，并且所需的类型已启动时：

Widget build(BuildContext context) => InkWell(
      onTap: () => context.emit<int>(context.get<int>() + 1), // 点击事件更新状态值
      child: FCBuilder<int>((context, snapshot) =>
          snapshot.hasData
              ? Text(snapshot.data!) // 如果有数据则显示文本
              : const CircularProgressIndicator(), // 否则显示加载指示器
      ),
    );

除了context.set<S>(state)，context.emit<S>(state) 和 context.get<S>()之外，我们还有以下方法：

  • context.get$<S>() 返回 ValueStream<S>；
  • context.init<S>() 开始类型 S 而不设置初始状态。请注意，context.get<S>() 只能在第一次调用 context.emit<S>(state) 之后使用；
  • context.emitError<S, E>(E error, [StackTracer? stackTracer])；
  • context.close<S>() 关闭 S 流。

其他信息

你好，我是Lucas，这个包的作者。我是巴西人，并希望在未来为这个项目添加工厂，当然，在此之前使现有的东西更加简洁。

未来目标

  • 添加工厂；
  • 创建自动化测试；
  • 创建一个像样的示例。

我的目标是使这个项目类似于ASP.NET CORE的服务，唯一的区别是在手动实例化时使用上下文。

完整示例

为了更好地理解如何使用full_context插件，下面是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FullContext(
        onInit: (context) => context.set<int>(0), // 初始化状态值为0
        builder: (context) => Scaffold(
          appBar: AppBar(title: Text('FullContext Example')),
          body: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FCBuilder<int>(
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(
                  'Count: ${snapshot.data}',
                  style: TextStyle(fontSize: 24),
                );
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => context.emit<int>(context.get<int>() + 1),
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter上下文管理插件full_context的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter上下文管理插件full_context的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


full_context 是一个用于 Flutter 的上下文管理插件，它旨在简化 Flutter 应用中上下文（BuildContext）的管理和使用。通过 full_context，开发者可以更方便地获取和管理上下文，特别是在需要跨组件传递上下文或避免重复传递上下文的场景中。

安装

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

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

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

基本使用

full_context 提供了一个 FullContext 类，它可以帮助你在应用中管理上下文。以下是一些基本的使用方法：

1. 初始化 FullContext

在你的应用启动时，初始化 FullContext。通常，你可以在 main.dart 文件中进行初始化：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化 FullContext
    FullContext.init(context);
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

2. 获取上下文

在应用的任何地方，你都可以通过 FullContext 获取当前的上下文：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FullContext Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 通过 FullContext 获取上下文
            BuildContext context = FullContext.getContext();
            Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

3. 更新上下文

如果你需要在某个组件中更新上下文，可以使用 FullContext.updateContext 方法：

class SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 更新 FullContext 中的上下文
    FullContext.updateContext(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用 FullContext 获取上下文
            BuildContext context = FullContext.getContext();
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}
回到顶部