Flutter如何设置Slidable组件展开宽度容纳所有操作按钮

问题根源 #

ActionPane组件默认携带extentRatio配置，默认值为0.5，限制滑动操作区的最大展开宽度仅为绑定子组件宽度的一半，因此3个CustomSlidableAction没有足够空间完整展示，出现截图里的挤压效果。

修复方式 #

给ActionPane显式传入extentRatio参数，根据操作按钮的实际总宽度调整取值即可，取值范围为0_{1，3个按钮的场景通常设置为0.7}0.8就能完整容纳所有操作项。
修改后的核心代码如下：

return Slidable(
  endActionPane: ActionPane(
    motion: const ScrollMotion(),
    // 新增该行配置，调整展开宽度占比
    extentRatio: 0.75,
    children: [
      // 原有3个CustomSlidableAction保持不变即可
      CustomSlidableAction(
        onPressed: (_) {
          //make messages unread
        },
        backgroundColor: Palette.green,
        padding: EdgeInsets.symmetric(
          horizontal: 24.w,
          vertical: 11.h,
        ),
        child: Column(
          children: [
            SizedBox(
              height: 25.h,
              width: 25.w,
              child: SvgPicture.asset(
                'assets/icons/Chats.svg',
                color: Palette.white,
              ),
            ),
            SizedBox(
              height: 6.h,
            ),
            Text(
              'unread'.tr(),
              style: TextStyles.poppins14400.copyWith(
                color: Palette.white,
              ),
            ),
          ],
        ),
      ),
      CustomSlidableAction(
        onPressed: (_) {
          //pin chat
        },
        backgroundColor: Palette.green,
        padding: EdgeInsets.symmetric(
          horizontal: 24.w,
          vertical: 11.h,
        ),
        child: Column(
          children: [
            SizedBox(
              height: 25.h,
              width: 25.w,
              child: SvgPicture.asset(
                'assets/icons/pin.svg',
                color: Palette.white,
              ),
            ),
            SizedBox(
              height: 6.h,
            ),
            Text(
              'pin'.tr(),
              style: TextStyles.poppins14400.copyWith(
                color: Palette.white,
              ),
            ),
          ],
        ),
      ),
      CustomSlidableAction(
        onPressed: (_) {
          //more actions
        },
        backgroundColor: Palette.green,
        padding: EdgeInsets.symmetric(
          horizontal: 24.w,
          vertical: 11.h,
        ),
        child: Column(
          children: [
            SizedBox(
              height: 25.h,
              width: 25.w,
              child: SvgPicture.asset(
                'assets/icons/more.svg',
                color: Palette.white,
              ),
            ),
            SizedBox(
              height: 6.h,
            ),
            Text(
              'more'.tr(),
              style: TextStyles.poppins14400.copyWith(
                color: Palette.white,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
  child: child,
);

配置说明 #

• extentRatio代表操作区展开宽度占Slidable绑定子组件总宽度的比例，不要设置为大于1的数值，否则会触发布局溢出报错。
• 可以根据项目里按钮的水平padding、文字/图标宽度微调这个数值，达到最合适的展示效果。

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