如何让 FAB 漂浮在 Xamarin XAML 中的 WebView 上

Question

我正在尝试设置一个 XAML 表单定义，它显示一个 WebView，但右下角有一个浮动操作按钮。

如果我使用 AbsoluteLayout，FAB 会正确显示在 WebView 上。但是，由于 Webview 的 Height/WidthRequest，它以全尺寸显示 - 文本从右侧消失并且不换行，因此页面不会滚动。

<ContentPage ...snip... Title="Document">
    <StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
        <WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
        <Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}" 
                               VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
        <customControls:ImageButton x:Name="fab" 
                                Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                Command="{Binding AddCommand}"
                                AbsoluteLayout.LayoutFlags="PositionProportional"
                                AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
                                Margin="10" />
    </StackLayout>
</ContentPage>

如果我使用 StackLayout，WebView 的大小和滚动正确，但是 FAB 占据屏幕底部的全宽条，并且文本不会出现在其后面 - WebView 停止在其上方。

我在过去的一个半小时里尝试了所有我能想到的嵌套布局组合来解决这个问题，但就是无法正确解决这个问题 - 那里有一些布局天才请告诉我如何解决这个问题.

谢谢

Answer 1

使用Grid，不要表示行或列。

类似这样的：

<Grid Padding="5,5,5,5"
      VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand">
    <WebView x:Name="webViewDocument"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand" />
    <Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
           VerticalOptions="End"
           HorizontalOptions="Center"
           HorizontalTextAlignment="End"
           FontSize="Small" />
    <customControls:ImageButton x:Name="fab"
                                Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                Command="{Binding AddCommand}"
                                VerticalOptions="End"
                                HorizontalOptions="End"
                                Margin="10" />
</Grid>

这应该适合你。