Xamarin.Forms横竖滚动UI实现及单选功能问题求助

一、修复横竖滚动失效问题 #

BindableLayout本身不带滚动能力，需要将其宿主控件嵌套在ScrollView中，若需双向滚动需设置ScrollView.Orientation为Both。同时避免给宿主控件固定死HeightRequest/WidthRequest，否则无法触发滚动逻辑。

布局调整示例 #

<ScrollView Orientation="Both">
    <StackLayout>
        <!-- 第一个列表容器 -->
        <StackLayout BindableLayout.ItemsSource="{Binding FirstList}">
            <BindableLayout.ItemTemplate>
                <!-- 行模板内容 -->
            </BindableLayout.ItemTemplate>
        </StackLayout>
        <!-- 第二个列表容器 -->
        <StackLayout BindableLayout.ItemsSource="{Binding SecondList}">
            <BindableLayout.ItemTemplate>
                <!-- 行模板内容 -->
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>
</ScrollView>

如果列表数据量较大，推荐替换为CollectionView，它自带滚动优化和虚拟化特性，更适合大量数据场景：

<CollectionView ItemsSource="{Binding FirstList}" Orientation="Vertical">
    <CollectionView.ItemTemplate>
        <!-- 行模板内容 -->
    </CollectionView.ItemTemplate>
</CollectionView>

二、修复每行单选失效问题 #

多选问题的核心是每个选项的IsChecked未关联到当前行的唯一选中项，而是各自绑定独立属性。需要给每行对应的ViewModel添加SelectedOption属性，让该行内所有RadioButton绑定到这个属性，通过转换器判断选中状态。

1. 行ViewModel调整 #

public class RowViewModel : INotifyPropertyChanged
{
    private OptionModel _selectedOption;
    public OptionModel SelectedOption
    {
        get => _selectedOption;
        set
        {
            _selectedOption = value;
            OnPropertyChanged();
            // 联动Other输入框显示状态
            IsOtherVisible = _selectedOption?.Name == "Other";
        }
    }

    private bool _isOtherVisible;
    public bool IsOtherVisible
    {
        get => _isOtherVisible;
        set
        {
            _isOtherVisible = value;
            OnPropertyChanged();
        }
    }

    public List<OptionModel> Options { get; set; }

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

2. 布局单选绑定 #

使用RadioButton的IsChecked绑定到行ViewModel的SelectedOption，通过EqualsConverter判断当前选项是否为选中项，并给每行设置独立GroupName确保单选互不干扰：

<ContentPage.Resources>
    <local:EqualsConverter x:Key="EqualsConverter" />
</ContentPage.Resources>

<DataTemplate x:Key="RowTemplate">
    <StackLayout>
        <StackLayout BindableLayout.ItemsSource="{Binding Options}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <RadioButton 
                        Content="{Binding Name}"
                        IsChecked="{Binding Source={RelativeSource AncestorType={x:Type local:RowViewModel}}, Path=SelectedOption, Converter={StaticResource EqualsConverter}, ConverterParameter={Binding .}}"
                        GroupName="{Binding Source={RelativeSource AncestorType={x:Type local:RowViewModel}}}" />
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>
</DataTemplate>

3. 实现EqualsConverter #

public class EqualsConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Equals(value, parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? parameter : Binding.DoNothing;
    }
}

三、修复"Other"输入框显示与单选的冲突问题 #

之前移除外层StackLayout后单选正常但无法添加输入框，是因为输入框未正确绑定到行ViewModel的IsOtherVisible属性。解决方案是将每行的单选列表和输入框放在同一个容器内，确保两者共享同一个行ViewModel上下文。

正确行模板结构 #

<DataTemplate x:Key="RowTemplate">
    <StackLayout Margin="10">
        <!-- 单选选项列表 -->
        <StackLayout BindableLayout.ItemsSource="{Binding Options}" Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <RadioButton 
                        Content="{Binding Name}"
                        Margin="5"
                        IsChecked="{Binding Source={RelativeSource AncestorType={x:Type local:RowViewModel}}, Path=SelectedOption, Converter={StaticResource EqualsConverter}, ConverterParameter={Binding .}}"
                        GroupName="{Binding Source={RelativeSource AncestorType={x:Type local:RowViewModel}}}" />
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
        <!-- Other输入框，绑定行ViewModel的显示状态 -->
        <Entry 
            Placeholder="请输入其他内容"
            Margin="5,0"
            IsVisible="{Binding IsOtherVisible}" />
    </StackLayout>
</DataTemplate>

此结构既保证每行单选独立，又能在选中"Other"时正确显示输入框，同时外层ScrollView可正常触发滚动。

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