Flutter技术问询：如何修改CupertinoActionSheet的背景色？

在调整CupertinoActionSheet背景色时，直接用CupertinoTheme或MaterialTheme经常会踩坑，试试下面两种可行方案：

方法1：正确覆盖CupertinoTheme的barBackgroundColor #

CupertinoActionSheet的背景色默认继承自主题的barBackgroundColor，但必须在它外层单独包裹CupertinoTheme并覆盖该属性，同时保留原有主题的其他配置，避免影响其他组件样式：

@override
Widget build(BuildContext context) {
  return CupertinoTheme(
    data: CupertinoTheme.of(context).copyWith(
      barBackgroundColor: CustomColors.yourTargetColor, // 替换成你需要的背景色
    ),
    child: CupertinoActionSheet(
      title: Text(
        title ?? "",
        style: CustomTextStyle.titleBoldStyleDarkGrey,
      ),
      message: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: const BoxDecoration(
          color: CustomColors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
          ),
        ),
        child: child,
      ),
      actions: [
        CupertinoActionSheetAction(
          onPressed: () => PageNavigationService.backScreen(),
          child: const Text('CONFIRM', style: CustomTextStyle.mediumBoldStylePrimary),
        ),
        CupertinoActionSheetAction(
          onPressed: () => PageNavigationService.backScreen(),
          child: const Text('CLOSE', style: CustomTextStyle.mediumBoldStyleDarkGrey),
        ),
      ],
    ),
  );
}

方法2：用容器完全自定义背景 #

如果主题覆盖的方法仍不生效，直接给CupertinoActionSheet套一层自定义容器，手动设置背景色和圆角，模拟原生样式：

@override
Widget build(BuildContext context) {
  return Container(
    color: CustomColors.transparent, // 外层留透明，不遮挡底部蒙层
    child: Container(
      decoration: BoxDecoration(
        color: CustomColors.yourTargetColor,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      child: CupertinoActionSheet(
        title: Text(title ?? "", style: CustomTextStyle.titleBoldStyleDarkGrey),
        message: Container(
          padding: const EdgeInsets.all(16),
          color: CustomColors.white,
          child: child,
        ),
        actions: [
          CupertinoActionSheetAction(
            onPressed: () => PageNavigationService.backScreen(),
            child: const Text('CONFIRM', style: CustomTextStyle.mediumBoldStylePrimary),
          ),
          CupertinoActionSheetAction(
            onPressed: () => PageNavigationService.backScreen(),
            child: const Text('CLOSE', style: CustomTextStyle.mediumBoldStyleDarkGrey),
          ),
        ],
      ),
    ),
  );
}

额外提示 #

• 如果你设置了message的独立背景色，要注意和整体背景色的衔接，避免出现突兀的色块分割。
• 如果需要调整CupertinoActionSheetAction的背景色，可以给每个Action单独套Container，或者通过主题的primaryColor等属性配合isDefaultAction来调整。

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