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
如果你需要更详细的示例代码，可以告诉我你的具体需求！🚀
