Flutter 常用组件大全

发布于:2025-03-15 ⋅ 阅读:(11) ⋅ 点赞:(0)

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("确定")),
      ],
    );
  },
);

✅ 总结

  • 布局组件ContainerPaddingCenter
  • 列表组件ListViewGridView
  • 文本 & 按钮TextElevatedButton
  • 图片 & 图标ImageIcon
  • 输入框 & 表单TextFieldCheckbox
  • 导航 & 路由NavigatorBottomNavigationBar
  • 对话框 & 提示AlertDialogSnackBar

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


网站公告

今日签到

点亮在社区的每一天
去签到