.NET MAUI实现按钮固定在手机右下角并悬浮于ScrollView之上

需求 #

实现类似Web应用中CSS position: fixed; bottom: 20px; right: 20px 的效果，让按钮固定在手机屏幕右下角，且悬浮于ScrollView内容上方。

问题分析 #

原代码使用VerticalStackLayout作为根布局，内部的AbsoluteLayout无法脱离父容器的布局流，导致按钮无法固定在屏幕上。FlexLayout本身不支持类似CSS的绝对定位属性，因此需要改用AbsoluteLayout作为根容器来实现需求。

解决方案代码 #

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <!-- 标题栏 -->
    <Grid BackgroundColor="{StaticResource PrimaryColor}" 
          ColumnDefinitions="150, *" 
          HeightRequest="50" 
          AbsoluteLayout.LayoutBounds="0,0,1,AutoSize"
          AbsoluteLayout.LayoutFlags="WidthProportional"
          Padding="5,0,15,0">
        <Label Style="{StaticResource BrandLabelWhite}" Margin="0,0,0,0">Sample App</Label>

        <HorizontalStackLayout Grid.Column="1" HorizontalOptions="EndAndExpand">
            <Image HeightRequest="22" HorizontalOptions="Center" VerticalOptions="Center">
                <Image.Source>
                    <FontImageSource FontFamily="FaIcons"
                                     Glyph="{x:Static fonts:FontAwesomeSolidIcons.EllipsisVertical}"
                                     Size="30" Color="{StaticResource White}"/>
                </Image.Source>
            </Image>
        </HorizontalStackLayout>
    </Grid>

    <!-- 可滚动内容区域 -->
    <ScrollView AbsoluteLayout.LayoutBounds="0,50,1,1"
                AbsoluteLayout.LayoutFlags="All">
        <Label Text="这里可以放置长文本或其他内容，测试滚动时按钮会保持悬浮在上方" Margin="10"/>
    </ScrollView>

    <!-- 固定悬浮的右下角按钮 -->
    <Button Style="{StaticResource PrimaryButton}"              
            HeightRequest="60" WidthRequest="60"
            CornerRadius="50"
            AbsoluteLayout.LayoutBounds="1,1,AutoSize,AutoSize"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            Margin="0,0,20,20">
        <Button.ImageSource>
            <FontImageSource FontFamily="FaIcons"
                             Glyph="{x:Static fonts:FontAwesomeSolidIcons.Plus}"
                             Size="20" Color="{StaticResource White}"/>
        </Button.ImageSource>
    </Button>
</AbsoluteLayout>

关键实现要点 #

• 根容器选择：使用AbsoluteLayout作为根布局，这是实现固定定位的核心，它允许子元素脱离常规布局流进行定位。
• 标题栏布局：通过WidthProportional让标题栏宽度占满屏幕，高度自适应内容。
• ScrollView布局：设置LayoutFlags="All"，让ScrollView填充标题栏下方的所有可用空间。
• 按钮定位：
  • PositionProportional将按钮的右上角定位在屏幕右下角（坐标1,1对应屏幕右下角）。
  • Margin="0,0,20,20"设置按钮与屏幕右边缘、下边缘的距离，对应CSS的right:20px和bottom:20px。
  • AutoSize让按钮根据自身内容自适应大小，也可以手动指定宽高。

这样设置后，按钮会始终悬浮在所有内容上方，不会随ScrollView的滚动而移动，完全符合需求。

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