Xamarin NavigationPage中水平排列RadioButton不显示问题

这个是Xamarin.Forms布局系统的已知测量bug：当承载RadioButton的水平StackLayout处于NavigationPage导航栈中时，水平方向的布局约束传递会出现异常，子元素RadioButton在测量阶段拿到的可用宽度为无限值，最终计算出的渲染尺寸为0，导致控件不可见。垂直StackLayout因为高度方向始终有明确约束，不会触发这个问题，和数据绑定逻辑无关。

优先选择第一种方案，兼容性最好，不需要额外做版本适配：

方案1：替换水平StackLayout为FlexLayout #

FlexLayout的行布局测量逻辑不会触发这个无限宽度的bug，还支持自动折行，适配不同屏幕宽度。直接替换承载RadioButton组的布局容器即可，修改后的代码如下：

<FlexLayout
    RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
    RadioButtonGroup.SelectedValue="{Binding Value}"
    BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
    BindableLayout.EmptyView="No choices available"
    Direction="Row"
    AlignItems="Center"
    Wrap="Wrap"
    Margin="10,0,0,0">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <RadioButton Value="{Binding Value}"
                Content="{Binding Label}"
                IsChecked="{Binding IsSelected}"
                CheckedChanged="OnRadioChanged"
                FlowDirection="LeftToRight"
                Margin="0,0,12,0">
            </RadioButton>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

设置Wrap="Wrap"后，选项数量较多超出屏幕宽度时会自动折行，不会出现内容裁切。

方案2：保留StackLayout，显式设置布局约束 #

如果不想换容器，可以给水平StackLayout和子RadioButton显式设置布局选项，强制修正测量逻辑：

1. 给承载RadioButton的水平StackLayout添加HorizontalOptions="FillAndExpand"，让它主动占满父容器的可用宽度，不传递无限宽度给子元素
2. 给DataTemplate里的每个RadioButton添加HorizontalOptions="Start"，避免子元素请求无限宽度

修改后的核心代码：

<StackLayout 
    RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
    RadioButtonGroup.SelectedValue="{Binding Value}"
    BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
    BindableLayout.EmptyView="No choices available"
    Orientation="Horizontal"
    HorizontalOptions="FillAndExpand"
    Margin="10,0,0,0">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <RadioButton Value="{Binding Value}"
                Content="{Binding Label}"
                IsChecked="{Binding IsSelected}"
                CheckedChanged="OnRadioChanged"
                FlowDirection="LeftToRight"
                HorizontalOptions="Start"
                Margin="0,0,10,0">
            </RadioButton>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

补充：版本适配 #

如果当前项目使用的Xamarin.Forms版本低于5.0.0.2578，建议先升级到最新的5.0稳定服务版本，官方在后期迭代中修复了多处RadioButton和StackLayout组合的测量异常问题。

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