如何让 FAB 在 Xamarin 中浮动到 WebView XAML

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>

这应该适合你。

如何让 FAB 在 Xamarin 中浮动到 WebView XAML

How to get FAB to float over WebView in Xamarin XAML

xaml

webview

xamarin

xamarin.forms

floating-action-button