Flutter 常用组件大全

Flutter 常用组件大全

Flutter 提供了丰富的组件来构建 UI，以下是常见的组件，按 功能类别 分类。

1️⃣ 基础布局组件

Padding(
  padding: EdgeInsets.all(20),
  child: Center(child: Text("Hello, Flutter!")),
)

2️⃣ 列表 & 网格

ListView(
  children: [
    ListTile(title: Text("Item 1")),
    ListTile(title: Text("Item 2")),
  ],
)

3️⃣ 文字 & 按钮

ElevatedButton(
  onPressed: () {
    print("按钮点击");
  },
  child: Text("点击我"),
)

4️⃣ 图片 & 图标

Image.network(
  "https://picsum.photos/200",
  width: 100,
  height: 100,
)

5️⃣ 输入框 & 表单

TextField(
  decoration: InputDecoration(
    labelText: "输入用户名",
    border: OutlineInputBorder(),
  ),
)

6️⃣ 导航 & 路由

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
  ],
)

7️⃣ 对话框 & 提示

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

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