Flutter中CupertinoContextMenu长按动画部分超出屏幕如何解决？

我在Flutter应用中为CupertinoListTile添加CupertinoContextMenu后，长按列表项时组件的一部分会超出屏幕范围。请问如何修复该问题，或者如何缩小缩放动画？

我的代码如下：

return CupertinoContextMenu(
  actions: [
    CupertinoContextMenuAction(
      child: const Text('Edit'),
      onPressed: () {
        //TODO: Handle the edit action
      },
    ),
    CupertinoContextMenuAction(
      child: const Text('Show'),
      onPressed: () {
        //TODO: Handle the show action
      },
    ),
  ],
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: CupertinoListTile(
      backgroundColor: CupertinoColors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      title: Text(event.name, style: const TextStyle(fontSize: 20),),
      subtitle: Text(event.formattedDate, style: const TextStyle(fontSize: 16),),
      trailing: const CupertinoListTileChevron(),
    ),
  ),
);

方法1：移除强制全屏的SizedBox #

你当前用SizedBox强制子组件占满屏幕宽度，而CupertinoContextMenu的默认缩放动画会放大子组件，直接导致超出屏幕。移除这个宽度设置即可：

return CupertinoContextMenu(
  actions: [
    CupertinoContextMenuAction(
      child: const Text('Edit'),
      onPressed: () {
        //TODO: Handle the edit action
      },
    ),
    CupertinoContextMenuAction(
      child: const Text('Show'),
      onPressed: () {
        //TODO: Handle the show action
      },
    ),
  ],
  // 直接用CupertinoListTile作为child，无需SizedBox
  child: CupertinoListTile(
    backgroundColor: CupertinoColors.white,
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
    title: Text(event.name, style: const TextStyle(fontSize: 20),),
    subtitle: Text(event.formattedDate, style: const TextStyle(fontSize: 16),),
    trailing: const CupertinoListTileChevron(),
  ),
);

方法2：自定义预览组件的缩放比例 #

如果需要保留原有布局，可通过previewBuilder自定义预览组件，手动缩小缩放比例：

return CupertinoContextMenu(
  actions: [
    CupertinoContextMenuAction(
      child: const Text('Edit'),
      onPressed: () {
        //TODO: Handle the edit action
      },
    ),
    CupertinoContextMenuAction(
      child: const Text('Show'),
      onPressed: () {
        //TODO: Handle the show action
      },
    ),
  ],
  previewBuilder: (context, animation, child) {
    // 用Transform.scale缩小预览，scale值可根据需求调整
    return Transform.scale(
      scale: 0.9,
      child: child,
    );
  },
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: CupertinoListTile(
      backgroundColor: CupertinoColors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      title: Text(event.name, style: const TextStyle(fontSize: 20),),
      subtitle: Text(event.formattedDate, style: const TextStyle(fontSize: 16),),
      trailing: const CupertinoListTileChevron(),
    ),
  ),
);

方法3：添加边距避免溢出 #

给CupertinoContextMenu的子组件添加水平边距，预留缩放空间：

return CupertinoContextMenu(
  actions: [
    CupertinoContextMenuAction(
      child: const Text('Edit'),
      onPressed: () {
        //TODO: Handle the edit action
      },
    ),
    CupertinoContextMenuAction(
      child: const Text('Show'),
      onPressed: () {
        //TODO: Handle the show action
      },
    ),
  ],
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8), // 添加水平边距
    child: CupertinoListTile(
      backgroundColor: CupertinoColors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      title: Text(event.name, style: const TextStyle(fontSize: 20),),
      subtitle: Text(event.formattedDate, style: const TextStyle(fontSize: 16),),
      trailing: const CupertinoListTileChevron(),
    ),
  ),
);

内容的提问来源于stack exchange，提问作者F-Y