.NET MAUI中ContentLayout问题：按钮文字不显示及定位异常

问题原因 #

当Button同时设置ImageSource和ContentLayout="Top"时，默认布局下Button的高度往往不足以容纳图片+文字的垂直排列，尤其是在HorizontalStackLayout中，控件会优先适配图片高度，导致文字被挤出可视区域；无图片的Button则没有这个高度限制，因此文字正常显示。

可行解决方案 #

1. 明确设置Button的HeightRequest

给带图的Button指定足够的高度，确保能同时容纳图片和文字：

<Button
    BackgroundColor="Transparent"
    ContentLayout="Top"
    FontSize="Small"
    ImageSource="line_1.png"
    Text="1 Line"
    TextColor="Black"
    HeightRequest="60" /> <!-- 根据图片尺寸和字体大小调整数值 -->

可以临时给Button添加背景色（如BackgroundColor="LightGray"），直观查看控件实际占用空间，验证高度是否足够。

2. 自定义Button的ContentTemplate

完全手动控制图片和文字的布局，避免默认Button的排版限制：

<Button BackgroundColor="Transparent">
    <Button.ContentTemplate>
        <DataTemplate>
            <VerticalStackLayout HorizontalOptions="Center" Spacing="2">
                <Image Source="line_1.png" Aspect="AspectFit" HeightRequest="30"/>
                <Label Text="1 Line" FontSize="Small" TextColor="Black" HorizontalOptions="Center"/>
            </VerticalStackLayout>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

这种方式还能灵活调整图片与文字的间距、各自尺寸，适配更多自定义需求。

3. 调整父布局的垂直属性

让HorizontalStackLayout和Button拥有足够的垂直扩展空间：

<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Fill">
    <Button
        BackgroundColor="Transparent"
        ContentLayout="Top"
        FontSize="Small"
        ImageSource="line_1.png"
        Text="1 Line"
        TextColor="Black"
        VerticalOptions="FillAndExpand"
        HeightRequest="60"/>
    <!-- 其余Button同理设置 -->
</HorizontalStackLayout>

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