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. 结论

相关推荐

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 主要属性解析

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