← 返回首页

🎨 UI 组件详解

Flutter 提供了丰富的 UI 组件，用于构建美观的用户界面。本页面将详细介绍常用的 UI 组件。

📇 Card

Card 是一个材质设计的卡片组件，用于展示相关内容，通常包含标题、文本和图片。

渲染预览

卡片标题

这是卡片的内容部分

基本用法

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '卡片标题',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 8),
        Text('这是卡片的内容部分'),
      ],
    ),
  ),
)

常用属性

属性 类型 说明
child Widget 卡片内容
elevation double 阴影深度
shape ShapeBorder 卡片形状
color Color 卡片背景色
margin EdgeInsetsGeometry 外边距
💡 提示：Card 常用于列表项、信息展示块等场景，可以提升界面的层次感和美观度。

🏷️ Chip

Chip 是一个小型的信息标签，用于展示相关信息，如标签、选项、状态等。

渲染预览

A 标签文本 ✕ B 标签二

基本用法

Chip(
  label: Text('标签文本'),
  avatar: CircleAvatar(
    backgroundColor: Colors.blue.shade700,
    child: Text('A'),
  ),
  deleteIcon: Icon(Icons.close),
  onDeleted: () {
    print('删除标签');
  },
)

常用属性

属性 类型 说明
label Widget 标签文本
avatar Widget 头像
deleteIcon Widget 删除图标
onDeleted Function 删除回调
backgroundColor Color 背景色
💡 提示：Chip 常用于展示标签、过滤器选项、联系人信息等，支持删除操作。

➖ Divider

Divider 是一个水平分隔线，用于在内容之间创建视觉分隔。

渲染预览

第一部分内容

第二部分内容

基本用法

Column(
  children: [
    Text('第一部分内容'),
    Divider(
      height: 20,
      thickness: 2,
      color: Colors.grey,
    ),
    Text('第二部分内容'),
  ],
)

常用属性

属性 类型 说明
height double 分隔线高度（包含空白）
thickness double 分隔线粗细
color Color 分隔线颜色
indent double 起始缩进
endIndent double 结束缩进
💡 提示：Divider 常用于在列表项、章节标题之间创建分隔，提升可读性。

↔️ Spacer

Spacer 是一个灵活的空白空间组件，用于在 Flex 布局中占据剩余空间。

渲染预览

Row 中的 Spacer：

左侧内容
Spacer
右侧内容

Column 中的 Spacer：

顶部内容
Spacer
底部内容

基本用法

Row(
  children: [
    Text('左侧内容'),
    Spacer(),
    Text('右侧内容'),
  ],
)

// 在 Column 中使用
Column(
  children: [
    Text('顶部内容'),
    Spacer(),
    Text('底部内容'),
  ],
)

常用属性

属性 类型 说明
flex int 弹性系数，默认为 1
💡 提示：Spacer 只能在 Flex 容器（Row、Column、Flex）中使用，用于创建灵活的空白区域。

📱 AppBar

AppBar 是应用栏组件，通常位于页面顶部，包含标题、操作按钮等。

渲染预览

☰
应用标题
🔍
⚙️

页面内容

基本用法

Scaffold(
  appBar: AppBar(
    title: Text('应用标题'),
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {
        print('打开菜单');
      },
    ),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          print('搜索');
        },
      ),
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {
          print('设置');
        },
      ),
    ],
    backgroundColor: Colors.blue,
    elevation: 4,
  ),
  body: Center(
    child: Text('页面内容'),
  ),
)

常用属性

属性 类型 说明
title Widget 标题
leading Widget 左侧按钮
actions List 右侧操作按钮列表
backgroundColor Color 背景色
elevation double 阴影深度
centerTitle bool 标题是否居中
💡 提示：AppBar 通常与 Scaffold 配合使用，提供导航和操作功能。

⭐ FloatingActionButton

FloatingActionButton (FAB) 是一个浮动操作按钮，用于执行主要的操作。

渲染预览

页面内容

+

基本用法

Scaffold(
  appBar: AppBar(
    title: Text('浮动按钮示例'),
  ),
  body: Center(
    child: Text('页面内容'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('点击浮动按钮');
    },
    child: Icon(Icons.add),
    backgroundColor: Colors.blue,
    tooltip: '添加',
  ),
)

常用属性

属性 类型 说明
onPressed Function 点击回调
child Widget 按钮内容
backgroundColor Color 背景色
tooltip String 提示文本
elevation double 阴影深度
heroTag Object Hero 动画标签
💡 提示：FAB 通常用于执行页面最常用的操作，如添加、编辑、删除等。
← 返回首页