顶部导航栏AppBar

大前端 flutter

发布时间 : 2025-09-12 00:00

字数:671 阅读 :

什么是 AppBar
入门案例
常用属性
默认的leading

什么是 AppBar

AppBar 是一个 顶部应用栏（也叫标题栏 / 导航栏），常见于每个页面的顶部位置，通常包含：

页面标题
返回按钮（在有路由堆栈时自动提供）
操作菜单（Action 按钮）
Tab 切换栏（TabBar）

它是 Material Design 风格中非常核心的 UI 组件之一，通常和 Scaffold 搭配使用。

入门案例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('首页'), // 中间标题
          centerTitle: true, // 是否居中标题
          backgroundColor: Colors.blue, // 背景颜色
          leading: IconButton(
            // 左侧图标按钮
            icon: const Icon(Icons.menu),
            onPressed: () {},
          ),
          actions: [
            // 右侧操作按钮
            IconButton(icon: const Icon(Icons.search), onPressed: () {}),
            IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
          ],
        ),
        body: const Center(child: Text('内容区域')),
      ),
    );
  }
}

常用属性

属性名	类型	说明
`title`	`Widget`	中间标题
`centerTitle`	`bool`	是否居中标题（默认左对齐，默认居中）
`backgroundColor`	`Color`	背景颜色
`leading`	`Widget`	左侧小部件（默认是返回箭头）
`actions`	`List<Widget>`	右侧小部件（通常是图标按钮）
`elevation`	`double`	阴影高度
`bottom`	`PreferredSizeWidget`	底部区域（常用来放）
`flexibleSpace`	`Widget`	背景层，可放置渐变、图片等自定义背景
`toolbarHeight`	`double`	工具栏高度
`systemOverlayStyle`	`SystemUiOverlayStyle`	状态栏样式（控制电池图标、时间的颜色）

默认的leading

Flutter 的 AppBar 默认的 leading 就是一个自动返回按钮（即左上角的返回箭头），但它 只会在满足特定条件时才显示。

默认 `leading` 的行为规则

如果你在 Scaffold 中放置了 AppBar，且当前页面不是导航栈中的第一个页面（也就是通过 Navigator.push 打开的页面），
并且你没有手动指定 leading 属性，
那么 AppBar 就会自动显示一个返回箭头按钮，点击它会调用：
```
Navigator.maybePop(context)
```
也就是会尝试关闭当前页面，返回上一个页面。

简单示例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const Page1());
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('第一页')),
      body: Center(
        child: ElevatedButton(
          child: const Text('跳转到第二页'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const Page2()),
            );
          },
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('第二页')),
      body: const Center(child: Text('这里会自动出现返回箭头')),
    );
  }
}