Flutter开发：如何将AppBar放置或停靠在页面底部？

当然可以！在Flutter中实现底部AppBar是完全没问题的，我给你分享两种最实用的实现方式，你可以根据自己的场景选择：

方法一：利用Scaffold的bottomNavigationBar属性 #

Scaffold的bottomNavigationBar并不局限于放BottomNavigationBar，它可以接受任意Widget，所以我们直接把AppBar组件放进去就行——这种方式最省心，还能保留Scaffold的其他特性（比如侧边栏Drawer、悬浮按钮FloatingActionButton）。

示例代码：

Scaffold(
  appBar: AppBar(
    title: const Text('顶部标题'), // 不需要顶部AppBar的话直接删掉这一行
  ),
  body: const Center(
    child: Text('页面主内容'),
  ),
  bottomNavigationBar: AppBar(
    title: const Text('底部AppBar'),
    backgroundColor: Colors.blueAccent,
    elevation: 4, // 保留阴影效果，和顶部AppBar视觉一致
    centerTitle: true,
    // 可以按需添加按钮，比如返回、设置等
    leading: IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () {},
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.settings),
        onPressed: () {},
      ),
    ],
  ),
)

方法二：用Column+Expanded自定义布局 #

如果你的页面不需要Scaffold的其他功能，或者想要更灵活的布局控制，可以用Column来实现：把主内容放在Expanded组件里占满剩余空间，底部直接放置AppBar即可。

示例代码：

Column(
  children: [
    Expanded(
      child: const Center(
        child: Text('页面主内容'),
      ),
    ),
    AppBar(
      title: const Text('底部AppBar'),
      backgroundColor: Colors.greenAccent,
      centerTitle: true,
      actions: [
        IconButton(
          icon: const Icon(Icons.share),
          onPressed: () {},
        ),
      ],
    ),
  ],
)

小提示 #

• 要是不需要顶部的AppBar，直接删掉Scaffold的appBar属性就行，底部的AppBar依然能正常工作。
• 可以根据需求调整AppBar的elevation、backgroundColor等属性，让它和你的App风格统一。

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