Flutter 常用组件大全

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

如果你需要更详细的示例代码，可以告诉我你的具体需求！🚀