.NET MAUI Shell飞出菜单项如何编程控制滚动到指定位置

完全可以通过代码实现Flyout列表的滚动控制，不需要自定义平台渲染器，也不需要硬获取FlyoutMenu的内部引用，通过遍历Shell可视化树找到承载列表的ScrollViewer即可实现滚动到顶部、底部、任意指定位置的需求，完全适配MVVM模式。

核心实现逻辑 #

Shell的Flyout菜单列表内部默认由ScrollViewer承载，我们只需要通过可视化树辅助方法找到这个ScrollViewer实例，就能调用MAUI自带的滚动API完成所有操作。

第一步：添加可视化树查找与滚动扩展方法 #

在项目中新建公共扩展类，封装通用的查找和滚动逻辑：

public static class ShellFlyoutScrollExtensions
{
    /// <summary>
    /// 查找可视化树中指定类型的子控件
    /// </summary>
    private static T? FindVisualChild<T>(Element parent) where T : VisualElement
    {
        if (parent is T target) return target;
        
        foreach (var child in parent.LogicalChildren)
        {
            var result = FindVisualChild<T>(child);
            if (result != null) return result;
        }
        return null;
    }

    /// <summary>
    /// 滚动Flyout到顶部
    /// </summary>
    public static async Task ScrollFlyoutToTopAsync(this Shell shell)
    {
        // 若Flyout未打开，等待渲染完成避免空引用
        if (shell.FlyoutIsPresented) await Task.Delay(60);
        
        var scrollViewer = FindVisualChild<ScrollViewer>(shell);
        if (scrollViewer != null)
        {
            await scrollViewer.ScrollToAsync(0, 0, animated: true);
        }
    }

    /// <summary>
    /// 滚动Flyout到底部
    /// </summary>
    public static async Task ScrollFlyoutToBottomAsync(this Shell shell)
    {
        if (shell.FlyoutIsPresented) await Task.Delay(60);
        
        var scrollViewer = FindVisualChild<ScrollViewer>(shell);
        if (scrollViewer != null)
        {
            await scrollViewer.ScrollToAsync(0, scrollViewer.ContentSize.Height, animated: true);
        }
    }

    /// <summary>
    /// 滚动Flyout到指定的Shell项位置
    /// </summary>
    public static async Task ScrollFlyoutToItemAsync(this Shell shell, ShellItem targetItem)
    {
        if (shell.FlyoutIsPresented) await Task.Delay(60);
        
        var scrollViewer = FindVisualChild<ScrollViewer>(shell);
        var targetVisual = FindVisualChild<VisualElement>(targetItem);
        if (scrollViewer != null && targetVisual != null)
        {
            await scrollViewer.ScrollToAsync(targetVisual, ScrollToPosition.Start, animated: true);
        }
    }
}

第二步：ViewModel中直接调用 #

不需要额外获取Flyout引用，直接通过AppShell.Current调用扩展方法即可，符合MVVM的职责划分，你的ControlMenuViewModel代码修改后如下：

namespace TSDZ2Monitor;

public partial class ControlMenuViewModel : ObservableObject
{
    public ICommand ShowParametersCommand => new Command(async () => await ShowParametersControl());

    public async Task ShowParametersControl()
    {
        // 点击Parameters菜单项时滚动到顶部，Display项会自动回到可视区域顶部
        await AppShell.Current.ScrollFlyoutToTopAsync();

        // 如果需要滚动到任意指定项（比如直接定位到Display项），用下面的代码：
        // var displayItem = AppShell.Current.Items
        //     .OfType<ShellContent>()
        //     .FirstOrDefault(i => i.Title == "Display");
        // if (displayItem != null)
        // {
        //     await AppShell.Current.ScrollFlyoutToItemAsync(displayItem);
        // }
    }
}

注意事项 #

• 如果遇到找不到ScrollViewer的情况，一般是MAUI版本迭代调整了内部可视化树结构，可以在调试时遍历AppShell.Current的逻辑子元素确认结构，或者自定义FlyoutItemTemplate时手动给外层ScrollViewer命名，直接按名称查找稳定性更高。
• 所有方法全平台通用，支持Android、iOS、Windows、MacCatalyst，不需要针对单个平台写单独实现。
• 如果需要滚动到MenuItem的位置，逻辑和滚动到ShellContent一致，找到对应的MenuItem实例传入ScrollFlyoutToItemAsync方法即可。

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