Flutter 常用组件大全
Flutter 提供了丰富的组件来构建 UI,以下是常见的组件,按 功能类别 分类。
1️⃣ 基础布局组件
组件 |
作用 |
示例 |
Container |
盒子容器,支持装饰、边距、大小 |
Container(width: 100, height: 100, color: Colors.red) |
Padding |
内边距 |
Padding(padding: EdgeInsets.all(10), child: Text("Hello")) |
Center |
居中对齐 |
Center(child: Text("居中")) |
Align |
位置对齐 |
Align(alignment: Alignment.bottomRight, child: Text("右下角")) |
SizedBox |
固定大小的空白间距 |
SizedBox(height: 20) |
Expanded |
让子组件填充剩余空间 |
Expanded(child: Text("填充空间")) |
Flexible |
控制子组件弹性大小 |
Flexible(child: Text("弹性大小")) |
Padding(
padding: EdgeInsets.all(20),
child: Center(child: Text("Hello, Flutter!")),
)
2️⃣ 列表 & 网格
组件 |
作用 |
示例 |
ListView |
滚动列表 |
ListView(children: [...]) |
GridView |
网格布局 |
GridView.count(crossAxisCount: 3, children: [...]) |
SingleChildScrollView |
单个子元素滚动 |
SingleChildScrollView(child: Column(...)) |
ListView(
children: [
ListTile(title: Text("Item 1")),
ListTile(title: Text("Item 2")),
],
)
3️⃣ 文字 & 按钮
组件 |
作用 |
示例 |
Text |
文本 |
Text("Hello", style: TextStyle(fontSize: 18)) |
RichText |
富文本 |
RichText(text: TextSpan(text: "Bold", style: TextStyle(fontWeight: FontWeight.bold))) |
ElevatedButton |
立体按钮 |
ElevatedButton(onPressed: () {}, child: Text("点击")) |
TextButton |
文字按钮 |
TextButton(onPressed: () {}, child: Text("文字按钮")) |
IconButton |
图标按钮 |
IconButton(icon: Icon(Icons.star), onPressed: () {}) |
ElevatedButton(
onPressed: () {
print("按钮点击");
},
child: Text("点击我"),
)
4️⃣ 图片 & 图标
组件 |
作用 |
示例 |
Image.asset |
加载本地图片 |
Image.asset("assets/logo.png") |
Image.network |
加载网络图片 |
Image.network("https://example.com/logo.png") |
Icon |
图标 |
Icon(Icons.favorite, color: Colors.red) |
Image.network(
"https://picsum.photos/200",
width: 100,
height: 100,
)
5️⃣ 输入框 & 表单
组件 |
作用 |
示例 |
TextField |
单行输入框 |
TextField(decoration: InputDecoration(labelText: "输入内容")) |
TextFormField |
表单输入框 |
TextFormField(decoration: InputDecoration(labelText: "请输入")) |
Checkbox |
复选框 |
Checkbox(value: true, onChanged: (val) {}) |
Switch |
开关 |
Switch(value: true, onChanged: (val) {}) |
Slider |
滑动条 |
Slider(value: 0.5, onChanged: (val) {}) |
TextField(
decoration: InputDecoration(
labelText: "输入用户名",
border: OutlineInputBorder(),
),
)
6️⃣ 导航 & 路由
组件 |
作用 |
示例 |
Navigator |
页面导航 |
Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())) |
BottomNavigationBar |
底部导航栏 |
BottomNavigationBar(items: [...]) |
Drawer |
侧边菜单 |
Drawer(child: ListView(...)) |
TabBar |
顶部 Tab 选项卡 |
TabBar(tabs: [...]) |
BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
],
)
7️⃣ 对话框 & 提示
组件 |
作用 |
示例 |
AlertDialog |
弹出对话框 |
showDialog(context: context, builder: (context) => AlertDialog(title: Text("提示"))) |
SnackBar |
底部提示 |
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("操作成功"))) |
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("提示"),
content: Text("确认要退出吗?"),
actions: [
TextButton(onPressed: () => Navigator.pop(context), child: Text("取消")),
TextButton(onPressed: () => print("确认"), child: Text("确定")),
],
);
},
);
✅ 总结
- 布局组件:
Container
、Padding
、Center
- 列表组件:
ListView
、GridView
- 文本 & 按钮:
Text
、ElevatedButton
- 图片 & 图标:
Image
、Icon
- 输入框 & 表单:
TextField
、Checkbox
- 导航 & 路由:
Navigator
、BottomNavigationBar
- 对话框 & 提示:
AlertDialog
、SnackBar
如果你需要更详细的示例代码,可以告诉我你的具体需求!🚀