.NET MAUI中CollectionView无法占满Frame宽度的问题求助

你的问题出在GridItemsLayout的默认布局逻辑：它不会自动将剩余水平空间分配给item，即使设置FillAndExpand也无法触发拉伸，因为这个布局组件是基于item的固有尺寸来排列的。

以下是两种可行的解决方案：

方案一：使用FlexItemsLayout（推荐，更灵活） #

替换原来的GridItemsLayout为FlexItemsLayout，并通过FlexLayout.Grow属性让每个玩家item均分剩余空间：

修改后的完整XAML代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BlitzScorer.MainPage">

    <ScrollView Padding="10">
        <Frame VerticalOptions="Start" CornerRadius="20" BackgroundColor="LightGreen" Padding="10" >
            <Grid RowDefinitions="*" ColumnDefinitions="*">
                <CollectionView Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand">
                    <CollectionView.ItemsLayout>
                        <!-- 替换为FlexItemsLayout，禁用换行 -->
                        <FlexItemsLayout Orientation="Horizontal" FlexWrap="NoWrap" HorizontalItemSpacing="5"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>Player 1</x:String>
                            <x:String>Player 2</x:String>
                        </x:Array>
                    </CollectionView.ItemsSource>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <!-- 添加FlexLayout.Grow="1"让item均分水平空间 -->
                            <Label Text="{Binding .}" BackgroundColor="Beige" HorizontalOptions="FillAndExpand" FlexLayout.Grow="1" />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Grid>
        </Frame>
    </ScrollView>

</ContentPage>

原理 #

• FlexItemsLayout支持更灵活的空间分配逻辑
• FlexLayout.Grow="1"表示每个item在水平方向上均分所有剩余可用空间，玩家数量越少，每个item的宽度越大，直至铺满整个容器
• FlexWrap="NoWrap"保证玩家数量超出容器宽度时自动触发横向滚动

方案二：手动计算GridItemsLayout的ItemWidth #

如果坚持使用GridItemsLayout，可以通过后台代码动态计算每个item的宽度，让其均分容器空间：

1. 给CollectionView添加命名：

<CollectionView x:Name="PlayerCollection" Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand">

2. 在后台代码中重写OnSizeAllocated方法，计算并设置ItemWidth：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    if (PlayerCollection?.ItemsSource is IList<string> players && players.Count > 0)
    {
        var gridLayout = PlayerCollection.ItemsLayout as GridItemsLayout;
        if (gridLayout != null)
        {
            // 减去ScrollView、Frame的Padding和item间距，计算可用宽度
            var totalPadding = 10 * 2 + 10 * 2; // ScrollView(10) + Frame(10) 的左右Padding
            var totalSpacing = 5 * (players.Count - 1); // item之间的总间距
            var availableWidth = width - totalPadding - totalSpacing;
            
            // 均分宽度给每个item
            gridLayout.ItemWidth = availableWidth / players.Count;
        }
    }
}

原理 #

通过监听页面尺寸变化，动态计算每个item应该占据的宽度，确保所有item刚好铺满容器的水平空间，超出时自动滚动。

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