Flutter 框架提供了丰富的组件库，这些组件被称为 Widgets。Widgets 是构建用户界面的基本单元，它们可以是简单的按钮、文本框，也可以是复杂的布局和动画效果。本章将详细介绍 Flutter 中常用的 Widget 类型及其用法。
基础 Widget
容器 Container
容器是 Flutter 中最常用的 Widget 之一，它允许你设置子元素的样式，如背景颜色、边距、填充等。
Container(
color: Colors.red,
padding: EdgeInsets.all(10),
child: Text('Hello World'),
)文本 Text
文本 Widget 用于显示文本内容。你可以通过多种方式自定义文本的样式，如字体大小、颜色、对齐方式等。
Text( 'Hello World', style: TextStyle(fontSize: 20, color: Colors.white), textAlign: TextAlign.center, )
图像 Image
图像 Widget 用于显示图片资源。你可以从网络或本地文件加载图片。
Image.network( 'https://example.com/image.jpg', width: 100, height: 100, )
按钮 Button
按钮用于响应用户的点击操作。Flutter 提供了多种按钮类型，如 RaisedButton、FlatButton 和 OutlineButton。
RaisedButton(
onPressed: () {},
child: Text('Click Me'),
)布局 Widget
列表 Layout
列表用于排列多个子元素，Flutter 提供了多种布局方式，包括行 Row 和列 Column。
Column(
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)对齐 Alignment
对齐 Widget 用于控制子元素的位置。常见的对齐 Widget 包括 Align 和 Center。
Align(
alignment: Alignment.topRight,
child: Text('Top Right'),
)空间分隔 Spacing
空间分隔 Widget 用于控制元素之间的间距。常用的有 SizedBox 和 Padding。
Padding(
padding: EdgeInsets.all(10),
child: Text('Padding Example'),
)输入 Widget
文本输入 TextField
文本输入 Widget 用于接收用户输入的文本信息。
TextField( decoration: InputDecoration(hintText: 'Enter your name'), )
单选按钮 Radio
单选按钮用于让用户在一组选项中选择一个选项。
-- -------------------- ---- -------
------
------ --
----------- ------------
---------- ----- -
----------- -
----------- - ----
---
--
-复选框 Checkbox
复选框用于让用户在多个选项中选择一个或多个选项。
Checkbox(
value: _isChecked,
onChanged: (val) {
setState(() {
_isChecked = val;
});
},
)导航与路由 Navigation & Routing
路由 Navigator
Navigator 用于管理应用中的页面跳转。
Navigator.push( context, MaterialPageRoute(builder: (context) => NextPage()), );
页面切换 PageView
PageView 用于实现滑动切换页面的效果。
PageView(
children: [
Text('Page 1'),
Text('Page 2'),
Text('Page 3'),
],
)动画 Animation
基本动画 Basic Animation
基本动画用于创建简单的动画效果，如淡入淡出、平移等。
AnimatedOpacity(
opacity: _opacity,
duration: Duration(seconds: 1),
child: Text('Animated Opacity'),
)自定义动画 Custom Animation
自定义动画允许开发者完全控制动画过程，通常需要使用 AnimationController。
-- -------------------- ---- -------
----- ---------------- ------- -------------- -
---------
---------------------- ------------- -- -------------------------
-
----- ---------------------- ------- ----------------------- ---- ------------------------------ -
------------------- ------------
---------
---- ----------- -
------------------
----------- - -------------------------- ----- --------- ----------------- ----
----------------------
-
---------
---- --------- -
----------------------
----------------
-
---------
------ ------------------ -------- -
------ ----------------
---------- ------------
-------- --------- ------ -
------ ----------------
------ ------------------
------ ------------ ------------
--
--
--
-
-其他常用 Widget
列表 ListView
列表 Widget 用于展示一系列条目，支持滚动和动态加载数据。
ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
)下拉菜单 DropdownMenu
下拉菜单 Widget 用于提供一系列选项供用户选择。
-- -------------------- ---- -------
-----------------------
------ ---------------- --- ------- --- ------- --------------- ------ -
------ -------------------------
------ ------
------ ------------
--
------------
---------- ------- --------- -
----------- -
------------- - ---------
---
--
-以上是 Flutter 中一些常用的 Widget 及其用法。通过这些 Widget 的组合使用，你可以构建出复杂且美观的用户界面。希望这些内容对你有所帮助！