案例概述

AppBar 是 Flutter 应用中最常见的顶部导航栏组件。它提供了丰富的自定义选项，包括标题、操作按钮、背景颜色、阴影等。本案例展示了如何创建各种高级 AppBar，包括自定义样式、搜索功能、渐变背景等。

核心概念

1. AppBar 基础

AppBar 是 Scaffold 的一部分，用于显示应用标题和操作按钮。

2. 自定义内容

可以在 AppBar 中放置任何 Widget，如搜索框、按钮等。

3. 样式定制

可以自定义 AppBar 的颜色、阴影、高度等。

代码详解

示例 1：基础 AppBar

class BasicAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('基础 AppBar'),
        elevation: 4,
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
        ],
      ),
      body: const Center(child: Text('AppBar 示例')),
    );
  }
}

代码解释： 这是最基础的 AppBar。title 显示标题，actions 显示操作按钮，elevation 控制阴影。

示例 2：自定义 AppBar

class CustomAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {},
        ),
        title: const Text('自定义 AppBar'),
        actions: [
          IconButton(icon: const Icon(Icons.settings), onPressed: () {}),
        ],
      ),
      body: const Center(child: Text('自定义 AppBar')),
    );
  }
}

代码解释： 这个示例展示了自定义 AppBar。leading 显示左侧按钮。

示例 3：搜索 AppBar

class SearchAppBarExample extends StatefulWidget {
  @override
  State<SearchAppBarExample> createState() => _SearchAppBarExampleState();
}

class _SearchAppBarExampleState extends State<SearchAppBarExample> {
  late TextEditingController _searchController;

  @override
  void initState() {
    super.initState();
    _searchController = TextEditingController();
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          controller: _searchController,
          decoration: const InputDecoration(
            hintText: '搜索...',
            border: InputBorder.none,
          ),
        ),
      ),
      body: const Center(child: Text('搜索 AppBar')),
    );
  }
}

代码解释： 这个示例展示了搜索 AppBar。在 title 中放置 TextField 实现搜索功能。

示例 4：渐变 AppBar

class GradientAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('渐变 AppBar'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.purple.shade100, Colors.pink.shade100],
            ),
          ),
        ),
      ),
      body: const Center(child: Text('渐变 AppBar')),
    );
  }
}

代码解释： 这个示例展示了渐变背景 AppBar。通过 flexibleSpace 添加渐变效果。

示例 5：浮动 AppBar

class FloatingAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('浮动 AppBar'),
        floating: true,
        snap: true,
      ),
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(title: Text('项目 $index'));
        },
      ),
    );
  }
}

代码解释： 这个示例展示了浮动 AppBar。floating: true 使 AppBar 在滚动时显示和隐藏。

高级话题

1. 动态/响应式设计

根据屏幕大小调整 AppBar。

2. 动画与过渡

自定义 AppBar 动画。

3. 搜索/过滤/排序

在 AppBar 中实现搜索。

4. 选择与批量操作

支持多选操作。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义 AppBar 样式。

9. 数据持久化/导出

保存 AppBar 状态。

10. 单元测试与集成测试

测试 AppBar 功能。

PC 端适配要点

• 根据屏幕宽度调整 AppBar 高度
• 支持键盘快捷键
• 提供清晰的操作按钮

实际应用场景

• 导航栏：显示应用标题和操作
• 搜索栏：实现搜索功能
• 工具栏：显示工具按钮
• 过滤栏：显示过滤选项

扩展建议

• 学习高级导航库
• 研究性能优化
• 探索自定义动画
• 集成主题库

总结

AppBar 是应用导航的核心组件。通过灵活使用 AppBar，可以创建各种导航效果。理解 AppBar 的自定义选项是关键。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net