如何在.NET MAUI中添加类似Twitter iOS的弹出菜单？

1. 这类菜单的官方名称 #

在iOS系统中，这种锚定在控件旁、包含多项操作选项的弹出菜单官方名称是Context Menu（上下文菜单）。它用于展示与当前内容相关的快捷操作，既可以通过长按控件触发，也可像Twitter那样通过点击按钮主动唤起。

2. 在.NET MAUI应用中添加此类菜单的方法 #

你可以通过以下两种方式实现类似功能：

方式一：使用MenuFlyout（推荐用于按钮点击唤起） #

直接给按钮绑定MenuFlyout，点击按钮时会弹出锚定在按钮处的菜单，示例代码如下：

<Button Text="..." HorizontalOptions="End">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="转发" Clicked="OnRetweetClicked" />
            <MenuFlyoutItem Text="收藏" Clicked="OnFavoriteClicked" />
            <MenuFlyoutItem Text="屏蔽作者" Clicked="OnBlockUserClicked" />
            <MenuFlyoutSeparator />
            <MenuFlyoutItem Text="举报推文" Clicked="OnReportTweetClicked" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

对应的C#后台处理代码：

private void OnRetweetClicked(object sender, EventArgs e)
{
    // 实现转发逻辑
}

private void OnFavoriteClicked(object sender, EventArgs e)
{
    // 实现收藏逻辑
}

// 其余操作的处理方法依此类推

方式二：使用ContextMenu（可自定义触发方式） #

ContextMenu默认通过长按控件触发，若要改成点击按钮唤起，可结合按钮点击事件手动触发：

<Button Text="..." Clicked="OnContextMenuButtonClicked">
    <Button.ContextMenu>
        <ContextMenu>
            <MenuItem Text="转发" Clicked="OnRetweetClicked" />
            <MenuItem Text="收藏" Clicked="OnFavoriteClicked" />
            <MenuItem Text="屏蔽作者" Clicked="OnBlockUserClicked" />
            <Separator />
            <MenuItem Text="举报推文" Clicked="OnReportTweetClicked" />
        </ContextMenu>
    </Button.ContextMenu>
</Button>

后台代码中手动唤起菜单：

private void OnContextMenuButtonClicked(object sender, EventArgs e)
{
    if (sender is Button button)
    {
        button.ShowContextMenu();
    }
}

这两种方式在iOS平台上都会渲染出与截图一致的锚定弹出菜单，同时能自动适配Android等其他平台的系统样式。

内容的提问来源于stack exchange，提问作者Darth Scitus