求助：如何在Xamarin Forms中实现笔记应用的Horizontal selector

方案一：使用 CollectionView（推荐） #

CollectionView 是 Xamarin Forms 官方推荐的列表组件，原生支持横向布局，适合做这种横向选择器。

1. XAML 布局代码 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NotesApp.NoteSelectorPage"
             x:Name="PageRoot">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:BoolToColorConverter x:Key="BoolToColorConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Margin="16" Spacing="12">
        <!-- 横向选择器 -->
        <CollectionView SelectionMode="Single"
                        ItemsSource="{Binding Notes}"
                        SelectedItem="{Binding SelectedNote}">
            <!-- 设置横向布局 -->
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" ItemSpacing="8"/>
            </CollectionView.ItemsLayout>
            <!-- 笔记项模板 -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame CornerRadius="8"
                           Padding="12"
                           BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#F0F0F0,#2196F3'}"
                           BorderColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#E0E0E0,#1976D2'}">
                        <StackLayout>
                            <Label Text="{Binding Title}" FontSize="Subtitle" 
                                   TextColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#333333,#FFFFFF'}"/>
                            <Label Text="{Binding PreviewText}" FontSize="Caption" 
                                   TextColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#666666,#E3F2FD'}"/>
                        </StackLayout>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

2. 笔记模型与 ViewModel 逻辑 #

首先定义带选中状态的笔记模型（需实现 INotifyPropertyChanged）：

public class NoteModel : INotifyPropertyChanged
{
    private bool _isSelected;
    public string Title { get; set; }
    public string PreviewText { get; set; }
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ViewModel 处理选中状态切换：

public class NoteSelectorViewModel : INotifyPropertyChanged
{
    private NoteModel _selectedNote;
    public ObservableCollection<NoteModel> Notes { get; set; }
    public NoteModel SelectedNote
    {
        get => _selectedNote;
        set
        {
            if (_selectedNote != null)
                _selectedNote.IsSelected = false;
            _selectedNote = value;
            if (_selectedNote != null)
                _selectedNote.IsSelected = true;
            OnPropertyChanged();
        }
    }

    public NoteSelectorViewModel()
    {
        // 模拟测试数据
        Notes = new ObservableCollection<NoteModel>
        {
            new NoteModel { Title = "购物清单", PreviewText = "牛奶、鸡蛋、面包..." },
            new NoteModel { Title = "会议记录", PreviewText = "讨论Q3项目进度..." },
            new NoteModel { Title = "旅行计划", PreviewText = "7月去云南，行程安排..." }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. 布尔转颜色转换器 #

实现选中/未选中状态的样式切换：

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isSelected = (bool)value;
        string[] colors = parameter.ToString().Split(',');
        return isSelected ? Color.FromHex(colors[1].Trim()) : Color.FromHex(colors[0].Trim());
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

方案二：使用 ScrollView + FlexLayout（兼容旧版本） #

如果项目使用较老版本的 Xamarin Forms（无 CollectionView），可以用横向滚动的 ScrollView 包裹 FlexLayout 实现：

XAML 核心代码 #

<ScrollView Orientation="Horizontal" Margin="16">
    <FlexLayout Direction="Row" Spacing="8" Padding="0,0,16,0">
        <BindableLayout.ItemsSource>
            <x:Array Type="{x:Type local:NoteModel}">
                <local:NoteModel Title="购物清单" PreviewText="牛奶、鸡蛋、面包..."/>
                <local:NoteModel Title="会议记录" PreviewText="讨论Q3项目进度..."/>
                <local:NoteModel Title="旅行计划" PreviewText="7月去云南，行程安排..."/>
            </x:Array>
        </BindableLayout.ItemsSource>
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Frame CornerRadius="8" Padding="12"
                       BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#F0F0F0,#2196F3'}">
                    <StackLayout>
                        <Label Text="{Binding Title}" FontSize="Subtitle"/>
                        <Label Text="{Binding PreviewText}" FontSize="Caption"/>
                    </StackLayout>
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BindingContext.SelectNoteCommand, Source={x:Reference PageRoot}}"
                                              CommandParameter="{Binding .}"/>
                    </Frame.GestureRecognizers>
                </Frame>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>
</ScrollView>

后台选中命令逻辑 #

在 ViewModel 中添加切换选中状态的命令：

public ICommand SelectNoteCommand => new Command<NoteModel>(note =>
{
    foreach(var item in Notes)
        item.IsSelected = item == note;
});

关键样式调整（匹配附图效果） #

• 设置 CornerRadius 给 Frame 实现圆角卡片
• 调整 Padding 和 ItemSpacing 控制项间距与内部边距
• 通过转换器绑定 IsSelected 属性，切换背景色、文字色、边框色
• 给横向滚动区域添加右侧内边距，避免最后一项贴边

内容的提问来源于stack exchange，提问作者Omar Hesham Salah El-Din