Flutter&鸿蒙next 中的 setState 使用场景与最佳实践

简介: 在 Flutter 中,`setState` 是最常用的状态管理方法之一,用于更新局部状态并触发 UI 重新构建。本文介绍了 `setState` 的基本用法、代码示例、适用场景及最佳实践,帮助开发者高效地管理状态,确保代码的可维护性和性能。

在 Flutter 中,setState 是最常用的状态管理方法之一。它用于告诉框架,某个状态已经改变,应该重新构建 UI 来反映状态的变化。尽管 setState 是 Flutter 中管理状态的一种简单而直接的方式,但它的使用场景和最佳实践却需要开发者仔细考虑,以保证代码的可维护性和性能。

  1. setState 的基本用法
    在 Flutter 中,setState 是 State 类中的一个方法,通常用于更新小范围内的状态并触发 UI 更新。当调用 setState 时,Flutter 会标记当前 widget 为脏,需要重新构建。当状态变化时,build 方法会重新被调用,UI 会反映最新的状态。

代码示例
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}

class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Counter"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Button tapped $_counter times'),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
),
),
);
}
}

  1. 代码详细解释
    让我们逐行解读上面的代码:

MyApp 类
MyApp 是一个 StatelessWidget,它是应用的根组件。MaterialApp 是 Flutter 提供的一个内置组件,用来设置应用的主题和导航等。
在 MyApp 的 build 方法中,CounterPage() 被用作首页。
CounterPage 类
CounterPage 是一个 StatefulWidget,这意味着它的 UI 会根据状态变化而更新。CounterPage 类本身并不保存任何状态,状态是保存在 _CounterPageState 中的。
_CounterPageState 类
_CounterPageState 继承自 State,用于保存组件的状态。这里我们定义了一个 _counter 变量来存储点击次数。
setState() 是状态更新的核心。当 _incrementCounter() 被调用时,我们通过 setState 更新 _counter,然后 Flutter 会自动重新构建 UI。
build 方法
build 方法是构建 UI 的核心。它根据当前状态 _counter 来生成 UI。当 _counter 发生变化时,setState 会触发 build 方法的重新调用,UI 会更新以显示新的计数值。

  1. setState 的使用场景
    setState 适用于以下几种场景:

局部 UI 更新: setState 用于更新局部状态,当你只需要更新当前 widget 或其子 widget 时,setState 是一个非常有效的选择。例如,更新按钮的状态、显示/隐藏某个元素或改变文本内容等。

UI 状态相关的数据变化: 如果状态变化直接影响 UI 展示(如计数器、输入框、列表项等),使用 setState 是最简单的解决方案。它能快速实现 UI 的响应式更新。

临时状态更新: setState 适合用来处理临时状态变化,而非全局或持久化的数据管理。如果状态只需要在某个特定页面或 widget 中进行处理,不需要跨页面共享,可以使用 setState。

  1. setState 的最佳实践
    虽然 setState 是一个简单且直观的工具,但在实际开发中,应该遵循一些最佳实践,以避免常见的陷阱:

1) 避免频繁的 setState 调用
频繁的 setState 调用会导致 UI 的过度重建,进而影响性能。确保每次调用 setState 时,确实有必要更新 UI。最好将多个状态更新操作合并成一个 setState 调用。

setState(() {
_counter++;
_someOtherState = true;
});
2) 避免在 build 方法中调用 setState
setState 会触发 build 方法重新构建 UI。如果在 build 方法中调用 setState,会导致无限递归调用,造成应用崩溃。确保 setState 只在事件处理或生命周期方法中调用,而不是在 build 中。

3) 避免过多的状态变化
如果一个 widget 拥有大量的状态数据,使用 setState 会使得它变得臃肿且难以维护。在这种情况下,可以考虑使用其他状态管理方案,比如 Provider、Riverpod、Bloc 等。

4) 只更新必要的部分
setState 会触发 widget 的重建。如果一个 widget 中有多个 UI 元素,而你只需要更新其中一部分,尽量避免更新整个 widget。例如,将需要更新的部分拆分成单独的 StatefulWidget,以减少不必要的重建。

  1. 总结
    setState 是 Flutter 中最基础、最常用的状态管理方法,它简单易用,适合处理小范围的状态更新。然而,随着项目的规模扩大,setState 可能会暴露出性能和维护性的问题。在适当的情况下,应该考虑使用更复杂的状态管理解决方案来处理全局或复杂的状态更新。
    ————————————————

                         版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143581396

目录
相关文章
|
24天前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
158 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
3月前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
391 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
4月前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
137 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
4月前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
116 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
4月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
199 5
|
4月前
|
存储 Dart
Flutter&鸿蒙next 实现一个计算器应用
本文介绍了如何使用 Flutter 创建一个简单的计算器应用,包括基本的加减乘除运算。文章详细讲解了界面布局、计算逻辑和状态管理的实现步骤,通过具体的代码示例展示了如何构建计算器界面、处理用户输入和显示计算结果。
145 0
|
4月前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
417 0
|
2天前
鸿蒙开发:wrapBuilder传递参数
本文,主要简单了介绍了一下,非UI使用的情况下,wrapBuilder传递数据问题,除了以上的方式之外,还有其它的方式可以实现,在实际的开发中,还是具体问题具体分析。
74 61
鸿蒙开发:wrapBuilder传递参数
|
2天前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
24 10
鸿蒙开发:弹性布局Flex
|
2天前
|
容器
鸿蒙开发:相对布局RelativeContainer
当然了,RelativeContainer组件还有着其它的属性,但是最重要的也就是位置的摆放,其实也就是相对于锚点组件的摆放;通过上述的案例,我们不难发现,所谓的左上右下,反着来就是对的,比如在锚点上边,我用bottom,在锚点下面,我用top,在实际的开发中,可极大节约我们的开发时间。
鸿蒙开发:相对布局RelativeContainer

热门文章

最新文章

  • 1
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    33
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    34
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    33
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    158
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    101
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    62
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    176
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    56
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    82
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    179