MAUI动态菜单系统最优实现方案咨询及现有问题排查

CollectionView用来展示权限动态菜单是完全合适的——它支持数据绑定、虚拟化（大量菜单项时性能更优），适配多平台布局。但用Border模拟按钮确实会缺失内置交互状态，下面给你两种直接可行的优化方案：

方案1：给Border手动添加交互状态 #

通过VisualStateManager定义Normal、Pressed、Hovered状态，结合TapGestureRecognizer处理点击事件，还原按钮交互效果：

XAML实现 #

<CollectionView ItemsSource="{Binding MenuItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Border Margin="5" Padding="10,8"
                    BackgroundColor="LightGray"
                    BorderColor="Gray"
                    CornerRadius="4">
                <!-- 定义交互状态 -->
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="LightGray"/>
                                <Setter Property="BorderColor" Value="Gray"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="DarkGray"/>
                                <Setter Property="BorderColor" Value="Black"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Hovered">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#E0E0E0"/>
                                <Setter Property="BorderColor" Value="#666"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                
                <!-- 绑定点击命令 -->
                <Border.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding BindingContext.MenuItemTappedCommand, Source={RelativeSource AncestorType={x:Type CollectionView}}}"
                                          CommandParameter="{Binding}"/>
                </Border.GestureRecognizers>
                
                <Label Text="{Binding Title}" FontSize="16"/>
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

ViewModel核心逻辑 #

public ObservableCollection<MenuItemModel> MenuItems { get; set; }
public ICommand MenuItemTappedCommand { get; }

public MainViewModel()
{
    MenuItemTappedCommand = new Command<MenuItemModel>(OnMenuItemTapped);
    // 替换为你的权限菜单加载逻辑
    MenuItems = LoadAuthorizedMenuItems();
}

private void OnMenuItemTapped(MenuItemModel item)
{
    if (item.HasChildren)
    {
        // 子菜单展开/收起逻辑（需给MenuItemModel加IsExpanded属性）
        item.IsExpanded = !item.IsExpanded;
    }
    else
    {
        // 页面导航逻辑，示例用Shell导航
        Shell.Current.GoToAsync(item.TargetPageRoute);
    }
}

方案2：直接使用Button控件（更省心） #

Button本身内置了交互状态，只需自定义样式即可实现菜单效果，无需手动加手势：

<CollectionView ItemsSource="{Binding MenuItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Button Text="{Binding Title}"
                    Margin="5"
                    Padding="10,8"
                    BackgroundColor="LightGray"
                    BorderColor="Gray"
                    BorderWidth="1"
                    CornerRadius="4"
                    Command="{Binding BindingContext.MenuItemTappedCommand, Source={RelativeSource AncestorType={x:Type CollectionView}}}"
                    CommandParameter="{Binding}">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="VisualStateManager.VisualStateGroups">
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="DarkGray"/>
                                            <Setter Property="BorderColor" Value="Black"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Hovered">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="#E0E0E0"/>
                                            <Setter Property="BorderColor" Value="#666"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </Setter>
                    </Style>
                </Button.Style>
            </Button>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方案对比 #

• 用Border：样式自定义自由度更高，适合需要复杂布局的菜单项（比如带图标+文字）
• 用Button：无需额外处理手势，代码更简洁，适合简单文本菜单

两种方案都能完美适配你的需求，根据菜单项的布局复杂度选择即可。

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