Flutter实现固定列表底部的半透明圆角容器带ExpandableFAB

核心实现思路 #

用Stack组件嵌套训练列表和底部操作容器，通过Positioned精准固定容器位置，配合Container的装饰属性实现半透明圆角效果。

1. 调整布局结构 #

把训练列表和底部容器放入Stack，列表占满全屏，底部容器通过Positioned定位在列表底部上方指定高度：

Stack(
  children: [
    // 训练列表，预留底部空间避免内容被遮挡
    ListView.builder(
      padding: EdgeInsets.only(bottom: 120), // 数值需大于容器高度+底部间距
      itemCount: _trainingItems.length,
      itemBuilder: (context, index) => TrainingItemWidget(item: _trainingItems[index]),
    ),
    // 固定在底部的操作容器
    Positioned(
      left: 16,
      right: 16,
      bottom: 40, // 距离页面底部的指定高度
      child: _buildBottomActionContainer(),
    ),
  ],
)

2. 构建半透明圆角容器 #

实现带Start按钮和ExpandableFAB的半透明容器，添加阴影增强视觉层次：

Widget _buildBottomActionContainer() {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
    decoration: BoxDecoration(
      color: Colors.white.withOpacity(0.85), // 半透明白色，可根据主题调整
      borderRadius: BorderRadius.circular(24),
      boxShadow: [
        BoxShadow(
          color: Colors.black12,
          blurRadius: 8,
          offset: Offset(0, 4),
        ),
      ],
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ElevatedButton(
          onPressed: () { /* 填入开始训练的逻辑 */ },
          child: Text('Start'),
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
            padding: EdgeInsets.symmetric(horizontal: 32, vertical: 12),
          ),
        ),
        // 你的ExpandableFAB组件
        ExpandableFab(
          distance: 112.0,
          children: [
            ActionButton(
              onPressed: () {},
              icon: const Icon(Icons.access_time),
            ),
            ActionButton(
              onPressed: () {},
              icon: const Icon(Icons.share),
            ),
          ],
        ),
      ],
    ),
  );
}

3. 适配细节处理 #

• 如果页面有系统底部导航栏，需要加上系统底部内边距，避免容器被遮挡：

bottom: 40 + MediaQuery.of(context).padding.bottom,

• 列表的padding.bottom要足够大，保证最后一条训练项不会被底部容器覆盖，建议数值为容器高度 + Positioned.bottom值 + 20（预留额外间距）。

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