MAUI页面中如何将按钮控件置于页面底部？

问题出在你的根布局VerticalStackLayout默认只会占据内容所需的高度，不会撑满整个页面，因此内部的HorizontalStackLayout设置VerticalOptions="End"无法让按钮定位到页面底部。以下是两种可行的实现方式：

方式一：修改现有VerticalStackLayout结构 #

给根VerticalStackLayout添加VerticalOptions="FillAndExpand"让它撑满页面，然后在按钮容器前添加一个占位元素填充剩余空间：

<?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"
             xmlns:vm="clr-namespace:TimeApp.ViewModels"
             x:Class="TimeApp.Views.MainPage"
             xmlns:helpers="clr-namespace:TimeApp.Helpers"
             x:DataType="vm:MainViewModel">
    <!-- 让根VerticalStackLayout撑满页面 -->
    <VerticalStackLayout Padding="25" VerticalOptions="FillAndExpand">
        <Label Text="¡ Hola, Juan Pérez !" FontSize="20" FontAttributes="Bold" HorizontalTextAlignment="Center" />
        <Label Text="Empresa S.A." HorizontalTextAlignment="Center" />
        <HorizontalStackLayout>
            <Label Margin="0, 22, 10, 0" FontFamily="FontAwesomeRegular" Text="{x:Static helpers:FontAwesomeIcons.Calendar}"></Label>
            <Label Margin="0, 20, 0, 0" Text="Martes, 6 de junio de 2023" />
        </HorizontalStackLayout>
        <Grid Margin="0, 20, 0, 0" 
              ColumnDefinitions="*, *" 
              RowDefinitions="Auto, Auto, Auto, Auto">
            <Label Margin="0, 5, 0, 5" Grid.Row="0" Grid.Column="0" Text="Turno actual" />
            <Label Margin="0, 5, 0, 5" Grid.Row="0" Grid.Column="1" Text="08:00 a 19:00" />
            <Label Margin="0, 5, 0, 5" Grid.Row="1" Grid.Column="0" Text="Hora de llegada" />
            <Label Margin="0, 5, 0, 5" Grid.Row="1" Grid.Column="1" Text="07:55" />
            <Label Margin="0, 5, 0, 5" Grid.Row="2" Grid.Column="0" Text="Horas trabajadas" />
            <Label Margin="0, 5, 0, 5" Grid.Row="2" Grid.Column="1" Text="5 h 20 m" />
        </Grid>
        <!-- 添加占位元素，填充顶部内容到按钮之间的空间 -->
        <BoxView VerticalOptions="FillAndExpand" BackgroundColor="Transparent"/>
        <HorizontalStackLayout BackgroundColor="Gray">
            <Button Text="Entrada" BackgroundColor="Green" HorizontalOptions="Start" />
            <Button Text="Salida" BackgroundColor="Red" HorizontalOptions="End" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
</ContentPage>

方式二：改用Grid作为根布局（更推荐） #

Grid布局在处理这种“顶部内容+底部固定元素”的场景更直观，通过行定义分配空间：

<?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"
             xmlns:vm="clr-namespace:TimeApp.ViewModels"
             x:Class="TimeApp.Views.MainPage"
             xmlns:helpers="clr-namespace:TimeApp.Helpers"
             x:DataType="vm:MainViewModel">
    <!-- 根Grid分为三行：Auto（顶部内容）、FillAndExpand（占位）、Auto（底部按钮） -->
    <Grid Padding="25">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- 顶部内容容器 -->
        <VerticalStackLayout Grid.Row="0">
            <Label Text="¡ Hola, Juan Pérez !" FontSize="20" FontAttributes="Bold" HorizontalTextAlignment="Center" />
            <Label Text="Empresa S.A." HorizontalTextAlignment="Center" />
            <HorizontalStackLayout>
                <Label Margin="0, 22, 10, 0" FontFamily="FontAwesomeRegular" Text="{x:Static helpers:FontAwesomeIcons.Calendar}"></Label>
                <Label Margin="0, 20, 0, 0" Text="Martes, 6 de junio de 2023" />
            </HorizontalStackLayout>
            <Grid Margin="0, 20, 0, 0" 
                  ColumnDefinitions="*, *" 
                  RowDefinitions="Auto, Auto, Auto, Auto">
                <Label Margin="0, 5, 0, 5" Grid.Row="0" Grid.Column="0" Text="Turno actual" />
                <Label Margin="0, 5, 0, 5" Grid.Row="0" Grid.Column="1" Text="08:00 a 19:00" />
                <Label Margin="0, 5, 0, 5" Grid.Row="1" Grid.Column="0" Text="Hora de llegada" />
                <Label Margin="0, 5, 0, 5" Grid.Row="1" Grid.Column="1" Text="07:55" />
                <Label Margin="0, 5, 0, 5" Grid.Row="2" Grid.Column="0" Text="Horas trabajadas" />
                <Label Margin="0, 5, 0, 5" Grid.Row="2" Grid.Column="1" Text="5 h 20 m" />
            </Grid>
        </VerticalStackLayout>

        <!-- 底部按钮容器 -->
        <HorizontalStackLayout Grid.Row="2" BackgroundColor="Gray">
            <Button Text="Entrada" BackgroundColor="Green" HorizontalOptions="Start" />
            <Button Text="Salida" BackgroundColor="Red" HorizontalOptions="End" />
        </HorizontalStackLayout>
    </Grid>
</ContentPage>

关键说明 #

• 方式一通过VerticalOptions="FillAndExpand"让根布局撑满页面，再用透明占位元素把按钮推到底部；
• 方式二用Grid的行定义，*号行自动填充剩余空间，让底部按钮始终固定在页面底部，布局逻辑更清晰，是MAUI中这类场景的常用方案。

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