Flutter桥梁状态管理插件bridgestate的使用

Flutter桥梁状态管理插件bridgestate的使用

功能

开始使用

使用

使用示例

BridgeState()

完整示例代码

import 'package:bridgestate/bridges.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 在应用的根部使用 BridgeBase
    return BridgeBase(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化计数器为0
  final int _counter = 0;

  void _incrementCounter() {
    // 获取当前的 BridgeState 对象，并不监听变化
    BridgeState b = bridge(context, listen: false);
    // 读取变量 'Var' 的值，如果没有则默认为0
    int val = b.read('Var', 0).slice;
    // 更新变量 'Var' 的值，增加1
    b.load('Var', val + 1, int);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取当前的 BridgeState 对象，监听变化
    BridgeState b = bridge(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('你已经按下了按钮次数：'),
            // 显示变量 'Var' 的值
            Text(
              '${b.read('Var', 0).slice}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.home),
      ),
    );
  }
}

更多关于Flutter桥梁状态管理插件bridgestate的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


BridgeState 是一个用于 Flutter 应用的状态管理插件，它旨在简化跨组件和跨页面的状态共享与管理。BridgeState 提供了一种简单的方式来在应用的不同部分之间共享和同步状态，而不需要复杂的依赖注入或全局状态管理解决方案。

基本概念

  • Bridge: Bridge 是一个状态容器，用于存储和共享数据。你可以在应用的不同部分访问和修改同一个 Bridge 实例。
  • BridgeProvider: BridgeProvider 是一个 InheritedWidget，它允许你将 Bridge 传递到 widget 树中，从而使得子 widget 可以访问和监听 Bridge 中的状态。
  • BridgeBuilder: BridgeBuilder 是一个 widget，它允许你监听 Bridge 的变化，并在状态更新时重新构建 widget。

使用步骤

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 bridgestate 依赖：

dependencies:
  flutter:
    sdk: flutter
  bridgestate: ^0.1.0 # 请使用最新版本

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

2. 创建 Bridge

你可以通过继承 Bridge 类来创建自定义的状态容器：

import 'package:bridgestate/bridgestate.dart';

class CounterBridge extends Bridge {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知监听器状态已更新
  }
}

3. 使用 BridgeProvider 提供 Bridge

在应用的顶层或某个 widget 树中，使用 BridgeProvider 来提供 Bridge 实例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BridgeProvider(
      bridge: CounterBridge(), // 提供自定义的 CounterBridge
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

4. 使用 BridgeBuilder 监听状态

在需要使用状态的 widget 中，使用 BridgeBuilder 来监听和更新 UI：

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BridgeState Example'),
      ),
      body: Center(
        child: BridgeBuilder<CounterBridge>(
          builder: (context, bridge) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Count: ${bridge.count}'),
                ElevatedButton(
                  onPressed: bridge.increment,
                  child: Text('Increment'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

详细解释

  • BridgeProvider: 将 CounterBridge 实例提供到 widget 树中。子 widget 可以通过 BridgeProvider.of<CounterBridge>(context) 或 BridgeBuilder 来访问和监听 CounterBridge。
  • BridgeBuilder: 监听 CounterBridge 的状态变化，并在状态更新时自动重新构建 UI。

进阶用法

多个 Bridge 实例

你可以在应用中使用多个 BridgeProvider 来提供不同的 Bridge 实例：

BridgeProvider(
  bridge: CounterBridge(),
  child: BridgeProvider(
    bridge: AnotherBridge(),
    child: MyApp(),
  ),
);

手动访问 Bridge

在某些情况下，你可能需要手动访问 Bridge 实例：

CounterBridge counterBridge = BridgeProvider.of<CounterBridge>(context);
counterBridge.increment();
回到顶部