Flutter框架 Widget 简介
封面图
•
2025-10-24
•
Flutter
10
0
0
0
Flutter 是一个由 Google 开发的开源 UI 软件开发工具包(SDK),用于构建跨平台的应用程序(支持 iOS、Android、Web、桌面等)。在 Flutter 中,**Widget** 是构建用户界面的基本单元。理解 Widget 的概念是掌握 Flutter 的关键。 --- ## 🧩 一、什么是 Widget? 在 Flutter 中,**Widget** 是一个抽象类,表示用户界面中的一部分。它描述了如何绘制一个组件,并且可以响应用户交互、状态变化等。 > ✅ **注意:** 在 Flutter 中,所有的 UI 元素都是 Widget,包括按钮、文本、布局、动画等。 --- ## 📌 二、Widget 的分类 Flutter 中的 Widget 可以分为以下几类: ### 1. **StatelessWidget(无状态 Widget)** - 不包含任何可变状态。 - 一旦创建,其属性不能改变。 - 适用于静态内容,比如图标、文本、图片等。 ```dart class MyText extends StatelessWidget { final String text; const MyText({super.key, required this.text}); @override Widget build(BuildContext context) { return Text(text); } } ``` ### 2. **StatefulWidget(有状态 Widget)** - 包含可变状态,可以通过 `setState()` 方法更新 UI。 - 适用于动态内容,比如计数器、表单输入、动画等。 ```dart class Counter extends StatefulWidget { const Counter({super.key}); @override State<Counter> createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; void increment() { setState(() { count++; }); } @override Widget build(BuildContext context) { return Column( children: [ Text('Count: $count'), ElevatedButton(onPressed: increment, child: Text('Increment')), ], ); } } ``` ### 3. **Layout Widgets(布局 Widget)** - 用于组织其他 Widget 的布局结构。 - 常见的布局 Widget 有: - `Row`:水平排列子 Widget - `Column`:垂直排列子 Widget - `Container`:设置边距、填充、背景等 - `Padding`:添加内边距 - `Center`:居中对齐 - `Align`:对齐方式控制 - `SizedBox`:固定大小的 Widget - `Flex` / `Expanded` / `Flexible`:弹性布局 ```dart Container( padding: EdgeInsets.all(16), color: Colors.blue, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Hello'), Icon(Icons.star), ], ), ) ``` ### 4. **Material Widgets(Material Design 组件)** - 提供符合 Material Design 规范的 UI 组件。 - 如:`ElevatedButton`, `TextField`, `AppBar`, `SnackBar`, `Dialog` 等。 ```dart ElevatedButton( onPressed: () {}, child: Text('Click Me'), ) ``` ### 5. **Cupertino Widgets(iOS 风格组件)** - 为 iOS 设备提供类似原生的 UI 组件。 - 如:`CupertinoButton`, `CupertinoNavigationBar`, `CupertinoTabBar` 等。 ```dart CupertinoButton( onPressed: () {}, child: Text('iOS Button'), ) ``` ### 6. **Other Widgets(其他类型)** - `Navigator` 和 `Route`:用于页面跳转和导航 - `Provider` / `Riverpod` / `Bloc`:状态管理相关 Widget - `Animation` 相关 Widget:如 `AnimatedContainer`, `FadeTransition`, `SlideTransition` - `InheritedWidget`:用于跨层级传递数据 --- ## 🔄 三、Widget 的生命周期 在 `StatefulWidget` 中,`State` 类有以下生命周期方法: | 方法 | 描述 | |------|------| | `initState()` | 在 Widget 第一次被创建时调用,适合初始化数据 | | `build()` | 构建 UI,每次状态变化都会调用 | | `didUpdateWidget()` | 当 Widget 的配置发生变化时调用 | | `deactivate()` | 当 Widget 被移除时调用 | | `dispose()` | 在 Widget 被销毁时调用,用于释放资源 | --- ## 💡 四、Widget 的核心思想 - **一切皆 Widget**:在 Flutter 中,UI 的每一个部分都由 Widget 构成。 - **声明式 UI**:通过编写 Widget 的结构来定义 UI,而不是像传统 Android 或 iOS 开发那样使用 XML 或 Storyboard。 - **响应式编程**:当数据变化时,Widget 会自动重新构建,从而更新 UI。 --- ## 🧠 五、总结 | 类型 | 特点 | 示例 | |------|------|------| | Stateless Widget | 不可变,静态 | Text, Image, Container | | Stateful Widget | 可变,动态 | Counter, Form, Slider | | Layout Widget | 控制布局 | Row, Column, Padding | | Material Widget | Material Design 风格 | ElevatedButton, AppBar | | Cupertino Widget | iOS 风格 | CupertinoButton, CupertinoTabBar | --- 如果你刚开始学习 Flutter,建议从 `StatelessWidget` 和 `StatefulWidget` 开始,逐步了解布局和常用组件。如果有具体问题或想了解某个 Widget 的用法,欢迎继续提问!
上一篇:
Flutter计数器应用示例
下一篇:
Flutter编程框架状态管理
标题录入,一次不能超过6条
返回顶部
留言
留言
评论