如何在CupertinoActionSheet底部实现双按钮布局？

直接在cancelButton中嵌套Row和CupertinoActionSheetAction会显示异常，原因是CupertinoActionSheetAction默认会填充父容器宽度，其样式是为单列场景设计的。要实现双按钮平分宽度的目标，需要自定义取消区域布局，用CupertinoButton模拟系统按钮样式，代码如下：

showCupertinoModalPopup(
  context: context,
  builder: (context) {
    return CupertinoActionSheet(
      actions: [],
      title: const Text("Sampark Tag"),
      message: const CupertinoSearchTextField(),
      cancelButton: Container(
        margin: const EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
          color: CupertinoTheme.of(context).scaffoldBackgroundColor,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            // 左按钮：平分宽度
            Expanded(
              child: CupertinoButton(
                padding: const EdgeInsets.symmetric(vertical: 16),
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text(
                  "Cancel",
                  style: TextStyle(color: CupertinoColors.systemBlue),
                ),
              ),
            ),
            // 按钮间分割线
            Container(
              width: 1,
              height: 44,
              color: CupertinoColors.separator,
            ),
            // 右按钮：平分宽度
            Expanded(
              child: CupertinoButton(
                padding: const EdgeInsets.symmetric(vertical: 16),
                onPressed: () {
                  // 执行对应逻辑后关闭弹窗
                  Navigator.pop(context);
                },
                child: const Text(
                  "Confirm",
                  style: TextStyle(color: CupertinoColors.systemBlue),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  },
);

关键实现细节： #

• 用Container包裹双按钮区域，设置与系统一致的背景色和圆角，匹配CupertinoActionSheet的视觉风格
• 两个CupertinoButton通过Expanded平分父容器宽度
• 中间添加垂直分割线，还原系统双按钮的视觉分隔效果
• 按钮内边距和文字样式对齐系统默认按钮，保证风格统一

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