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

已于 2024-07-22 16:11:55 修改
阅读量1.5k 收藏 29
点赞数 8
分类专栏： Flutter学习笔记 文章标签： flutter provider Dart ios Flutter局部刷新
于 2024-07-10 16:40:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZCC361571217/article/details/140239268
版权

目录

前言

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局部刷新的例子。

import 'package:flutter/material.dart';

class StatePartialRefreshPage extends StatefulWidget {
  const StatePartialRefreshPage({super.key});
  @override
  State<StatePartialRefreshPage> createState() =>
      _StatePartialRefreshPageState();
}

class _StatePartialRefreshPageState extends State<StatePartialRefreshPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "setState局部刷新",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
        ),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '您点击了$_count次',
            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 20,
          ),
          FilledButton(
              onPressed: () {
                setState(() {
                  _count++;
                });
              },
              child: const Icon(Icons.add)),
        ],
      )),
    );
  }
}

        图1.setState局部刷新

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

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

        注意事项：

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

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

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

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

        完整代码如下：

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

import 'package:flutter/material.dart';

class MyInheritedWidget extends InheritedWidget {
  final int counter;
  const MyInheritedWidget({
    super.key,
    required this.counter,
    required super.child,
  });
  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return true;
  }
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}

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

  @override
  State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
}

class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  int counter = 0;
  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      counter: counter,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(child: Column(
          children: [
            const Divider(),
            const CounterDisplay(),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('add'),
            ),
          ],
        ),),
      ),
    );
  }
}

class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});
  @override
  Widget build(BuildContext context) {
    final inheritedWidget = MyInheritedWidget.of(context);
    return Text('点击次数: ${inheritedWidget?.counter}');
  }
}

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

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

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

3.ValueNotifier和ValueListenableBuilder

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

        使用方法也非常简单：

        1.实例化ValueNotifier

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

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

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

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

        完整的代码如下：

import 'package:flutter/material.dart';

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

  @override
  State<ValueNotifierPage> createState() => _ValueNotifierPageState();
}

class _ValueNotifierPageState extends State<ValueNotifierPage> {

  final ValueNotifier<int> _counter = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: _counter,
            builder: (context, value, child) {
              return Text(
                '您点击了$value次',
                style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
              );
            },
          )
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            _counter.value ++;
          },
        )
    );
  }
}

4.StreamBuilder

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

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

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

        完整的代码如下：

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

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

  @override
  State<StreamBuilderRefreshUIPage> createState() =>
      _StreamBuilderRefreshUIPageState();
}

class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  late Future<String> _data;

  Future<String> fetchData() async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(seconds: 2));
    // 返回模拟数据
    return 'Hello, Flutter!';
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _data = fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: _data,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Data: ${snapshot.data}');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: fetchData,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

5.Provider

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

        我们还以定时器为例。

        1.首先我们导入Provider.

provider: ^6.1.2

        2.自定义ChangeNotifier类。

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

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

class CounterModel extends ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  void addCounter1(){
    debugPrint('counter:$_counter1');
    _counter1 += 1;
    notifyListeners();
  }
  void addCounter2(){
    debugPrint('counter:$_counter2');
    _counter2 += 1;
    notifyListeners();
  }
}

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

            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter1}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter1();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),

        4.完整代码如下：

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

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

  @override
  State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
}

class CounterModel extends ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  void addCounter1(){
    debugPrint('counter:$_counter1');
    _counter1 += 1;
    notifyListeners();
  }
  void addCounter2(){
    debugPrint('counter:$_counter2');
    _counter2 += 1;
    notifyListeners();
  }
}

class _ProviderRefreshPageState extends State<ProviderRefreshPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(height: 10,), // 添加一些间距
            const Divider(),
            const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter1}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter1();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),

            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter2}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter2();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),
            const Divider(height: 20,),
          ],
        ),
      ),
    );
  }
}

6.GetX

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

        首先安装GetX:

get: ^4.6.6

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

class CounterManagerController extends GetxController {
  final counter1 = 0.obs;
  final counter2 = 0.obs;
  void incrementCount1() {
    counter1.value++;
  }
  void incrementCount2() {
    counter2.value++;
  }
}

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

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

        完整的代码如下：

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


class CounterManagerController extends GetxController {
  final counter1 = 0.obs;
  final counter2 = 0.obs;
  void incrementCount1() {
    counter1.value++;
  }
  void incrementCount2() {
    counter2.value++;
  }
}

