Flutter全局刷新插件global_refresh的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter全局刷新插件global_refresh的使用

标题

Flutter全局刷新插件global_refresh的使用

内容

基本库，用于刷新应用程序的主要状态。在进行样式或语言更改时非常有用。

使用示例

使用 GRState 而不是 State：

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

  final String title;

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

class _MyHomePageState extends GRState<MyHomePage> { // <-- use GRState
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ..
    );
  }
}

然后刷新主要状态：

GlobalRefresh().refresh();

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends GRState<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，global_refresh 是一个用于 Flutter 的全局刷新插件，它允许开发者在应用的不同页面间共享一个刷新状态。以下是如何在 Flutter 应用中使用 global_refresh 插件的示例代码。

首先，确保你已经在 pubspec.yaml 文件中添加了 global_refresh 依赖：

dependencies:
  flutter:
    sdk: flutter
  global_refresh: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 应用中实现全局刷新功能。以下是一个基本的示例：

主应用文件 (main.dart)

import 'package:flutter/material.dart';
import 'package:global_refresh/global_refresh.dart';
import 'package:your_app/page_one.dart';
import 'package:your_app/page_two.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Global Refresh Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GlobalRefreshProvider(
        create: () => GlobalRefreshController(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalRefreshController _refreshController =
      GlobalRefreshProvider.of(context)!;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Global Refresh Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => PageOne()),
                );
              },
              child: Text('Go to Page One'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => PageTwo()),
                );
              },
              child: Text('Go to Page Two'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _refreshController.refresh();
        },
        tooltip: 'Trigger Global Refresh',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

页面一 (page_one.dart)

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

class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> with GlobalRefreshListener {
  @override
  void initState() {
    super.initState();
    GlobalRefreshProvider.of(context)?.addListener(this);
  }

  @override
  void dispose() {
    GlobalRefreshProvider.of(context)?.removeListener(this);
    super.dispose();
  }

  @override
  void onRefresh() {
    // 处理刷新逻辑
    print('PageOne received global refresh');
    // 刷新完成后调用
    GlobalRefreshProvider.of(context)?.refreshCompleted();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page One'),
      ),
      body: Center(
        child: Text('This is Page One'),
      ),
    );
  }
}

页面二 (page_two.dart)

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

class PageTwo extends StatefulWidget {
  @override
  _PageTwoState createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> with GlobalRefreshListener {
  @override
  void initState() {
    super.initState();
    GlobalRefreshProvider.of(context)?.addListener(this);
  }

  @override
  void dispose() {
    GlobalRefreshProvider.of(context)?.removeListener(this);
    super.dispose();
  }

  @override
  void onRefresh() {
    // 处理刷新逻辑
    print('PageTwo received global refresh');
    // 刷新完成后调用
    GlobalRefreshProvider.of(context)?.refreshCompleted();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Two'),
      ),
      body: Center(
        child: Text('This is Page Two'),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个主页面和两个子页面。主页面包含一个全局刷新按钮，当点击该按钮时，会触发全局刷新事件。两个子页面都实现了 GlobalRefreshListener 接口，并在收到全局刷新事件时执行相应的刷新逻辑。

请根据你的实际需求调整代码，比如添加具体的刷新逻辑（如从服务器获取数据）。

回到顶部