• Flutter实现局部刷新的几种方式

    目录

    前言

    1.局部刷新的重要性

    1.概念

    2.重要性

    2.局部刷新实现的几种方式

    1.使用setState方法进行局部刷新

    2.使用StatefulWidget和InheritedWidget局部刷新UI

    3.ValueNotifier和ValueListenableBuilder

    4.StreamBuilder

    5.Provider

    6.GetX

    7.使用GlobalKey

    前言

           在 Flutter 中，状态管理指的是如何管理和更新应用中的数据状态，并且根据状态的变化来更新 UI。有效的状态管理能够帮助开发者创建更高效、更可维护的应用。

            setState是 Flutter 中最基本的状态管理方法，当状态发生变更的时候，会通知框架重新构建UI。当然我们知道当我们调用setState方法的时候，页面会重绘，当页面布局比较复杂的时候，有时候我们仅仅需要更新某个单独的UI，这个时候如果使用setState方法，则会有比较大的性能消耗去重绘当前页面UI.

            那么Flutter中有哪些方法可以局部刷新UI呢，这篇博客列举了Flutter实现局部刷新的几种方式。

    1.局部刷新的重要性

    1.概念

            局部刷新指的是只刷新界面的一部分，而不是整个页面。这样可以提高性能和用户体验。

    2.重要性

    1. 避免不必要的重绘，提高性能
    2. 提供更流畅的用户体验
    3. 减少资源消耗

    2.局部刷新实现的几种方式

    1.通过setState局部刷新

            setState是Flutter 中最常用的状态管理方法，用于通知框架状态发生变化，导致界面重建。

            我们创建Flutter工程的时候，系统默认生成的计时器的例子，就是setState局部刷新的例子。

    1. import 'package:flutter/material.dart';
    2.  
    3. class StatePartialRefreshPage extends StatefulWidget {
    4.   const StatePartialRefreshPage({super.key});
    5.   @override
    6.   State createState() =>
    7.       _StatePartialRefreshPageState();
    8. }
    9.  
    10. class _StatePartialRefreshPageState extends State<StatePartialRefreshPage> {
    11.   int _count = 0;
    12.   @override
    13.   Widget build(BuildContext context) {
    14.     return Scaffold(
    15.       appBar: AppBar(
    16.         title: const Text(
    17.           "setState局部刷新",
    18.           style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
    19.         ),
    20.       ),
    21.       body: Center(
    22.           child: Column(
    23.         mainAxisAlignment: MainAxisAlignment.center,
    24.         children: [
    25.           Text(
    26.             '您点击了$_count次',
    27.             style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
    28.           ),
    29.           const SizedBox(
    30.             height: 20,
    31.           ),
    32.           FilledButton(
    33.               onPressed: () {
    34.                 setState(() {
    35.                   _count++;
    36.                 });
    37.               },
    38.               child: const Icon(Icons.add)),
    39.         ],
    40.       )),
    41.     );
    42.   }
    43. }

            图1.setState局部刷新

             当页面比较简单的时候，可以直接使用setState方法局部刷新UI。

            使用场景：简单的状态变化，如按钮点击计数、开关状态等。

            注意事项：

    1. 频繁调用 setState 可能导致性能问题
    2. 避免在 build 方法中调用 setState 

    2.使用StatefulWidget和InheritedWidget局部刷新UI

            StatefulWidget 是具有状态的组件，InheritedWidget 用于在组件树中共享数据。

            当我们需要共享数据的时候，可以考虑StatefulWidget和InheritedWidget局部刷新UI.

            完整代码如下：

            图2.共享数据的方式刷新UI

    1. import 'package:flutter/material.dart';
    2.  
    3. class MyInheritedWidget extends InheritedWidget {
    4.   final int counter;
    5.   const MyInheritedWidget({
    6.     super.key,
    7.     required this.counter,
    8.     required super.child,
    9.   });
    10.   @override
    11.   bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    12.     return true;
    13.   }
    14.   static MyInheritedWidget? of(BuildContext context) {
    15.     return context.dependOnInheritedWidgetOfExactType();
    16.   }
    17. }
    18.  
    19. class InheritedWidgetPage extends StatefulWidget {
    20.   final String title;
    21.   const InheritedWidgetPage({super.key, required this.title});
    22.  
    23.   @override
    24.   State createState() => _InheritedWidgetPageState();
    25. }
    26.  
    27. class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
    28.   int counter = 0;
    29.   void _incrementCounter() {
    30.     setState(() {
    31.       counter++;
    32.     });
    33.   }
    34.  
    35.   @override
    36.   Widget build(BuildContext context) {
    37.     return MyInheritedWidget(
    38.       counter: counter,
    39.       child: Scaffold(
    40.         appBar: AppBar(
    41.           title: Text(widget.title),
    42.         ),
    43.         body: Center(child: Column(
    44.           children: [
    45.             const Divider(),
    46.             const CounterDisplay(),
    47.             const SizedBox(height: 20),
    48.             ElevatedButton(
    49.               onPressed: _incrementCounter,
    50.               child: const Text('add'),
    51.             ),
    52.           ],
    53.         ),),
    54.       ),
    55.     );
    56.   }
    57. }
    58.  
    59. class CounterDisplay extends StatelessWidget {
    60.   const CounterDisplay({super.key});
    61.   @override
    62.   Widget build(BuildContext context) {
    63.     final inheritedWidget = MyInheritedWidget.of(context);
    64.     return Text('点击次数: ${inheritedWidget?.counter}');
    65.   }
    66. }

            这种方式主要使用场景如下：组件树中共享状态时，如主题、语言设置等。

            优点就是数据共享方便,代码简介

            缺点就是使用复杂，性能可能收到影响

    3.ValueNotifier和ValueListenableBuilder

            ValueNotifier 是一个简单的状态管理工具，ValueListenableBuilder 用于监听 ValueNotifier 的变化。

            使用方法也非常简单：

            1.实例化ValueNotifier

            2.要监听的Widget对象是用ValueListenableBuilder包裹起来

            3.事件触发数据的变更方法

            这种方式和前几种方式比较非常的简单易容，性能也很高

            缺点：只能处理简单的状态变化

            完整的代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class ValueNotifierPage extends StatefulWidget {
    4.   final String title;
    5.   const ValueNotifierPage({super.key, required this.title});
    6.  
    7.   @override
    8.   State createState() => _ValueNotifierPageState();
    9. }
    10.  
    11. class _ValueNotifierPageState extends State<ValueNotifierPage> {
    12.  
    13.   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
    14.  
    15.   @override
    16.   Widget build(BuildContext context) {
    17.     return Scaffold(
    18.         appBar: AppBar(
    19.           title: Text(widget.title),
    20.         ),
    21.         body: Center(
    22.           child: ValueListenableBuilder<int>(
    23.             valueListenable: _counter,
    24.             builder: (context, value, child) {
    25.               return Text(
    26.                 '您点击了$value次',
    27.                 style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
    28.               );
    29.             },
    30.           )
    31.         ),
    32.         floatingActionButton: FloatingActionButton(
    33.           child: const Icon(Icons.add),
    34.           onPressed: () {
    35.             _counter.value ++;
    36.           },
    37.         )
    38.     );
    39.   }
    40. }

    4.StreamBuilder

            Stream是一种用于传递异步事件的对象，可以通过StreamController发送事件。在需要刷新UI的地方，可以发送一个事件到Stream，然后使用StreamBuilder监听该Stream，当收到新的事件时，StreamBuilder会自动重新构建UI。这种方式适用于需要监听多个异步事件的情况。

            当我们需要处理异步数据流，如网络请求、实时数据等的时候，可以考虑使用StreamBuilder。例如在下面的例子中，我们写了一个模拟网络请求的异步方法，当网络请求没返回正确结果的时候，我们可以加载进度条。

            这种方式的优点就是可以对异步请求进行更加精准的控制，例如网络请求的状态等。却迪奥就是复杂度比较高，可能需要更多的代码。        

            完整的代码如下：

    1. import 'dart:async';
    2. import 'package:flutter/material.dart';
    3.  
    4. class StreamBuilderRefreshUIPage extends StatefulWidget {
    5.   final String title;
    6.   const StreamBuilderRefreshUIPage({super.key, required this.title});
    7.  
    8.   @override
    9.   State createState() =>
    10.       _StreamBuilderRefreshUIPageState();
    11. }
    12.  
    13. class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
    14.   late Future<String> _data;
    15.  
    16.   Future<String> fetchData() async {
    17.     // 模拟网络请求延迟
    18.     await Future.delayed(const Duration(seconds: 2));
    19.     // 返回模拟数据
    20.     return 'Hello, Flutter!';
    21.   }
    22.  
    23.   @override
    24.   void initState() {
    25.     // TODO: implement initState
    26.     super.initState();
    27.     _data = fetchData();
    28.   }
    29.  
    30.   @override
    31.   Widget build(BuildContext context) {
    32.     return Scaffold(
    33.       appBar: AppBar(
    34.         title: Text(widget.title),
    35.       ),
    36.       body: Center(
    37.         child: FutureBuilder<String>(
    38.           future: _data,
    39.           builder: (context, snapshot) {
    40.             if (snapshot.connectionState == ConnectionState.waiting) {
    41.               return const CircularProgressIndicator();
    42.             } else if (snapshot.hasError) {
    43.               return Text('Error: ${snapshot.error}');
    44.             } else {
    45.               return Text('Data: ${snapshot.data}');
    46.             }
    47.           },
    48.         ),
    49.       ),
    50.       floatingActionButton: FloatingActionButton(
    51.         onPressed: fetchData,
    52.         tooltip: 'Increment',
    53.         child: const Icon(Icons.add),
    54.       ),
    55.     );
    56.   }
    57. }

    5.Provider

           Provider 是 Flutter 推荐的状态管理解决方案，Consumer 用于读取和监听状态。

            我们还以定时器为例。

            1.首先我们导入Provider.

    provider: ^6.1.2

            2.自定义ChangeNotifier类。

            ChangeNotifier 是 Flutter SDK 中的一个简单的类。它用于向监听器发送通知。换言之，如果被定义为 ChangeNotifier，你可以订阅它的状态变化。（这和大家所熟悉的观察者模式相类似）。

            在我们要实现的代码中，有两个变量_counter1和_counter2.代码定义如下：

    1. class CounterModel extends ChangeNotifier {
    2.   int _counter1 = 0;
    3.   int _counter2 = 0;
    4.   void addCounter1(){
    5.     debugPrint('counter:$_counter1');
    6.     _counter1 += 1;
    7.     notifyListeners();
    8.   }
    9.   void addCounter2(){
    10.     debugPrint('counter:$_counter2');
    11.     _counter2 += 1;
    12.     notifyListeners();
    13.   }
    14. }

            3.使用Customer把我们要刷新的Widget包裹起来

    1.             Consumer(
    2.               builder: (context, counterModel, child) {
    3.                 return Row(
    4.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    5.                   children: [
    6.                     Text('计数器1个数: ${counterModel._counter1}'),
    7.                     ElevatedButton(onPressed: (){
    8.                       counterModel.addCounter1();
    9.                     }, child: const Icon(Icons.add),),
    10.                   ],
    11.                 );
    12.               },
    13.             ),

            4.完整代码如下：

    1. import 'package:flutter/material.dart';
    2. import 'package:provider/provider.dart';
    3.  
    4. class ProviderRefreshPage extends StatefulWidget {
    5.   final String title;
    6.   const ProviderRefreshPage({super.key, required this.title});
    7.  
    8.   @override
    9.   State createState() => _ProviderRefreshPageState();
    10. }
    11.  
    12. class CounterModel extends ChangeNotifier {
    13.   int _counter1 = 0;
    14.   int _counter2 = 0;
    15.   void addCounter1(){
    16.     debugPrint('counter:$_counter1');
    17.     _counter1 += 1;
    18.     notifyListeners();
    19.   }
    20.   void addCounter2(){
    21.     debugPrint('counter:$_counter2');
    22.     _counter2 += 1;
    23.     notifyListeners();
    24.   }
    25. }
    26.  
    27. class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
    28.  
    29.   @override
    30.   Widget build(BuildContext context) {
    31.     return Scaffold(
    32.       appBar: AppBar(
    33.         title: Text(widget.title),
    34.       ),
    35.       body: Center(
    36.         child: Column(
    37.           mainAxisAlignment: MainAxisAlignment.start,
    38.           children: [
    39.             const SizedBox(height: 10,), // 添加一些间距
    40.             const Divider(),
    41.             const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
    42.             Consumer(
    43.               builder: (context, counterModel, child) {
    44.                 return Row(
    45.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    46.                   children: [
    47.                     Text('计数器1个数: ${counterModel._counter1}'),
    48.                     ElevatedButton(onPressed: (){
    49.                       counterModel.addCounter1();
    50.                     }, child: const Icon(Icons.add),),
    51.                   ],
    52.                 );
    53.               },
    54.             ),
    55.  
    56.             Consumer(
    57.               builder: (context, counterModel, child) {
    58.                 return Row(
    59.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    60.                   children: [
    61.                     Text('计数器1个数: ${counterModel._counter2}'),
    62.                     ElevatedButton(onPressed: (){
    63.                       counterModel.addCounter2();
    64.                     }, child: const Icon(Icons.add),),
    65.                   ],
    66.                 );
    67.               },
    68.             ),
    69.             const Divider(height: 20,),
    70.           ],
    71.         ),
    72.       ),
    73.     );
    74.   }
    75. }

    6.GetX

            我们还可以使用GetX实现UI的局部刷新。

            首先安装GetX:

    get: ^4.6.6

            然后我们把变量封装在GetxController中.

    1. class CounterManagerController extends GetxController {
    2.   final counter1 = 0.obs;
    3.   final counter2 = 0.obs;
    4.   void incrementCount1() {
    5.     counter1.value++;
    6.   }
    7.   void incrementCount2() {
    8.     counter2.value++;
    9.   }
    10. }

            再使用Obx把需要显示逻辑的Widget包裹起来。

    Obx(()=> Text('计数器1个数: ${controller.counter2.value}'))

            完整的代码如下：

    1. import 'package:flutter/material.dart';
    2. import 'package:get/get.dart';
    3.  
    4.  
    5. class CounterManagerController extends GetxController {
    6.   final counter1 = 0.obs;
    7.   final counter2 = 0.obs;
    8.   void incrementCount1() {
    9.     counter1.value++;
    10.   }
    11.   void incrementCount2() {
    12.     counter2.value++;
    13.   }
    14. }
    15.  
    16. class GetXRefreshUIPage extends StatelessWidget {
    17.   final String title;
    18.   const GetXRefreshUIPage({super.key, required this.title});
    19.  
    20.   @override
    21.   Widget build(BuildContext context) {
    22.     final CounterManagerController controller = Get.put(CounterManagerController());
    23.     return Scaffold(
    24.       appBar: AppBar(
    25.         title: Text(title),
    26.       ),
    27.       body: Center(
    28.         child: Column(
    29.           mainAxisAlignment: MainAxisAlignment.start,
    30.           children: [
    31.             const SizedBox(
    32.               height: 10,
    33.             ), // 添加一些间距
    34.             const Divider(),
    35.             const Text(
    36.               '计数器实例',
    37.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
    38.             ),
    39.             Row(
    40.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    41.               children: [
    42.                 Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
    43.                 ElevatedButton(
    44.                   onPressed: () {
    45.                     controller.incrementCount1();
    46.                   },
    47.                   child: const Icon(Icons.add),
    48.                 ),
    49.               ],
    50.             ),
    51.             Row(
    52.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    53.               children: [
    54.                 Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
    55.                 ElevatedButton(
    56.                   onPressed: () {
    57.                     controller.incrementCount2();
    58.                   },
    59.                   child: const Icon(Icons.add),
    60.                 ),
    61.               ],
    62.             ),
    63.             const Divider(
    64.               height: 20,
    65.             ),
    66.           ],
    67.         ),
    68.       ),
    69.     );
    70.   }
    71. }

            当然GetX中实现局部刷新的方式还有其它几种写法，大家可以看一下它的文档。这里只是提供了其中的一种实现思路。

    7.通过GlobalKey局部刷新

            上述三种实现方式都是通过框架实现的，如果你不想导入这个框架，我们可以使用GlobalKey来实现UI的局部刷新功能。

            在整个应用程序中是唯一的Key GlobalKey可以唯一标识元素，GlobalKey提供了对这些元素相关联的访问，比如BuildContext。对于StatefulWidgets，GlobalKey也提供对State的访问。

           在我们的计时器的demo中，如果我们通过GlobalKey的方式局部刷新UI,首先我们把要局部刷新的Widget提出来，单独封装成一个组件。

            完整代码如下，我们封装要局部刷新的Widget,并且提供一个刷新内部数据的接口，onPressed.

    1. class CounterText extends StatefulWidget {
    2.   const CounterText(Key key) : super(key: key);
    3.   @override
    4.   State createState() {
    5.     return CounterTextState();
    6.   }
    7. }
    8.  
    9. class CounterTextState extends State<CounterText> {
    10.   String _text="0";
    11.  
    12.   @override
    13.   Widget build(BuildContext context) {
    14.     return Center(
    15.       child: Text(_text,style: const TextStyle(fontSize: 20),),
    16.     );
    17.   }
    18.   void onPressed(int count) {
    19.     setState(() {
    20.       _text = count.toString();
    21.     });
    22.   }
    23. }

            然后在我们的主界面实例化GlobaKey:

    1.   int _count   = 0;
    2.   int _count2  = 0;
    3.   GlobalKey textKey = GlobalKey();
    4.   GlobalKey textKey2 = GlobalKey();

                在需要刷新UI的事件中，通过GlobalKey调用上一步提供的接口，刷新即可。

            完整代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class GlobalKeyRefreshPage extends StatefulWidget {
    4.   final String title;
    5.   const GlobalKeyRefreshPage({super.key, required this.title});
    6.  
    7.   @override
    8.   State createState() => _GlobalKeyRefreshPageState();
    9. }
    10.  
    11. class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
    12.   int _count   = 0;
    13.   int _count2  = 0;
    14. //包裹你定义的需要更新的weight
    15.   GlobalKey textKey = GlobalKey();
    16.   GlobalKey textKey2 = GlobalKey();
    17.  
    18.   @override
    19.   Widget build(BuildContext context) {
    20.     return Scaffold(
    21.       appBar: AppBar(
    22.         title:  Text(widget.title),
    23.       ),
    24.       body: Center(
    25.         child: Column(
    26.           mainAxisAlignment: MainAxisAlignment.start,
    27.           children: [
    28.             const SizedBox(
    29.               height: 10,
    30.             ), // 添加一些间距
    31.             const Divider(),
    32.             const Text(
    33.               '计数器实例',
    34.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
    35.             ),
    36.             Row(
    37.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    38.               children: [
    39.                 CounterText(textKey),
    40.                 ElevatedButton(
    41.                   onPressed: () {
    42.                     _count++;
    43.                     textKey.currentState?.onPressed(_count);
    44.                   },
    45.                   child: const Icon(Icons.add),
    46.                 ),
    47.               ],
    48.             ),
    49.             Row(
    50.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    51.               children: [
    52.                 CounterText(textKey2),
    53.                 ElevatedButton(
    54.                   onPressed: () {
    55.                     _count2++;
    56.                     textKey2.currentState?.onPressed(_count2);
    57.                   },
    58.                   child: const Icon(Icons.add),
    59.                 ),
    60.               ],
    61.             ),
    62.             const Divider(
    63.               height: 20,
    64.             ),
    65.           ],
    66.         ),
    67.       ),
    68.     );
    69.   }
    70. }
    71.  
    72.  
    73. class CounterText extends StatefulWidget {
    74.   const CounterText(Key key) : super(key: key);
    75.   @override
    76.   State createState() {
    77.     return CounterTextState();
    78.   }
    79. }
    80.  
    81. class CounterTextState extends State<CounterText> {
    82.   String _text="0";
    83.  
    84.   @override
    85.   Widget build(BuildContext context) {
    86.     return Center(
    87.       child: Text(_text,style: const TextStyle(fontSize: 20),),
    88.     );
    89.   }
    90.   void onPressed(int count) {
    91.     setState(() {
    92.       _text = count.toString();
    93.     });
    94.   }
    95. }

  • 相关阅读:
    解放双手！一键助你快速发圈、批量加好友，好用哭了！
    使用Vue + vue-i18n搭建国际化网站
    TCP的三次握手和4次挥手
    Ceph RBD 的实现原理与常规操作
    YOLOv8改进 | 注意力机制 | 添加混合局部通道注意力——MLCA【原理讲解】
    Python "爬虫"出发前的装备之二数据先行（ Requests 模块）
    docker介绍及入门举例
    Linux文件查找、别名、用户组
    【Java每日一题】— —第十九题：用二维数组存放九九乘法表，并将其输出。（2023.10.03）
    6、Netty ByteBuf工作原理
  • 原文地址：https://blog.csdn.net/ZCC361571217/article/details/140239268