使用 Xamarin 表单更新到 AppCompat 后 WebView 中的白色叠加层
Posted
技术标签:
【中文标题】使用 Xamarin 表单更新到 AppCompat 后 WebView 中的白色叠加层【英文标题】：White overlay in WebView after update to AppCompat with Xamarin Forms 【发布时间】：2016-06-12 05:50:16 【问题描述】：在我的Xamarin Forms 应用程序中，我通过插入一个将contentEditable 设置为true 的div 将WebView 用作表单。在更新到 AppCompat 样式之前，一切都很好。
现在，当用户尝试在WebView 内书写时，会出现一个奇怪的白色覆盖层（白色方块），当键盘关闭时它会消失。为了找到问题的根本原因，我创建了一个示例项目，其中只有一个页面，其中仅包含一个垂直堆栈布局，其中包含另一个堆栈布局和 webview。我注意到的是，如果内部堆栈布局的高度足以让 webview 在出现时被键盘覆盖，则会发生此问题。在这种情况下，webview 被向上推，并且出现了这个奇怪的覆盖。 webview 功能齐全，可以编写文本，即使它被这个白色方块隐藏，当键盘关闭时也会消失。
这是一个可用于测试问题的简单页面示例。添加按钮只是为了增加和减少布局的大小，以便更轻松地显示问题
public class MainPage : ContentPage
const string ContentEdit = @"<div contentEditable=""true"" style =""min-height: 200px"">";
const string ContentEditEnd = "</div>";
const string EmptyDocument = @"<body>" + ContentEdit + ContentEditEnd + @"</body>";
WebView webView;
public MainPage()
InitializePage();
void InitializePage()
webView = new WebView()
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
;
var button1 = new Button
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Text = "-",
;
var button2 = new Button
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Text = "+",
;
var tallLayout = new StackLayout()
Orientation = StackOrientation.Horizontal,
HeightRequest = 200,
BackgroundColor = Color.Lime,
Children = button1, button2, ,
;
button1.Clicked += (sender, e) => tallLayout.HeightRequest = tallLayout.Height - 20;
button2.Clicked += (sender, e) => tallLayout.HeightRequest = tallLayout.Height + 20;
var layout = new StackLayout
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = tallLayout, webView ,
;
Content = layout;
protected override void OnAppearing()
InitializeEmptyContent();
public void InitializeEmptyContent()
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = EmptyDocument;
webView.Source = htmlSource;
我也尝试使用原生 android 来重现这个简单的布局，但似乎我没有任何类似的错误。这是 Xamarin Forms 错误还是我做错了什么？
【问题讨论】：
【参考方案1】：最终问题被识别为 Xamarin bug。
【讨论】：
以上是关于使用 Xamarin 表单更新到 AppCompat 后 WebView 中的白色叠加层的主要内容，如果未能解决你的问题，请参考以下文章
xamarin 表单 - 与选择器的两种方式绑定 - 为啥我不能从后面的代码更新选择器？
注销或返回 Xamarin 表单时如何更新 Shell 页面的内容
WillEnterForeground 上的 Xamarin 表单更新 ListView
使用新的 Xamarin 表单构建时出现“XamlCTask”任务意外失败”错误