Xamarin Forms：如何实现iOS设置式列表项选择交互（替代Picklist）

嘿，这个需求我刚好折腾过！要实现iOS系统设置里那种带箭头的跳转选择交互，在Xamarin.Forms里其实不难，核心就是用自定义控件替代原生Picklist，配合页面导航来完成。下面给你一步步拆解说清楚：

不再依赖原生Picklist的弹窗选择逻辑，而是做一个模拟系统设置样式的可点击条目，点击后跳转到独立的列表选择页面；用户选好选项后，页面自动返回并把选中值同步回主界面，完全复刻iOS系统的交互体验。

1. 自定义带箭头的选择条目控件 #

先做一个和iOS设置条目风格一致的控件：左边是标题，右边显示当前选中值+右箭头。用ContentView封装，方便复用：

<ContentView x:Class="YourApp.Controls.SelectionEntryView"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Frame Padding="16,8" BorderColor="#E0E0E0" CornerRadius="0" HasShadow="False">
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
            <Label x:Name="TitleLabel" FontSize="Body" VerticalOptions="Center"/>
            <Label x:Name="SelectedValueLabel" FontSize="Body" TextColor="#999999" 
                   HorizontalOptions="EndAndExpand" VerticalOptions="Center"/>
            <Image Source="arrow_right.png" WidthRequest="16" HeightRequest="16" 
                   VerticalOptions="Center" Margin="8,0,0,0"/>
        </StackLayout>
    </Frame>
</ContentView>

后台代码添加绑定属性和点击事件，方便外部调用：

public partial class SelectionEntryView : ContentView
{
    public static readonly BindableProperty TitleProperty = 
        BindableProperty.Create(nameof(Title), typeof(string), typeof(SelectionEntryView), "");
    public static readonly BindableProperty SelectedValueProperty = 
        BindableProperty.Create(nameof(SelectedValue), typeof(string), typeof(SelectionEntryView), "未选择");

    public string Title
    {
        get => (string)GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    public string SelectedValue
    {
        get => (string)GetValue(SelectedValueProperty);
        set => SetValue(SelectedValueProperty, value);
    }

    public event EventHandler OnEntryClicked;

    public SelectionEntryView()
    {
        InitializeComponent();
        TitleLabel.SetBinding(Label.TextProperty, new Binding(nameof(Title), source: this));
        SelectedValueLabel.SetBinding(Label.TextProperty, new Binding(nameof(SelectedValue), source: this));
        
        // 添加点击手势
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            Command = new Command(() => OnEntryClicked?.Invoke(this, EventArgs.Empty))
        });
    }
}

2. 创建独立的列表选择页面 #

做一个专门用来展示选项的页面，用CollectionView（比ListView更轻量化）来渲染列表：

<ContentPage x:Class="YourApp.Pages.SelectionPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="选择">
    <CollectionView x:Name="ItemsCollectionView" SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding}" Padding="16,12" FontSize="Body"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

后台代码处理选中逻辑，选中后自动返回并传递选中值：

public partial class SelectionPage : ContentPage
{
    public event EventHandler<string> OnItemSelected;
    private readonly List<string> _items;

    public SelectionPage(List<string> items, string currentSelected)
    {
        InitializeComponent();
        _items = items;
        ItemsCollectionView.ItemsSource = _items;

        // 默认选中当前已选值
        if (!string.IsNullOrEmpty(currentSelected) && _items.Contains(currentSelected))
        {
            ItemsCollectionView.SelectedItem = currentSelected;
        }

        // 选中后返回并传递值
        ItemsCollectionView.SelectionChanged += (s, e) =>
        {
            if (e.CurrentSelection.FirstOrDefault() is string selectedItem)
            {
                OnItemSelected?.Invoke(this, selectedItem);
                Navigation.PopAsync();
            }
        };
    }
}

3. 在搜索界面集成使用 #

把自定义控件替换掉原来的Picklist，绑定点击事件并处理返回值：

<ContentPage x:Class="YourApp.Pages.SearchPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourApp.Controls">
    <StackLayout Padding="16">
        <!-- 其他搜索界面元素 -->
        <controls:SelectionEntryView x:Name="CategorySelector" 
                                     Title="分类" SelectedValue="全部" />
    </StackLayout>
</ContentPage>

后台代码处理跳转和值同步：

public partial class SearchPage : ContentPage
{
    // 模拟可选分类数据
    private readonly List<string> _categoryList = new List<string> 
    { "全部", "电子产品", "服装", "家居", "食品" };

    public SearchPage()
    {
        InitializeComponent();
        CategorySelector.OnEntryClicked += async (s, e) =>
        {
            var selectionPage = new SelectionPage(_categoryList, CategorySelector.SelectedValue);
            selectionPage.OnItemSelected += (sender, selectedValue) =>
            {
                // 更新主界面的选中值
                CategorySelector.SelectedValue = selectedValue;
                // 这里可以触发搜索过滤逻辑，比如根据选中分类刷新结果
            };
            await Navigation.PushAsync(selectionPage);
        };
    }
}

4. 可选优化点 #

• 给选择页面的选中项添加高亮样式，让用户更直观看到当前选择
• Android平台可以调整自定义控件的边框、箭头样式，贴近Android系统风格
• 支持自定义对象选择：把SelectionPage改成泛型，传递实体类而非字符串，适配更复杂的业务场景

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