MAUI如何让Button自适应文本宽度？解决CollectionView按钮宽度一致问题

问题描述 #

需要实现MAUI中CollectionView生成的Button自动调整尺寸以适配全部文本，但当前所有按钮宽度完全相同，不会根据文本内容扩展宽度。

当前代码：

<CollectionView x:Name="TagsView"
                Grid.Row="0">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Button Text="{Binding Name}"
                    CornerRadius="15" 
                    HorizontalOptions="CenterAndExpand"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

当前效果：

解决方法 #

问题根源在于两处设置：

• GridItemsLayout 会强制横向布局的每个item拥有相同宽度；
• HorizontalOptions="CenterAndExpand" 会让按钮填充所在item的全部可用空间。

修改步骤如下：

1. 将 GridItemsLayout 替换为 LinearItemsLayout，线性布局支持item自适应自身内容尺寸；
2. 修改Button的 HorizontalOptions 为 Center（或 Start），移除Expand属性，让按钮宽度由自身内容决定；
3. 补充设置 HorizontalContentAlignment="Center"，保证按钮内文本居中显示。

修改后的代码：

<CollectionView x:Name="TagsView"
                Grid.Row="0">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Button Text="{Binding Name}"
                    CornerRadius="15" 
                    HorizontalOptions="Center"
                    HorizontalContentAlignment="Center"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

调整后每个按钮会根据自身文本内容自动适配宽度，不再强制统一尺寸。

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