网站由什么组成网站编程器
目录
1. 引言
2. StatelessWidget（无状态组件）
2.1 定义与特点
2.2 代码示例
3. StatefulWidget（有状态组件）
3.1 定义与特点
3.2 代码示例
4. StatelessWidget vs StatefulWidget 对比
5. StatefulWidget 生命周期
5.1 生命周期示例
6. 何时选择 StatelessWidget 或 StatefulWidget？
6.1 选择 StatelessWidget
6.2 选择 StatefulWidget
7. 总结
相关推荐
1. 引言
Flutter 是 Google 开发的跨平台 UI 框架，所有界面元素都是由 Widget 组成。Flutter 中的 Widget 分为 StatelessWidget（无状态组件） 和 StatefulWidget（有状态组件），它们在开发过程中扮演着不同的角色。本文将深入解析这两类组件的特点、适用场景及生命周期，并通过示例代码帮助开发者理解如何正确选择和使用它们。
2. StatelessWidget（无状态组件）
2.1 定义与特点
StatelessWidget 是指不可变的组件，它的 UI 由 build() 方法描述，并且不会因用户交互或数据变化而发生更新。
主要特点：
- 组件状态不可变（immutable）。
- 仅依赖输入数据（
final变量）。 build()方法只会被调用一次，除非父组件触发更新。- 适用于静态 UI（如文本、按钮、图标）。
2.2 代码示例
import 'package:flutter/material.dart';class MyStatelessWidget extends StatelessWidget {final String text;const MyStatelessWidget({super.key, required this.text});@overrideWidget build(BuildContext context) {return Text(text);}
}void main() {runApp(MaterialApp(home: Scaffold(body: Center(child: MyStatelessWidget(text: 'Hello, Flutter!'),),),));
}
示例解析：
MyStatelessWidget组件接收text作为参数，无法在运行时改变。- 组件不会因外部状态变化而重新构建，适用于静态文本。
3. StatefulWidget（有状态组件）
3.1 定义与特点
StatefulWidget 适用于 UI 需要动态变化的场景。它由 两部分 组成：
- StatefulWidget 类（负责创建 State）。
- State 类（持有可变状态，并控制 UI 更新）。
主要特点：
- UI 组件可变（mutable）。
- 通过
setState()触发 UI 更新。 - 适用于用户交互、动画、异步数据加载等场景。
3.2 代码示例
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(children: [Text('Count: $_counter'),ElevatedButton(onPressed: _incrementCounter,child: Text('Increment'),),],)),);}
}
示例解析：
_incrementCounter通过setState()更新_counter变量。- 每次按钮点击时，
setState()触发build()方法重新执行，刷新 UI。
4. StatelessWidget vs StatefulWidget 对比
| 特性 | StatelessWidget | StatefulWidget |
|---|---|---|
| 是否可变 | 不可变 | 可变 |
| 状态管理 | 依赖父组件传递数据 | 组件内部维护状态 |
| 适用场景 | 静态 UI（如文本、按钮、图标） | 交互组件（如计数器、表单） |
| 性能 | 性能较优 | 需要手动管理状态，可能影响性能 |
| 快捷创建 | stless | stful |
例如创建 StatefulWidget，我们输入stful 回车，会自动出现下方代码，而不需要我们自己编写这种格式，自己仅需要修改 build 中的 UI 内容即可。
5. StatefulWidget 生命周期
StatefulWidget 的生命周期由多个回调方法组成，理解这些方法有助于优化组件的性能。
| 生命周期方法 | 说明 |
|---|---|
initState() | 组件创建时调用，仅执行一次，适用于初始化数据。 |
didChangeDependencies() | 依赖发生变化时调用，如 InheritedWidget 更新。 |
build() | 组件渲染 UI，可能多次调用。 |
setState() | 触发状态更新并重新构建 UI。 |
didUpdateWidget() | 父组件更新时调用，可用于响应外部数据变化。 |
dispose() | 组件销毁时调用，释放资源（如取消网络请求、关闭流）。 |
5.1 生命周期示例
class LifecycleDemo extends StatefulWidget {@override_LifecycleDemoState createState() => _LifecycleDemoState();
}class _LifecycleDemoState extends State<LifecycleDemo> {@overridevoid initState() {super.initState();print('initState called');}@overrideWidget build(BuildContext context) {print('build called');return Text('Lifecycle Demo');}@overridevoid dispose() {print('dispose called');super.dispose();}
}
6. 何时选择 StatelessWidget 或 StatefulWidget？
6.1 选择 StatelessWidget
- UI 仅依赖父组件的参数。
- 组件不需要持有内部状态。
- 适用于简单的文本、图标、按钮等静态内容。
6.2 选择 StatefulWidget
- 组件的 UI 需要根据用户交互或数据变化而更新。
- 组件需要维护内部状态，例如计数器、动画、表单输入等。
- 涉及异步数据加载（如网络请求）。
7. 总结
- Flutter 中 Widget 分为 StatelessWidget（无状态组件）和 StatefulWidget（有状态组件）。
- StatelessWidget 适用于静态 UI，而 StatefulWidget 适用于需要动态更新的 UI。
- StatefulWidget 依赖 setState() 进行状态更新，并具有完整的生命周期管理。
- 选择合适的 Widget 类型可以提高应用性能，并优化用户体验。
相关推荐
Flutter 布局入门指南：掌握核心技巧，轻松构建精美界面_flutter 布局详解,必知必会-CSDN博客文章浏览阅读1.3k次，点赞56次，收藏53次。Flutter 的布局系统以其灵活性和高效性著称，但对于刚入门的开发者来说，面对琳琅满目的布局 Widget，可能会感到不知所措。本文将带你快速掌握 Flutter 布局的核心技巧，避开常见陷阱，并提供实用代码示例，助你轻松实现复杂界面设计。_flutter 布局详解,必知必会https://shuaici.blog.csdn.net/article/details/145752085Android内存优化指南：从数据结构到5R法则的全面策略_android 内存管理指南-CSDN博客文章浏览阅读1.5k次，点赞67次，收藏62次。Android内存优化涉及多个方面，从选择合适的数据结构如ArrayMap和SparseArray以减少内存占用，到避免使用内存开销大的枚举类型。谨慎使用多进程和large heap选项，同时充分利用NDK进行内存管理。图片优化是关键，通过采样、缓存和格式转换等方式减少内存占用。此外，遵循5R法则——释放、回收、减少、重用和检查，确保资源得到有效管理。这些策略共同构成了一套全面的Android内存优化方案，有助于提升应用性能和用户体验。_android 内存管理指南
https://shuaici.blog.csdn.net/article/details/145811726