MAUI中ListView开启HasUnevenRows后按钮仍显示不全求助

问题描述 #

使用MAUI的ListView时，已设置HasUnevenRows="True"，但列表项内的Button仍无法在UI上完全显示，按钮存在截断情况。

问题原因 #

查看Button的样式MyRequesterButtonStyle，其中设置了VerticalOptions="Start"；同时按钮所在的水平StackLayout内，左侧Label设置了VerticalOptions="CenterAndExpand"——该属性会让Label占据垂直方向的所有剩余空间，直接挤压了Button的垂直显示空间，导致ListView的行高计算未包含Button的完整高度。

解决方案 #

方案一：修改Button的垂直布局属性 #

将Button样式中的VerticalOptions="Start"改为VerticalOptions="Center"（或CenterAndExpand），让按钮在垂直方向居中，确保水平StackLayout能正确包裹按钮的完整高度：

修改后的MyRequesterButtonStyle代码：

<Style x:Key="MyRequesterButtonStyle" TargetType="Button">
    <Setter Property="VerticalOptions" Value="Center"/> <!-- 替换原Start属性 -->
    <Setter Property="CornerRadius" Value="{OnIdiom Phone=20, Tablet=40}" />
    <Setter Property="FontSize">
        <OnIdiom
            x:TypeArguments="x:Double"
            Phone="12"
            Tablet="21"
            Desktop="14"/>
    </Setter>
    <Setter Property="HeightRequest">
        <OnIdiom
            x:TypeArguments="x:Double"
            Phone="35"
            Tablet="60"
            Desktop="40"/>
    </Setter>
    <Setter Property="WidthRequest">
        <OnIdiom
            x:TypeArguments="x:Double"
            Phone="120"
            Tablet="225"
            Desktop="150"/>
    </Setter>
</Style>

方案二：优化水平StackLayout的垂直约束 #

若方案一效果不佳，可给包含Label和Button的水平StackLayout添加VerticalOptions="FillAndExpand"，确保该布局能充分利用行内垂直空间：

<StackLayout
    Margin="0,5,0,0"
    Orientation="Horizontal"
    VerticalOptions="FillAndExpand"> <!-- 添加此属性 -->
    <!-- Label和Button代码保持不变 -->
</StackLayout>

验证效果 #

修改完成后，ListView的行高会根据内容自动调整，Button将完整显示在列表项中。

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