.NET MAUI中CollectionView内Entry焦点跳转至下一项的实现方案

问题描述 #

我开发了一个.NET MAUI应用，其中包含带有Entry控件的CollectionView，CollectionView后还有一个静态Entry控件。当前聚焦CollectionView中的第一个Entry时，按下Tab或Enter键，焦点不会跳转到CollectionView内的下一个Entry，而是直接聚焦到静态Entry控件。已尝试将CollectionView内Entry的返回类型设为Next，也使用了Community Toolkit的SetFocusOnEntryCompletedBehavior，但均未解决问题。

解决方案 #

方案1：自定义焦点跳转行为 #

通过自定义Behavior适配CollectionView虚拟化场景，专门处理内部Entry的焦点跳转逻辑：

1. 创建自定义行为类

using Microsoft.Maui.Controls;

public class FocusNextEntryBehavior : Behavior<Entry>
{
    protected override void OnAttachedTo(Entry bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.Completed += OnEntryCompleted;
    }

    protected override void OnDetachingFrom(Entry bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.Completed -= OnEntryCompleted;
    }

    private void OnEntryCompleted(object sender, EventArgs e)
    {
        if (sender is not Entry currentEntry) return;

        // 向上遍历找到当前Entry所在的CollectionView
        var parent = currentEntry.Parent;
        while (parent != null && parent is not CollectionView collectionView)
        {
            parent = parent.Parent;
        }

        if (parent is not CollectionView cv) return;
        var itemsSource = cv.ItemsSource as IList;
        if (itemsSource == null) return;

        // 获取当前项索引并计算下一项索引
        var currentItem = currentEntry.BindingContext;
        int currentIndex = itemsSource.IndexOf(currentItem);
        int nextIndex = currentIndex + 1;

        // 最后一项时停止跳转（可自行修改逻辑）
        if (nextIndex >= itemsSource.Count) return;

        // 滚动到下一项，确保控件加载（适配虚拟化）
        cv.ScrollToAsync(nextIndex, ScrollToPosition.Start, false);

        // 延迟设置焦点，等待控件渲染完成
        Device.BeginInvokeOnMainThread(async () =>
        {
            await Task.Delay(100);
            var nextItem = itemsSource[nextIndex];
            // 遍历可视项找到对应的Entry
            foreach (var visibleItem in cv.VisibleItems)
            {
                if (visibleItem == nextItem && cv.FindByName<Entry>("ItemEntry") is Entry nextEntry)
                {
                    nextEntry.Focus();
                    break;
                }
            }
        });
    }
}

2. XAML中使用行为

给CollectionView的ItemTemplate中的Entry添加自定义行为，注意设置统一的x:Name：

<CollectionView ItemsSource="{Binding YourItemList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Entry x:Name="ItemEntry" ReturnKeyType="Next">
                    <Entry.Behaviors>
                        <local:FocusNextEntryBehavior />
                    </Entry.Behaviors>
                </Entry>
            </ViewCell>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

<!-- 页面底部的静态Entry -->
<Entry Placeholder="静态输入框" />

方案2：处理Tab键焦点逻辑 #

如果需要适配Tab键的焦点跳转，在页面后台添加事件处理拦截默认行为：

1. 页面后台添加事件处理

private void OnEntryKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Tab)
    {
        e.Handled = true; // 拦截默认Tab焦点跳转
        if (sender is Entry currentEntry)
        {
            FocusNextEntry(currentEntry);
        }
    }
}

// 提取公共方法复用焦点跳转逻辑
private void FocusNextEntry(Entry currentEntry)
{
    var parent = currentEntry.Parent;
    while (parent != null && parent is not CollectionView collectionView)
    {
        parent = parent.Parent;
    }

    if (parent is not CollectionView cv) return;
    var itemsSource = cv.ItemsSource as IList;
    if (itemsSource == null) return;

    var currentItem = currentEntry.BindingContext;
    int currentIndex = itemsSource.IndexOf(currentItem);
    int nextIndex = currentIndex + 1;

    if (nextIndex >= itemsSource.Count) return;

    cv.ScrollToAsync(nextIndex, ScrollToPosition.Start, false);

    Device.BeginInvokeOnMainThread(async () =>
    {
        await Task.Delay(100);
        var nextItem = itemsSource[nextIndex];
        foreach (var visibleItem in cv.VisibleItems)
        {
            if (visibleItem == nextItem && cv.FindByName<Entry>("ItemEntry") is Entry nextEntry)
            {
                nextEntry.Focus();
                break;
            }
        }
    });
}

2. XAML绑定KeyDown事件

<Entry x:Name="ItemEntry" ReturnKeyType="Next" KeyDown="OnEntryKeyDown">
    <Entry.Behaviors>
        <local:FocusNextEntryBehavior />
    </Entry.Behaviors>
</Entry>

注意事项 #

• 确保CollectionView的ItemTemplate中Entry的x:Name统一（示例中为ItemEntry），方便查找控件
• 延迟设置焦点的时间可根据实际渲染速度调整，避免控件未加载导致焦点设置失败
• 若无需适配虚拟化场景，可简化查找逻辑，直接通过索引获取控件

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