Flutter 基础组件 Scaffold 详解

[1. 引言](#1. 引言)

[2. Scaffold 主要属性](#2. Scaffold 主要属性)

[2.1 基本结构](#2.1 基本结构)

[2.2 主要属性解析](#2.2 主要属性解析)

[3. Scaffold 组件示例](#3. Scaffold 组件示例)

[3.1 appBar（应用顶栏）](#3.1 appBar（应用顶栏）)

[3.2 body（主体内容）](#3.2 body（主体内容）)

[3.3 floatingActionButton（悬浮按钮）](#3.3 floatingActionButton（悬浮按钮）)

[3.4 drawer（左侧抽屉）](#3.4 drawer（左侧抽屉）)

[3.5 bottomNavigationBar（底部导航栏）](#3.5 bottomNavigationBar（底部导航栏）)

[4. 结论](#4. 结论)

1. 引言

Scaffold 主要在 MaterialApp 主题下使用，它是实现Material Design基本视觉布局结构的Widget，它为应用提供了一个可定制的结构，包括 AppBar（应用栏） 、Drawer（侧边栏） 、FloatingActionButton（浮动按钮） 、BottomNavigationBar（底部导航栏） 等。本文将详细解析 Scaffold 的功能和使用方法。

2. Scaffold 主要属性

2.1 基本结构

Scaffold 组件的基本结构如下：

Dart 复制代码

import 'package:flutter/material.dart';

class ScScaffoldPage extends StatefulWidget {
  const ScScaffoldPage({super.key});

  @override
  State<ScScaffoldPage> createState() => _ScScaffoldPageState();
}

class _ScScaffoldPageState extends State<ScScaffoldPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('Scaffold 示例')
      ),
      body: Center(child: Text('Hello, Flutter!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle_rounded), label: '我的'),
        ],
      ),
    );
  }
}

2.2 主要属性解析

属性	说明
`appBar`	顶部应用栏，通常使用 `AppBar` 组件
`body`	主体内容区域
`floatingActionButton`	浮动操作按钮（FAB）
`drawer`	侧边抽屉菜单
`bottomNavigationBar`	底部导航栏
`backgroundColor`	背景颜色
`resizeToAvoidBottomInset`	控制键盘弹出时是否调整 `body` 高度

3. Scaffold 组件示例

3.1 appBar（应用顶栏）

类型：AppBar
功能：显示页面标题、导航按钮和操作项
代码示例：

Dart 复制代码

appBar: AppBar(
  title: Text('首页'),
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
    IconButton(icon: Icon(Icons.settings), onPressed: () {})
  ],
)

3.2 body（主体内容）

类型：Widget
功能：承载页面主要内容区域
最佳实践 ：通常使用 Container、ListView 或 Column 等布局组件包裹内容

3.3 floatingActionButton（悬浮按钮）

类型：FloatingActionButton
功能：执行主要操作（如新建、发布等）
定位控制 ：通过 floatingActionButtonLocation 调整位置

Dart 复制代码

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  tooltip: '新建',
)

3.4 drawer（左侧抽屉）

类型：Drawer
功能：侧滑显示导航菜单
打开方式：手指从左侧边缘右滑或点击 AppBar 导航图标

Dart 复制代码

drawer: Drawer(
  child: ListView(
    children: [
      ListTile(title: Text('菜单项1'), onTap: () {}),
      ListTile(title: Text('菜单项2'), onTap: () {})
    ],
  ),
)

3.5 bottomNavigationBar（底部导航栏）

类型：BottomNavigationBar
功能：实现多页面切换导航

Dart 复制代码

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的')
  ],
  currentIndex: _selectedIndex,
  onTap: (index) => setState(() => _selectedIndex = index),
)

4. 结论

Scaffold 是 Flutter 布局的核心组件，为应用提供了标准的 UI 结构。合理使用 Scaffold 及其属性，可以快速构建常见的应用界面。

Flutter 基础组件 Scaffold 详解

1. 引言

2. Scaffold 主要属性

2.1 基本结构

2.2 主要属性解析

3. Scaffold 组件示例

3.1 appBar（应用顶栏）

3.2 body（主体内容）

3.3 floatingActionButton（悬浮按钮）

3.4 drawer（左侧抽屉）

3.5 bottomNavigationBar（底部导航栏）

4. 结论

相关推荐