【Flutter】基础入门：Widgets
在 Flutter 中，Widget 是应用程序构建块的基础。几乎所有的对象都是一个 Widget，不论是显示在屏幕上的 UI 元素，还是一些功能性组件（例如用于手势检测的 GestureDetector，或用于传递应用主题数据的 Theme），它们都是 Widget。与原生开发中“控件”仅指 UI 元素不同，Flutter 的 Widget 概念更加广泛，它涵盖了界面显示、布局、手势检测、状态管理等多个层面。本文将深入讲解 Flutter 中的 Widget，帮助你从概念到实践掌握它们。
什么是 Widget
Widget 是 Flutter 应用的核心概念。万物皆 Widget，这是开发 Flutter 时需要牢记的一点。无论是屏幕上展示的文字、图片、按钮，还是布局的容器、手势检测器，甚至主题和动画控制，它们都以 Widget 的形式存在。你可以将 Widget 理解为 UI 元素的描述或一个函数，在输入某些参数时返回一个特定的用户界面。
Flutter 中的 Widget 分类
Flutter 中的 Widget 大体上可以分为两类：
- 有状态的 Widget (
StatefulWidget) - 无状态的 Widget (
StatelessWidget)
无状态的 Widget (StatelessWidget)
StatelessWidget 是静态的，它们在生命周期中不发生变化。简单的文本、图标和图片等不需要交互的组件通常是无状态的。
示例：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('StatelessWidget Example')),
body: Center(child: Text('Hello, Flutter!')),
),
);
}
}
在上面的代码中，MyApp 是一个 StatelessWidget，它只需要简单地显示一行文字。
有状态的 Widget (StatefulWidget)
StatefulWidget 可以管理和更新状态。它们能够根据用户的交互或内部事件（如计时器或动画）来动态更新界面。每个 StatefulWidget 都有一个对应的 State 对象，负责管理 Widget 的状态。
示例：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('StatefulWidget Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pressed the button this many times:'),
Text('$_counter', style: Theme.of(context).textTheme.headline4),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
在这个例子中，点击按钮会触发 _incrementCounter 函数，更新 State 中的计数器值，随后通过 setState() 通知 Flutter 重新构建 UI 以反映最新的状态。
常见的基础 Widget
文本 Widget (Text)
Text 是用于显示简单文本的 Widget。它可以通过 style 属性自定义文字的字体、颜色和大小。
示例：
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, color: Colors.blue),
)
图片 Widget (Image)
Image 用于加载和显示图片。它支持多种方式加载图片，如网络图片、文件图片、资源图片等。
示例：
Image.network('https://example.com/sample-image.jpg')
图标 Widget (Icon)
Icon 是用于显示图标的 Widget，Flutter 提供了丰富的内置图标库，如 Material Icons。
示例：
Icon(Icons.favorite, color: Colors.red, size: 40)
容器 Widget (Container)
Container 是最常用的布局 Widget，它可以包含子组件，并支持设置大小、边距、填充、对齐方式等。
示例：
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(20),
color: Colors.blue,
child: Text('Container example'),
)
列 Widget (Column) 与 行 Widget (Row)
Column 和 Row 是用于垂直和水平排列子组件的 Widget。它们常用于构建基本的布局。
示例：
Column(
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
按钮 Widget (ElevatedButton)
按钮是常见的交互元素，Flutter 提供了多种按钮组件，如 ElevatedButton、TextButton 和 IconButton。
示例：
ElevatedButton(
onPressed: () {},
child: Text('Click Me'),
)
布局 Widgets
Flutter 提供了丰富的布局 Widgets，帮助开发者构建灵活且强大的 UI 布局。
Padding
Padding 用于给组件增加内边距。
示例：
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Padded Text'),
)
Center
Center 将子 Widget 居中显示。
示例：
Center(
child: Text('Centered Text'),
)
Stack
Stack 是一个叠加布局 Widget，允许将多个 Widget 叠加显示。常用于实现浮动按钮或重叠布局。
示例：
Stack(
children: <Widget>[
Container(color: Colors.blue, width: 200, height: 200),
Positioned(
left: 50,
top: 50,
child: Text('Stacked Text'),
),
],
)
Expanded
Expanded 用于在 Row 或 Column 中扩展子组件，分配剩余的空间。
示例：
Row(
children: <Widget>[
Expanded(child: Container(color: Colors.red)),
Expanded(child: Container(color: Colors.green)),
],
)
Widget 的生命周期
在 StatefulWidget 中，Widget 的生命周期主要有以下几个阶段：
createState()：创建状态对象，这个对象会保持 Widget 的状态。initState()：初始化状态，只调用一次。build()：构建 Widget 的 UI，每次状态改变时都会调用。setState()：当需要更新 UI 时调用此方法。dispose()：当 Widget 被销毁时调用，用于清理资源。
总结
在 Flutter 中，Widget 是应用程序构建的核心，涵盖了所有的 UI 组件、布局和功能模块。无论是无状态还是有状态的 Widget，都通过嵌套和组合的方式来构建复杂的用户界面。掌握基础的 Widget，如 Text、Image、Icon，以及常用的布局 Widget，如 Column、Row、Padding、Expanded，是学习 Flutter 的基础。通过理解 Widget 的使用方式和它们的生命周期，开发者能够灵活构建高效、可维护的应用。