Flutter：如何为Scaffold中Persistent Footer Buttons的Divider添加Elevation和Box Shadow

默认情况下，Scaffold的persistentFooterButtons会自动生成一条普通Divider，但它不支持直接设置elevation或阴影效果。要实现需求，你需要自定义底部区域布局，替代默认的内置逻辑，具体实现步骤如下：

1. 替换默认的persistentFooterButtons #

放弃使用Scaffold自带的persistentFooterButtons参数，改用bottomNavigationBar或body底部的自定义布局来构建底部按钮区域，这样能完全控制分隔线的样式。

2. 自定义带阴影的分隔线 #

可以通过两种方式实现带阴影的分隔线：

方法一：用Container + BoxDecoration实现阴影 #

通过BoxDecoration的boxShadow属性手动配置阴影参数：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.4),
        spreadRadius: 1,
        blurRadius: 6,
        offset: const Offset(0, 2), // 阴影向下偏移
      ),
    ],
  ),
  child: const Divider(height: 1, color: Colors.grey),
)

方法二：用Material组件的Elevation属性 #

利用Material组件的elevation自动生成阴影，同时包裹Divider：

Material(
  elevation: 3,
  child: const Divider(height: 1, color: Colors.grey[300]),
)

3. 组合分隔线与按钮组 #

将自定义分隔线和按钮组放在Column中，作为bottomNavigationBar的值传入Scaffold，保证布局与默认persistentFooterButtons一致：

完整示例代码：

Scaffold(
  appBar: AppBar(title: const Text('自定义底部按钮分隔线')),
  body: const Center(child: Text('页面主体内容')),
  bottomNavigationBar: Column(
    mainAxisSize: MainAxisSize.min, // 仅占用必要高度
    children: [
      // 带阴影的自定义分隔线
      Material(
        elevation: 4,
        child: const Divider(height: 1, color: Colors.grey[300]),
      ),
      // 底部按钮组，对齐方式与默认一致
      ButtonBar(
        alignment: MainAxisAlignment.end,
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        children: [
          TextButton(onPressed: () {}, child: const Text('取消')),
          ElevatedButton(onPressed: () {}, child: const Text('确认')),
        ],
      ),
    ],
  ),
)

4. 细节优化 #

• 若需和默认persistentFooterButtons的内边距完全匹配，可给ButtonBar添加padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4)
• 阴影的颜色、模糊度、偏移量可根据设计需求调整BoxShadow的参数
• 若不想使用bottomNavigationBar，也可在body底部用Align(alignment: Alignment.bottomCenter, child: ...)放置布局，但需注意添加SingleChildScrollView避免键盘遮挡内容

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