class GetXRefreshUIPage extends StatelessWidget {
  final String title;
  const GetXRefreshUIPage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    final CounterManagerController controller = Get.put(CounterManagerController());
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 10,
            ), // 添加一些间距
            const Divider(),
            const Text(
              '计数器实例',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
                ElevatedButton(
                  onPressed: () {
                    controller.incrementCount1();
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
                ElevatedButton(
                  onPressed: () {
                    controller.incrementCount2();
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const Divider(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}

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

7.通过GlobalKey局部刷新

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

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

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

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

class CounterText extends StatefulWidget {
  const CounterText(Key key) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return CounterTextState();
  }
}

class CounterTextState extends State<CounterText> {
  String _text="0";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: const TextStyle(fontSize: 20),),
    );
  }
  void onPressed(int count) {
    setState(() {
      _text = count.toString();
    });
  }
}

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

  int _count   = 0;
  int _count2  = 0;
  GlobalKey<CounterTextState> textKey = GlobalKey();
  GlobalKey<CounterTextState> textKey2 = GlobalKey();

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

        完整代码如下：

import 'package:flutter/material.dart';

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

  @override
  State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
}

class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  int _count   = 0;
  int _count2  = 0;
//包裹你定义的需要更新的weight
  GlobalKey<CounterTextState> textKey = GlobalKey();
  GlobalKey<CounterTextState> textKey2 = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 10,
            ), // 添加一些间距
            const Divider(),
            const Text(
              '计数器实例',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CounterText(textKey),
                ElevatedButton(
                  onPressed: () {
                    _count++;
                    textKey.currentState?.onPressed(_count);
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CounterText(textKey2),
                ElevatedButton(
                  onPressed: () {
                    _count2++;
                    textKey2.currentState?.onPressed(_count2);
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const Divider(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}


class CounterText extends StatefulWidget {
  const CounterText(Key key) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return CounterTextState();
  }
}

class CounterTextState extends State<CounterText> {
  String _text="0";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: const TextStyle(fontSize: 20),),
    );
  }
  void onPressed(int count) {
    setState(() {
      _text = count.toString();
    });
  }
}

我叫柱子哥
关注
  • 8
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Flutter】Flutter 实现局部刷新
Code Metaverse
08-02 1981
在 Flutter 开发中，我们经常会遇到需要更新 UI 的情况。在这些情况下，我们通常会刷新整个页面，但这样做可能会导致性能问题。为了解决这个问题，我们可以使用局部刷新，只更新需要改变的部分。
Flutter实现局部刷新
08-18
主要为大家详细介绍了Flutter实现局部刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter-listview局部刷新。listview带有checkbox
IT技术专栏
08-22 6351
功能： 1.实现了listview局部刷新。 2.checkbox状态保存 item:关键代码 Container( child: MyCheckBox(index, selectState), width: 30, height: 30, padding: EdgeInsets.all(5), ), class MyCheckBox extends Stateful...
Flutter局部刷新三剑客
最新发布
eclipse_xu
06-19 901
点击上方蓝字关注我，知识会给你力量局部刷新作为提高Flutter页面性能的重要手段，是每一个Flutter老手都必须掌握的技巧。当然，我们不用非得使用Riverpod、Provider、Bloc这些状态管理工具来实现局部刷新，Flutter框架本身也给我们提供了很多方便快捷的刷新方案，今天要提的就是Notifier三剑客，用它来处理局部刷新，代码优雅又方便，可谓是居家必备之良器。ChangeNo...
Flutter 局部刷新
qq_27909209的博客
05-06 4992
但由于在实际开发中依赖异步数据更新UI的这种场景非常常见，并且当StatefulWidget中控件树较大时，更新一个属性导致整个树重建，消耗性能，因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。但到多选的时候，需要知道当前选中的选项，有选项被点击的时候需要存储下来，当再次被点击的时候要清空这个选项，同时界面还需要同步更新，因此就涉及到状态管理了。方法构建有状态组件，并且提供了状态更新方法，因此在里面完成状态管理。生成的组件的状态的。
flutter 局部刷新
rf344541393的博客
05-23 542
flutter 部分界面刷新
flutter的局部刷新的几种方式
王铁涛技术博客
11-07 1752
flutter的局部刷新的几种方式
Flutter StreamBuilder 实现局部刷新 Widget
Dream It Possible
11-09 906
当widget需要进行刷新时，我们可以通过调用widget的setState方法来实现，setState随后会调用State的build方法来进行重建。那么，如果 我们能将 build方法中的 return new Text(_text) 暴漏出去，我们就可以实现通用的 局部刷新 Widget。Stream 就是事件流或者管道，是基于事件流驱动设计代码，然后监听订阅事件，并针对事件变换处理响应。Flutter StatefulBuilder 用来实现局部数据刷新。本页面实现 Demo 效果如下。
Flutter 实现局部刷新
Dream It Possible
03-17 4390
当widget需要进行刷新时，我们可以通过调用widget的setState方法来实现，setState随后会调用State的build方法来进行重建 //请求刷新 setState((){ }); #State<T extends StatefulWidget> @override Widget build(BuildContext context) { //构建新的Widget return new Text(_text); }
flutter局部刷新的实现示例
01-20
局部刷新 我们在做项目的时候，都需要单独的去刷新一个值，而不是把整个界面都重绘。大家都知道setState是进行重绘的一个方法，他会执行生命周期的一个build，这将会使得整个界面来进行重绘。当然我们也会说把他进行...
Flutter局部刷新
01-07
下面提供了两种局部刷新的方式，通过provider和StreamBuilder来实现局部刷新 1、通过provider刷新 首先在pubspec.yaml中添加provider依赖 # provider provider: ^3.1.0 下面通过provider来实现一个发送验证码的...
Flutter 局部路由实现详解
08-25
Flutter 局部路由实现详解是指在 Flutter 中实现局部路由的方法，通过 Navigator Widget 实现路由的跳转和管理。下面将详细介绍 Flutter 局部路由实现详解的知识点。 一、Navigator Widget Navigator Widget 是 ...
详解flutter刷新流程，让你的应用更流畅
you__are_my_sunshine的博客
05-21 1926
Flutter是谷歌推出的高性能、跨端UI框架，可以通过一套代码，支持iOSAndroid等多个平台，且能达到原生性能。Flutter也可以与平台原生代码进行混合开发，其更新迭代速度很快，技术发展也日趋成熟，如今已经有很多公司在使用这种新跨端技术。我们知道在flutter中可以使用setState()来刷新的UI，这会遍历调用子Widget的build()重构视图。当一个页面内容比较复杂时，会包含多个widget，如果直接调用根组件的setState()，会遍历所有子Widget的build()
Flutter 实现局部刷新 StreamBuilder 实例详解
u010194271的博客
11-25 2556
为了避免State.setState方法重新构建全局造成的性能消耗，我们可以通过StreamBuilder组件对页面进行局部刷新。
flutter 的StatefulBuilder实现局部刷新
QT5 + PYQT5 + PYTHON3.3.2 最强组合 无敌了
01-05 1277
游学电子科技
页面局部刷新三种方法
热门推荐
qq_42588134的博客
09-21 1万+
页面局部刷新 1.使用ajax实现小部分的内容局部刷新 $.ajax({ url:“http://localhost:8080/intoHomepage.do”, type:“post”, data:{name:“mydata”}， success:function (result) { if(result){ //对后端返回的数据result进行处理 $(".testchange").html...
Flutter局部刷新解决闪烁问题
流星雨的博客
02-05 2993
Flutter局部刷新解决闪烁问题
两种方式实现局部刷新
qq_27009517的博客
05-13 3931
嗯，在这里我们主要讨论一下在使用Struts 2.5时最常遇到的一个问题：页面局部刷新。Struts是一个MVC模型，因此常见的返回结果类型为一个页面，它可以是jsp、freemarker或者velocity这样的模板引擎。在这里只说我们所使用的freemarker。你可以把freemarker看作是一个servlet，对于每一个servlet，它可以接收来自客户端的输入然后执行相应的操作后，将结果输出到客户端。实际上，你可以这么理解：freemarker将我们要写的servlet大大简化。比如说当你要写一
flutter 刷新局部组件
08-09
Flutter提供了几种刷新局部组件的方式，以下是其中的一些常用方法： 1. 使用StatefulWidget和setState方法：对于需要刷新的组件，可以将其封装为一个StatefulWidget，在该组件内部使用setState方法来触发局部刷新。setState方法会通知Flutter框架重新构建该组件，并更新视图。 2. 使用GlobalKey：可以给需要刷新的组件添加一个GlobalKey，然后通过key.currentState调用该组件的setState方法来实现局部刷新。这种方法适用于需要在组件树中的不同位置触发刷新的情况。 3. 使用StreamBuilder：如果需要响应异步数据的变化来刷新局部组件，可以使用StreamBuilder来监听数据流的变化，并在数据更新时刷新组件。StreamBuilder会自动订阅数据流，并在数据更新时重新构建组件。 4. 使用ValueListenableBuilder：如果需要监听一个可监听的值（如ValueNotifier）的变化来刷新局部组件，可以使用ValueListenableBuilder。ValueListenableBuilder会监听ValueNotifier的变化，并在值更新时重新构建组件。 以上是Flutter中实现局部刷新的一些常用方法。根据具体的场景和需求，选择合适的方法来刷新组件可以提高应用的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我叫柱子哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值