如何在Flutter中实现网页风格的顶部导航栏？

方法一：自定义AppBar（快速实现） #

AppBar是Flutter默认的顶部组件，通过自定义内部布局，可快速改造成Web风格的导航栏：

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    elevation: 1,
    title: Row(
      children: [
        // 左侧Logo
        const Text('Discord Bot Dashboard', style: TextStyle(color: Colors.black)),
        const SizedBox(width: 40),
        // 导航项
        TextButton(
          onPressed: () => // 跳转到Home页面逻辑
          child: const Text('Home', style: TextStyle(color: Colors.black)),
        ),
        TextButton(
          onPressed: () => // 跳转到Features页面逻辑
          child: const Text('Features', style: TextStyle(color: Colors.black)),
        ),
        TextButton(
          onPressed: () => // 跳转到Dashboard页面逻辑
          child: const Text('Dashboard', style: TextStyle(color: Colors.black)),
        ),
      ],
    ),
    // 右侧操作区
    actions: [
      TextButton(onPressed: () {}, child: const Text('Login')),
      const SizedBox(width: 20),
    ],
  ),
  body: // 页面主体内容
);

这种方式自带Material交互反馈，通过调整backgroundColor、elevation等属性，就能模拟网站导航栏的扁平风格。

方法二：完全自定义顶部导航栏（高度灵活） #

如果需要更精细的样式控制（比如固定高度、自定义阴影、hover效果），可以直接在Scaffold的body顶部添加独立容器：

Scaffold(
  body: Column(
    children: [
      // 自定义导航栏
      Container(
        height: 60,
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.2),
              spreadRadius: 1,
              blurRadius: 3,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 左侧Logo
              const Text('Discord Bot', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              // 导航项组
              Row(
                children: [
                  InkWell(
                    onTap: () => // 跳转Home逻辑
                    child: const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: Text('Home', style: TextStyle(fontSize: 16)),
                    ),
                    hoverColor: Colors.grey.withOpacity(0.1),
                  ),
                  InkWell(
                    onTap: () => // 跳转Features逻辑
                    child: const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: Text('Features', style: TextStyle(fontSize: 16)),
                    ),
                    hoverColor: Colors.grey.withOpacity(0.1),
                  ),
                  InkWell(
                    onTap: () => // 跳转Dashboard逻辑
                    child: const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: Text('Dashboard', style: TextStyle(fontSize: 16)),
                    ),
                    hoverColor: Colors.grey.withOpacity(0.1),
                  ),
                ],
              ),
              // 右侧用户操作
              TextButton(onPressed: () {}, child: const Text('登录')),
            ],
          ),
        ),
      ),
      // 页面主体内容区
      Expanded(
        child: // 你的页面路由内容
      ),
    ],
  ),
);

这种方式完全摆脱AppBar的限制，能实现和普通网站完全一致的导航栏样式，包括hover效果、自定义布局等，适配Web端场景。

方法三：响应式适配（兼顾移动端） #

因为你后续要开发移动端应用，可以结合LayoutBuilder实现跨端适配：

• Web/平板端：显示完整顶部导航
• 移动端：隐藏导航项，改用抽屉（Drawer）

示例代码片段：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 768) {
      // 桌面/平板端：显示完整导航项
      return Row(/* 导航项布局 */);
    } else {
      // 移动端：显示菜单按钮，点击打开Drawer
      return IconButton(
        icon: const Icon(Icons.menu),
        onPressed: () => Scaffold.of(context).openDrawer(),
      );
    }
  },
)

一套代码即可同时适配Web和移动端，符合你的多端开发需求。

内容的提问来源于stack exchange，提问作者pew