MAUI中Grid内标签与其他Grid按钮重叠，如何实现行高自适应？

核心问题拆解 #

你当前的Grid未定义行/列规则，StackLayout（包含ListView）和CameraButton默认挤在同一个单元格里，必然产生重叠；同时ListView默认行高固定，长文本Label无法自动撑开行高，导致要么文本截断要么溢出到其他控件区域。

具体修复方案 #

• 给Grid明确行布局：定义两行，第一行占满剩余屏幕空间（*），第二行自适应CameraButton的高度（Auto），让两个控件分属不同行，从根源避免重叠。
• 开启ListView行高自适应：设置HasUnevenRows="True"，让ListView每行高度根据内容自动调整。
• 优化Label换行逻辑：给Label添加LineBreakMode="WordWrap"和VerticalOptions="Start"，确保长文本能自动换行且完整显示。

修改后的完整XAML代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="redacted"
             xmlns:templates="redacted"
             x:Class="redacted">
    <ContentPage.Resources>
        <DataTemplate x:Key="labelTemplate">
            <ViewCell>
                <Grid>
                    <!-- 优化Label换行与垂直布局 -->
                    <Label Text="{Binding Text}" 
                           LineBreakMode="WordWrap"
                           VerticalOptions="Start"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="buttonTemplate">
            <ViewCell>
                <Grid>
                    <Button Text="{Binding Text}" Clicked="UniversalButtonInterface_Clicked" />
                </Grid>
            </ViewCell>
        </DataTemplate>
        <templates:StepItemTemplateSelector x:Key="stepSelectorTemplate"
                                            LabelTemplate="{StaticResource labelTemplate}"
                                            ButtonTemplate="{StaticResource buttonTemplate}" />

    </ContentPage.Resources>
    <!-- 定义Grid行规则，分离ListView和CameraButton -->
    <Grid RowDefinitions="*, Auto">
       <StackLayout Grid.Row="0">
           <!-- 开启ListView行高自适应 -->
           <ListView
                ItemsSource="{Binding Steps}"
                ItemTemplate="{StaticResource stepSelectorTemplate}"
                HasUnevenRows="True">
            </ListView>
        </StackLayout>
        <!-- 将CameraButton固定在第二行 -->
        <local:CameraButton Grid.Row="1"/>
    </Grid>

</ContentPage>

额外注意事项 #

• 如果需要CameraButton固定在屏幕底部不随ListView滚动，当前的两行布局已经满足需求；若要让CameraButton悬浮在ListView上方（不占独立行），可给CameraButton设置VerticalOptions="End"并保留Grid.Row="0"，但需确保ListView底部留出足够边距避免遮挡。
• 若Label仍出现文本截断，检查是否给Label设置了固定宽度，确保它能在ListView单元格内充分展开。

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