Xamarin Forms Android端WebView覆盖页面元素，Label无法显示求助

嘿，你遇到的Android端WebView占满屏幕、Label消失的问题，根源其实在后台代码里藏着呢！

看这段OnAppearing()里的代码：

Content = hybridWebView;

这行代码直接把整个ContentPage的Content替换成了hybridWebView——相当于把你在XAML里精心搭建的包含Label的StackLayout完全覆盖掉了，这就难怪Label看不到了！

第一步：删掉这行多余的代码 #

直接移除Content = hybridWebView;就行，因为你已经在XAML里把hybridWebView放进布局结构中了，只需要给它设置Source加载内容就够，完全没必要替换整个页面内容。

修改后的OnAppearing()代码：

protected override void OnAppearing()
{
    base.OnAppearing();
    NavigationPage.SetHasNavigationBar(this, false);
    if (isFirstRun)
    {
        jsonOutput = JsonConvert.SerializeObject(payData);
        var urlSource = new UrlWebViewSource();
        string url = DependencyService.Get<IBaseUrl>().Get();
        TempUrl = Path.Combine(url, "xamarinhtmlmotor.html");
        urlSource.Url = TempUrl;
        hybridWebView.Source = urlSource;
        isFirstRun = false;
        // 删掉下面这行多余的代码！
        // Content = hybridWebView;
    }
}

第二步：优化布局（可选但建议） #

再看你的XAML布局，HybridWebView外面套了一层ScrollView，但WebView本身自带滚动功能，嵌套两层滚动控件很容易在Android端引发滚动冲突、布局异常的问题。建议把外层的ScrollView去掉：

修改后的XAML布局：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:d="http://xamarin.com/schemas/2014/forms/design" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:other="clr-namespace:YourCustomNamespace"
             mc:Ignorable="d" 
             x:Class="Test.Views.MyWebView">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Red" VerticalOptions="FillAndExpand" Orientation="Vertical">
            <Label HeightRequest="100" TextColor="Black" Text="Sample"/>
            <!-- 移除多余的ScrollView嵌套 -->
            <other:HybridWebView x:Name="hybridWebView" 
                                 VerticalOptions="FillAndExpand" 
                                 Navigating="webView_Navigating" 
                                 HeightRequest="400" 
                                 Navigated="MywebView_Navigated" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

额外注意点 #

• 检查你的HybridWebView自定义渲染器，确保Android端没有设置MatchParent这类强制占满屏幕的属性，保持布局自适应。
• 如果WebView加载后仍出现布局挤压，可以尝试给StackLayout的子元素调整VerticalOptions（比如设为StartAndExpand）或者微调HeightRequest来合理分配空间。

这样修改后，Android端的Label就能正常显示，WebView也会乖乖待在布局里啦！

内容的提问来源于stack exchange，提问作者D.madushanka