Flutter全局状态管理插件globalstore的使用

Flutter全局状态管理插件globalstore的使用

在Flutter中,globalstore 是一个用于全局状态管理的简单且轻量级的插件。它允许你在应用的不同部分共享和更新状态,而无需通过复杂的上下文传递或使用其他状态管理库。

Methods

context.initState("key", "value"); // 初始化状态
context.get("key"); // 从状态中获取值 !! 如果未初始化则返回 null !!
context.update("key", "new value"); // 更新状态
context.subscribe("key", callback); // 订阅到存储 !! 每次键的值发生变化时调用回调函数 !!

示例

以下是一个完整的示例,展示了如何使用 globalstore 插件来管理全局状态。

1. 初始化项目

首先,确保你已经在 pubspec.yaml 文件中添加了 globalstore 依赖:

dependencies:
  globalstore: ^1.0.0

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

2. 创建一个简单的计数器应用

我们将创建一个简单的计数器应用,展示如何使用 globalstore 管理全局状态。

主文件 main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example(),
    );
  }
}

计数器页面 example.dart

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

// 定义一个状态管理类
class Example extends StatefulWidget {
  const Example({super.key});

  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  int _counter = 0;
  Function unsubscribe = () {};

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 初始化状态
    context.initState("counter", 0);

    // 获取初始状态
    _counter = context.get("counter");

    // 订阅状态变化
    unsubscribe = context.subscribe("counter", () {
      setState(() {
        _counter = context.get("counter");
      });
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    // 取消订阅
    unsubscribe();
  }

  // 增加计数器
  void incrementCounter() {
    context.update("counter", _counter + 1);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GlobalStore 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '当前计数:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 40),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: incrementCounter,
              child: Text('增加计数'),
            )
          ],
        ),
      ),
    );
  }
}
1 回复

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


globalstore 是一个轻量级的全局状态管理插件,适用于 Flutter 应用。它允许你在应用的任何地方轻松地访问和更新全局状态。以下是如何使用 globalstore 的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 globalstore 依赖:

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

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

2. 初始化全局状态

在你的 Flutter 应用的入口文件(通常是 main.dart)中,初始化全局状态:

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

void main() {
  // 初始化全局状态
  GlobalStore().init();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. 设置全局状态

你可以在任何地方设置全局状态。例如,在 MyHomePage 中设置一个全局状态:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 设置全局状态
    GlobalStore().set('counter', 0);

    return Scaffold(
      appBar: AppBar(
        title: Text('GlobalStore Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter:',
            ),
            CounterDisplay(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 更新全局状态
          int counter = GlobalStore().get('counter');
          GlobalStore().set('counter', counter + 1);
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

4. 获取全局状态

你可以在任何地方获取全局状态。例如,在 CounterDisplay 中获取并显示全局状态:

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

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取全局状态
    int counter = GlobalStore().get('counter');

    return Text(
      '$counter',
      style: Theme.of(context).textTheme.headline4,
    );
  }
}

5. 监听全局状态变化

globalstore 还支持监听全局状态的变化。你可以使用 GlobalStore().listen 方法来监听状态的变化:

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

class CounterDisplay extends StatefulWidget {
  @override
  _CounterDisplayState createState() => _CounterDisplayState();
}

class _CounterDisplayState extends State<CounterDisplay> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 监听全局状态变化
    GlobalStore().listen('counter', (value) {
      setState(() {
        _counter = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_counter',
      style: Theme.of(context).textTheme.headline4,
    );
  }
}

6. 移除监听器

如果你不再需要监听某个状态的变化,可以使用 GlobalStore().unlisten 方法来移除监听器:

@override
void dispose() {
  // 移除监听器
  GlobalStore().unlisten('counter');
  super.dispose();
}

7. 删除全局状态

如果你不再需要某个全局状态,可以使用 GlobalStore().remove 方法来删除它:

GlobalStore().remove('counter');

8. 清除所有全局状态

如果你想清除所有的全局状态,可以使用 GlobalStore().clear 方法:

GlobalStore().clear();
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!