flutter如何自定义顶部导航栏

在Flutter中如何自定义顶部导航栏？我想实现一个带有渐变背景和自定义按钮的导航栏，但不知道该怎么修改AppBar的默认样式。有没有完整的代码示例可以参考？最好能详细说明如何设置高度、背景色、标题样式以及添加左右图标按钮的方法。

2 回复

在Flutter中，自定义顶部导航栏可使用AppBar组件。通过AppBar的leading、title、actions等属性自定义图标、标题和操作按钮。如需完全自定义，可替换为PreferredSize组件或自定义Widget。

更多关于flutter如何自定义顶部导航栏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中自定义顶部导航栏有多种方式，以下是常用的方法：

1. 使用 AppBar 组件自定义

AppBar(
  backgroundColor: Colors.blue, // 背景色
  elevation: 0, // 阴影高度
  title: Text(
    '自定义标题',
    style: TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
  ),
  leading: IconButton(
    icon: Icon(Icons.menu, color: Colors.white),
    onPressed: () {
      // 菜单按钮点击事件
    },
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search, color: Colors.white),
      onPressed: () {
        // 搜索按钮点击事件
      },
    ),
    IconButton(
      icon: Icon(Icons.notifications, color: Colors.white),
      onPressed: () {
        // 通知按钮点击事件
      },
    ),
  ],
)

2. 使用 PreferredSize 完全自定义

PreferredSize(
  preferredSize: Size.fromHeight(60),
  child: Container(
    color: Colors.blue,
    child: SafeArea(
      child: Row(
        children: [
          IconButton(
            icon: Icon(Icons.arrow_back, color: Colors.white),
            onPressed: () => Navigator.pop(context),
          ),
          Expanded(
            child: Text(
              '自定义导航栏',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.more_vert, color: Colors.white),
            onPressed: () {},
          ),
        ],
      ),
    ),
  ),
)

3. 使用 SliverAppBar（可伸缩导航栏）

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('可伸缩导航栏'),
        background: Image.network(
          '图片URL',
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 其他 Sliver 组件
  ],
)

4. 自定义渐变导航栏

AppBar(
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.purple],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
  title: Text('渐变导航栏'),
  elevation: 0,
)

主要自定义属性说明：

  • backgroundColor: 背景颜色
  • elevation: 阴影高度
  • title: 标题组件
  • leading: 左侧组件（通常是返回按钮）
  • actions: 右侧操作按钮列表
  • flexibleSpace: 可伸缩区域
  • bottom: 底部组件（如 TabBar）

选择哪种方式取决于你的具体需求：

  • 简单自定义：使用 AppBar
  • 完全自定义布局：使用 PreferredSize
  • 需要伸缩效果：使用 SliverAppBar
回到顶部