.NET MAUI中设置按钮占屏幕25%的布局问题求助

你的代码主要有这几个问题，导致按钮无法占据屏幕25%的空间：

1. 用Padding控制高度方向错误
   Padding是控件的内边距，不是控件自身的高度。你靠添加底部内边距来“撑大”按钮，只会让按钮下方空出额外空间，按钮本身的高度还是默认值，根本达不到占屏幕25%的效果。

2. 屏幕高度的获取与处理有误

• DeviceDisplay.MainDisplayInfo.Height返回的是物理像素，而MAUI布局使用的是逻辑像素，直接除以4会出现尺寸偏差，需要用DeviceDisplay.MainDisplayInfo.Density转换为逻辑单位。
• 直接使用屏幕总高度没有考虑导航栏、状态栏的占用，实际可用高度应该参考页面自身的Height或者窗口的可用空间。

3. 绑定的字段无法被识别
   你定义的quarterScreensize是公共字段，MAUI的绑定系统只能识别带getter的公共属性，否则绑定逻辑根本不会生效。

4. VerticalStackLayout默认不会均分空间
   VerticalStackLayout默认会根据子控件的固有大小排列，不会自动把可用空间平均分配给子控件，需要设置布局选项或更换更适合的布局容器。

推荐实现方式（用Grid） #

Grid是实现均分空间最便捷的布局，直接按比例分配行高即可，无需手动计算高度：

LaunchPage.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="MauiApp1.Views.LaunchPage"
             Title="LaunchPage">
    <!-- 定义4行，每行高度按1:1:1:1均分 -->
    <Grid RowDefinitions="*,*,*,*">
        <Button Text="Schematics" Grid.Row="0" Margin="0"/>
        <Button Text="Exercise list" Grid.Row="1" Margin="0"/>
        <Button Text="Options" Grid.Row="2" Margin="0"/>
        <Button Text="No idea yet" Grid.Row="3" Margin="0"/>
    </Grid>
</ContentPage>

代码说明 #

• RowDefinitions="*,*,*,*"表示4行，每行占用相等的可用空间，会自动适配屏幕高度，不需要手动计算。
• Grid会自动将每行高度设为可用空间的1/4，按钮默认会填充满所在行，直接实现每个按钮占屏幕25%的需求。

坚持用VerticalStackLayout的改进方案 #

如果你不想更换布局容器，也可以通过以下代码实现需求：

LaunchPage.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="MauiApp1.Views.LaunchPage"
             Title="LaunchPage"
             x:Name="This">
    <VerticalStackLayout>
        <Button Text="Schematics" 
                HeightRequest="{Binding BindingContext.AvailableQuarterHeight, Source={x:Reference This}}" 
                VerticalOptions="FillAndExpand"/>
        <Button Text="Exercise list" 
                HeightRequest="{Binding BindingContext.AvailableQuarterHeight, Source={x:Reference This}}" 
                VerticalOptions="FillAndExpand"/>
        <Button Text="Options" 
                HeightRequest="{Binding BindingContext.AvailableQuarterHeight, Source={x:Reference This}}" 
                VerticalOptions="FillAndExpand"/>
        <Button Text="No idea yet" 
                HeightRequest="{Binding BindingContext.AvailableQuarterHeight, Source={x:Reference This}}" 
                VerticalOptions="FillAndExpand"/>
    </VerticalStackLayout>
</ContentPage>

LaunchPage.xaml.cs #

namespace MauiApp1.Views;

public partial class LaunchPage : ContentPage
{
    // 定义供绑定使用的公共属性
    public double AvailableQuarterHeight { get; set; }

    public LaunchPage()
    {
        InitializeComponent();
        // 页面加载后计算实际可用高度的1/4
        Loaded += (s, e) =>
        {
            var displayInfo = DeviceDisplay.MainDisplayInfo;
            // 转换为逻辑高度：物理高度 / 屏幕密度
            var logicalHeight = displayInfo.Height / displayInfo.Density;
            // 减去系统栏占用的高度，得到页面可用高度
            var availableHeight = logicalHeight - (Window.Height - this.Height);
            AvailableQuarterHeight = availableHeight / 4;
            // 通知绑定更新属性值
            OnPropertyChanged(nameof(AvailableQuarterHeight));
        };
    }
}

代码说明 #

• 将原字段改为公共属性AvailableQuarterHeight，在页面加载后计算实际可用高度的1/4。
• 设置按钮的VerticalOptions="FillAndExpand"，让按钮填充分配到的空间。
• 转换物理像素为逻辑像素，同时考虑系统栏的占用，保证高度计算准确。

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