.NET MAUI中如何让按钮始终固定在动态调整的BottomSheet底部？

你的核心问题是包含按钮的Border作为Grid子元素，却错误使用了AbsoluteLayout的布局属性，导致它基于全屏高度定位，而非BottomSheet的当前高度，最终在BottomSheet处于60%高度时超出可视区域。

解决方案 #

通过以下修改让按钮始终固定在BottomSheet底部：

1. 移除Border上的AbsoluteLayout.LayoutBounds和AbsoluteLayout.LayoutFlags属性，交给Grid的Row布局控制位置
2. 保留Grid的RowDefinitions="Auto, *, Auto"配置，让第三行（按钮行）自动固定在Grid底部
3. 调整Grid的底部内边距，避免按钮贴紧BottomSheet边缘

修改后的完整XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<the49:BottomSheet x:Class="Helix.UI.Mobile.Modules.ProductModule.Views.ProductViews.BottomSheetViews.ProductStockLocationBottomSheetView"
                   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   xmlns:fontAwesome="clr-namespace:Helix.UI.Mobile.Helpers.FontAwesomeHelper"
                   xmlns:the49="https://schemas.the49.com/dotnet/2023/maui"
                   xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                   x:Name="this"
                   Padding="0,20,0,0"
                   BackgroundColor="White"
                   HandleColor="{StaticResource Primary}"
                   HasBackdrop="True"
                   HasHandle="True">
    <the49:BottomSheet.Detents>
        <the49:FullscreenDetent />
        <!--<the49:ContentDetent />-->
        <the49:RatioDetent Ratio="0.60" />
    </the49:BottomSheet.Detents>
    <the49:BottomSheet.Behaviors>
        <toolkit:EventToCommandBehavior Command="{Binding GetDataCommand}" EventName="Loaded" />
    </the49:BottomSheet.Behaviors>
  <AbsoluteLayout>
    <Grid Padding="0,10,0,10"
          AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
          AbsoluteLayout.LayoutFlags="All"
          RowDefinitions="Auto, *, Auto"
          RowSpacing="10">
        <!--#region Title-->
        <Label Grid.Row="0"
               FontAttributes="Bold"
               FontSize="Large"
               HorizontalOptions="Center"
               Text="Stok Yeri Seçimi"
               VerticalOptions="Center" />
        <!--#endregion-->
      <CollectionView Grid.Row="1" ItemsSource="{Binding Items}" ... </CollectionView>
      <Border Grid.Row="2"
              Padding="10,0"
              BackgroundColor="Transparent"
              StrokeThickness="0"
              VerticalOptions="End">
        <Button BackgroundColor="{StaticResource Primary}" Text="Tamam">
          <Button.GestureRecognizers>
             <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
          </Button.GestureRecognizers>
        </Button>
     </Border>
   </Grid>
 </AbsoluteLayout>
</the49:BottomSheet>

关键修改说明 #

• 移除了Border上的AbsoluteLayout.LayoutBounds和AbsoluteLayout.LayoutFlags，让Grid的Row布局接管按钮位置
• 将Grid的底部Padding从0改为10，给按钮留出足够的底部空间
• Grid的RowDefinitions="Auto, *, Auto"确保：
  • 第一行（标题）自适应高度
  • 第二行（CollectionView）占据标题和按钮之间的所有剩余空间
  • 第三行（按钮）自适应高度并固定在Grid底部

修改后，Grid会完全填充BottomSheet的当前高度（无论是60%还是全屏），按钮会始终固定在BottomSheet的可视区域底部。

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