目录
3.3 floatingActionButton（悬浮按钮）
1. 引言
Scaffold 主要在 MaterialApp 主题下使用，它是实现Material Design基本视觉布局结构的Widget，它为应用提供了一个可定制的结构，包括 AppBar（应用栏）、Drawer（侧边栏）、FloatingActionButton（浮动按钮）、BottomNavigationBar（底部导航栏） 等。本文将详细解析 Scaffold 的功能和使用方法。
2. Scaffold 主要属性
2.1 基本结构
Scaffold 组件的基本结构如下：
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功能：显示页面标题、导航按钮和操作项
代码示例：
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调整位置
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
tooltip: '新建',
)3.4 drawer（左侧抽屉）
类型：
Drawer功能：侧滑显示导航菜单
打开方式：手指从左侧边缘右滑或点击 AppBar 导航图标
drawer: Drawer(
child: ListView(
children: [
ListTile(title: Text('菜单项1'), onTap: () {}),
ListTile(title: Text('菜单项2'), onTap: () {})
],
),
)3.5 bottomNavigationBar（底部导航栏）
类型：
BottomNavigationBar功能：实现多页面切换导航
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 Widget 体系结构解析-CSDN博客文章浏览阅读709次，点赞23次，收藏15次。Flutter 是 Google 开发的一款跨平台 UI 框架，它基于 Dart 语言，能够在 iOS、Android、Web、桌面等多个平台运行。Flutter 采用 声明式 UI，并依赖其强大的 Widget 体系来构建界面。本文将深入解析 Flutter 的 Widget 体系结构，帮助开发者理解其运行原理，并掌握构建高效 UI 的方法。https://shuaici.blog.csdn.net/article/details/146066531Flutter：StatelessWidget vs StatefulWidget 深度解析-CSDN博客文章浏览阅读629次，点赞44次，收藏29次。在 Flutter 中，所有的 UI 组件都是由 Widget 组成，而 Widget 又分为两大类：StatelessWidget（无状态组件） 和 StatefulWidget（有状态组件）。StatelessWidget 适用于不会随时间变化的 UI，如文本、图标等静态内容；StatefulWidget 则适用于需要动态更新的 UI，如用户交互、动画、网络请求等。本文将深入解析这两种 Widget 的本质区别、适用场景以及生命周期，帮助开发者更好地理解 Flutter 组件的运行机制。
https://shuaici.blog.csdn.net/article/details/146066840