为什么 CollectionView 中的复选框大小不同？

Question

我找不到 .NET MAUI 奇怪行为的解决方案。

我正在利用集合视图来描绘问题的可变数量的答案。每个答案前面都有一个复选框。但是，复选框似乎没有对齐并且大小不同。请比较以下内容：

出于说明目的，周围集合视图的背景颜色为“浅绿色”，而复选框的背景颜色为“黄色”。

这在View对应的代码中明显可见：

<CollectionView Grid.Row="2"
                Grid.Column="0"
                ItemsSource="{Binding CurrentAnswers}"
                ItemsLayout="VerticalGrid"
                ItemSizingStrategy="MeasureAllItems"
                VerticalScrollBarVisibility="Always"
                HeightRequest="400">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid x:DataType="models:Answer"
                  Padding="20"
                  BackgroundColor="Aqua">
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <RadioButton Grid.Row="0"
                             Grid.Column="0"
                             Content="{x:Binding Content}"
                             TextColor="{StaticResource NightBlue}"
                             GroupName="Answers"
                             IsVisible="{Binding 
                        Path=BindingContext.CurrentQuestion.QuestionType,
                        Converter={StaticResource QuestionTypeIsStandardToBooleanConverter}, 
                        Source={x:Reference refTestView}}" />
                <Grid Grid.Row="0"
                      Grid.Column="0"
                      IsVisible="{Binding 
                        Path=BindingContext.CurrentQuestion.QuestionType,
                        Converter={StaticResource QuestionTypeIsMultipleChoiceToBooleanConverter}, 
                        Source={x:Reference refTestView}}">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <CheckBox Grid.Row="0"
                              Grid.Column="0"
                              BackgroundColor="Yellow"
                              Color="{StaticResource AlpineBlue}" />
                    <Label Grid.Row="0"
                           Grid.Column="1"
                           Text="{Binding Content}"
                           TextColor="{StaticResource NightBlue}"
                           VerticalOptions="Center"
                           LineBreakMode="WordWrap" />
                </Grid>


                <Entry Grid.Row="0"
                       Grid.Column="0"
                       IsSpellCheckEnabled="False"
                       IsTextPredictionEnabled="False"
                       HorizontalOptions="Start"
                       WidthRequest="400"
                       TextColor="{StaticResource NightBlue}"
                       IsVisible="{Binding 
                        Path=BindingContext.CurrentQuestion.QuestionType,
                        Converter={StaticResource QuestionTypeIsEntryToBooleanConverter}, 
                        Source={x:Reference refTestView}}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

根据 ViewModel 中的问题类型，可以看到单选按钮、复选框或条目。

有谁明白为什么会出现这个问题吗？这与单选按钮和条目的并行实现相关吗？

Answer 1

正如 Jason 提到的，由于您没有为 CollectionView 的

CollectionView.ItemTemplate

的控件指定任何特定的大小，因此每一行都会根据其自己的内容独立计算自己的布局。

如果您希望每行的

CheckBox

大小相同，您可以为它们指定特定的高度和宽度。

例如：

<CheckBox Grid.Row="0"  
          Grid.Column="0"
          BackgroundColor="Yellow"
          Color="{StaticResource AlpineBlue}" 
          WidthRequest="30" 
          HeightRequest="30"/>