Flutter-使用setState来实现动态UI刷新实现UI交互

setState()简介

setState() 函数的作用是标记 StatefulWidget 中的 State 发生变化,需要重新构建 UI。即让Flutter架构自动实时刷新UI。
当 StatefulWidget 的 State 发生变化时,调用 setState() 通知 Flutter 框架,Flutter 框架接受到通知后,会重新调用 StatefulWidget 的 build() 方法来构建 UI。

例子

举个简单的例子:

class Counter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CounterState();
  }
}

class _CounterState extends State<Counter> {
  int _count = 0;
  
  @override
  Widget build(BuildContext context) {
    return Text('Count: $_count');
  }
  
  void increment() {
    setState(() {
      _count++;
    });
  }
}

这里有一个 StatefulWidget Counter,里面维护了一个状态 _count。当我们调用 increment() 方法时,调用了 setState() 通知 Flutter 框架 _count 已经变化,Flutter 框架会重新调用 build() 方法构建 UI,更新 Text 的内容。
所以 setState() 的主要作用是当 StatefulWidget 的状态(State)发生变化时,通知 Flutter 框架去重新构建 UI 以更新界面。
通过使用setState()函数，可以在有状态的小部件中管理和更新状态，以实现动态的UI交互和数据更新。

详细介绍

1. 功能： setState()函数用于通知Flutter框架，小部件的状态已经发生了改变，并请求重新构建UI。它会触发小部件的build()方法，使小部件重新渲染，以反映最新的状态。

2. 使用方式： setState()函数是State类的一个方法。在需要更新状态的地方，可以通过调用setState(() { … })来包裹代码块。在代码块内部，可以进行对状态的修改操作。

3. 异步操作： setState()函数是一个异步操作，它会将状态更新请求添加到Flutter的事件队列中，然后继续执行后续的代码。一旦当前帧的构建完成，Flutter框架会调用build()方法来重新构建小部件。

4. 更新范围： setState()函数只会更新调用它的小部件及其子树。因此，为了更新整个应用程序的状态，通常需要在根小部件的上层使用setState()函数。

5. 不可变性： Flutter框架通过对比前后两个状态对象来确定是否需要重新构建小部件。因此，在使用setState()函数时，应确保更新后的状态对象是一个新的不可变对象，而不是原地修改现有对象。

6. 状态管理： setState()函数通常与StatefulWidget一起使用，用于管理有状态的小部件。通过调用setState()函数来更新状态，可以触发小部件的重建，从而实现根据状态的变化来更新UI的效果。

setState的深入说明

State对象

StatefulWidget 中的 State 是指管理和维护与该StatefulWidget相关的状态信息的对象。每个StatefulWidget都有一个与之相关联的State对象，State对象包含了控件的状态信息，例如文本字段的内容、选中的标志、动画的状态等等。当State中的状态发生变化时，可以通过调用setState方法通知Flutter框架，以便重新构建UI来反映这些状态的变化。

重新调用StatefulWidget的build只会差异化更新UI

重新调用StatefulWidget的build方法来构建UI并不会一直耗费资源。Flutter框架是高效的，它会根据需要执行构建。当你调用setState时，Flutter会将标记为“脏”的部分标记为需要重新构建，但不会重新构建整个UI。只有发生实际的更改时，才会进行重建。

Flutter使用了一种称为"基于差异的重建"的方法。它会比较新旧Widget树，找出差异，然后仅更新发生变化的部分。这种方法可以有效减少重建的开销，因此在通常情况下，并不会导致性能问题。

当你调用setState时，Flutter框架会在主事件循环的下一个帧中执行重建操作，这也有助于确保不会阻塞应用程序的主线程。因此，Flutter的UI刷新通常是高效的，不会导致性能问题，除非你在build方法中执行了非常昂贵的操作。

StatefulWidget中的State表示状态信息，而setState方法用于通知框架状态的变化，然后框架会进行高效的差异重建，以更新UI。这个方法是确保UI与状态同步的关键机制，并通常不会引发性能问题。

---

结束语 Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！