Flutter中如何让Slidable组件的操作容器与列表项容器高度一致

问题原因 #

高度不一致由两个核心问题导致：

• 列表项（Slidable的child）设置了margin: EdgeInsets.only(bottom: 30)，这个边距属于Slidable组件外部的间距，secondaryActions计算高度时只会匹配child本身的尺寸，不会包含这个margin
• flutter_slidable的secondaryActions默认有内置的上下对齐偏移，没有强制撑满高度的话，子组件会自动压缩高度

解决方案 #

直接修改MealWidget的代码即可，修改点如下：

1. 将原Slidable的child身上的底部外边距移到Slidable外层，保证Slidable本身高度和列表项高度完全对齐
2. 给secondaryActions的子组件外层加Center对齐，强制黑色Container撑满可容纳的高度
3. 给黑色Container加alignment: Alignment.center，保证内部红色圆形按钮居中显示

修改后的核心代码片段：

@override
Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  double height = size.height;
  double width = size.width;
  double height2 = height * 0.17;
  // 新增外层Container，存放原来的底部边距
  return Container(
    margin: const EdgeInsets.only(bottom: 30),
    child: Slidable(
      actionPane: SlidableDrawerActionPane(),
      actionExtentRatio: 0.25,
      secondaryActions: <Widget>[
        // 新增Center包裹，避免默认偏移压缩高度
        Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Container(
              height: height2,
              width: width * 0.3,
              // 新增对齐属性，让内部圆点居中
              alignment: Alignment.center,
              child: Container(
                // 注意你原来的height2*0.02尺寸过小，可根据需求调整大小
                height: height2 * 0.2,
                width: height2 * 0.2,
                decoration: const BoxDecoration(
                  color: Color(0xFFF54749), 
                  shape: BoxShape.circle
                ),
              ),
              decoration: BoxDecoration(
                color: const Color(0xFF100B18),
                borderRadius: BorderRadius.circular(20)
              ),
            ),
          ),
        ),
      ],
      child: Container(
        height: height2,
        width: width,
        // 移除原来的bottom:30的margin
        decoration: BoxDecoration(
          color: Colors.green, 
          borderRadius: BorderRadius.circular(20)
        ),
        // 后续原有布局代码保持不变即可
        child: Row(
          // 原有代码省略...
        ),
      ),
    ),
  );
}

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