Flutter中长按Avatar触发CupertinoContextMenu时出现白色方块问题求助

我在Flutter项目中使用CupertinoContextMenu包裹CircleAvatar组件，长按该头像时，其周围会出现白色方块。尝试多种方法均无法解决，也未找到同类问题案例，寻求解决帮助。

问题表现：长按触发上下文菜单时，圆形头像的边缘会透出白色方形背景，菜单展开后该白色方块依然存在。

相关代码：

import 'package:countee/components/my_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class SettingsPage extends StatefulWidget {
  const SettingsPage({Key? key}) : super(key: key);

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        alignment: Alignment.center,
        child: MyCard(
          theHeight: 600.0,
          theWidth: 325.0,
          theChild: Column(
            children: [
              Center(
                child: Column(
                  children: [
                    Center(
                      child: CupertinoContextMenu(
                        actions: [
                          CupertinoContextMenuAction(
                              trailingIcon: CupertinoIcons.arrow_2_circlepath_circle_fill,
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text("Změnit")),
                          CupertinoContextMenuAction(
                              isDestructiveAction: true,
                              trailingIcon: CupertinoIcons.delete,
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text(
                                "Odtranit",
                                style: TextStyle(
                                    color: Colors.red,
                                    fontWeight: FontWeight.bold),
                              )),
                        ],
                        child: const CircleAvatar(
                          backgroundColor: Colors.transparent,
                          radius: 60,
                          backgroundImage: AssetImage("assets/images/avatar.jpg"),
                        ),
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Text(
                      "Jan",
                      style: TextStyle(color: Colors.white),
                    ),
                    const Text(
                      "Černohous",
                      style: TextStyle(color: Colors.white),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个问题是因为CupertinoContextMenu在触发时会给子组件添加默认的白色方形背景，而你的CircleAvatar设置了backgroundColor: Colors.transparent，导致这个默认背景透了出来。可以通过以下两种方式解决：

方法一：设置CupertinoContextMenu的背景色为透明 #

直接给CupertinoContextMenu添加backgroundColor属性，设置为透明或者和父容器背景一致：

CupertinoContextMenu(
  backgroundColor: Colors.transparent, // 新增这一行
  actions: [...],
  child: const CircleAvatar(...),
)

方法二：用ClipOval包裹CircleAvatar #

通过ClipOval裁剪掉超出圆形的部分，避免方形背景透出：

CupertinoContextMenu(
  actions: [...],
  child: ClipOval( // 新增包裹层
    child: const CircleAvatar(
      backgroundColor: Colors.transparent,
      radius: 60,
      backgroundImage: AssetImage("assets/images/avatar.jpg"),
    ),
  ),
)

两种方法都能解决白色方块的问题，推荐第一种更直接的方式。

内容的提问来源于stack exchange，提问作者Jan Černohous