xamarin.forms - WebView 控件不起作用/如何实现滚动和点击

Question

我正在使用 Web 视图在我的应用程序上显示 html 文本。我需要用户能够滚动和点击文本。然而，这似乎几乎是不可能的。TapGesture 只是没有触发，根据我的搜索，它在我这边并没有错，但似乎因为 webview 它通常用于显示网页，并且它们包含不需要点击手势的按钮。因此，如果我使用我的自定义控件，它可以工作，但是我无法滚动内容，如果我在 webview 周围使用滚动，那么它不会根据需要工作。一旦我实现了自定义控件，我就可以在我的输出中看到动作，但是内容不会移动。

public class ExtendedWebView : WebView
    {
        public ExtendedWebView()
        {
        }

        public event EventHandler Touched;

        public void OnTouched() =>
        Touched?.Invoke(this, null);
        public ICommand PannedCommand
        {
            set { SetValue(PannedCommandProperty, value); }
            get { return (ICommand)GetValue(PannedCommandProperty); }
        }
        public static readonly BindableProperty PannedCommandProperty = BindableProperty.Create(nameof(PannedCommand), typeof(ICommand), typeof(ExtendedWebView));
    }

[assembly: ExportRenderer(typeof(ExtendedWebView), typeof(ExtendedWebViewRenderer))]
namespace AVAT.Droid.Renderers
{
    public class ExtendedWebViewRenderer : WebViewRenderer
    {
        public static int _webViewHeight;
        static ExtendedWebView _xwebView = null;
        public WebView _webView;
        bool isScroll;
        public ExtendedWebViewRenderer(Context context) : base(context)
        {
           
        }
     
        class ExtendedWebViewClient : WebViewClient
        {
            WebView _webView;
            public async override void OnPageFinished(WebView view, string url)
            {
                try
                {
                    _webView = view;
                    if (_xwebView != null)
                    {

                        view.Settings.JavaScriptEnabled = true;
                        await Task.Delay(100);
                        string result = await _xwebView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                        _xwebView.HeightRequest = Convert.ToDouble(result);


                    }
                    base.OnPageFinished(view, url);
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"{ex.Message}");
                }
            }
            public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, IWebResourceRequest request)
            {
                return true;
            }
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            _xwebView = e.NewElement as ExtendedWebView;
            _webView = Control;
          
            if (e.OldElement == null)
            {
                _webView.SetWebViewClient(new ExtendedWebViewClient());
            }
            _webView.Touch += (object sender, TouchEventArgs eventArgs) =>
            {

                if (eventArgs.Event.Action == Android.Views.MotionEventActions.Down)
                {
                    var webview = Element as ExtendedWebView;
             
                    webview.OnTouched();
                }
            };
            _webView.Touch += _webView_Touch;

            void _webView_Touch(object sender, TouchEventArgs e)
            {
                var webview = Element as ExtendedWebView;
                bool isMove = true;
                Console.WriteLine(e.Event.Action);
                switch (e.Event.Action)
                {
                    case Android.Views.MotionEventActions.Down:

                        isScroll = true;
                        break;
                    case Android.Views.MotionEventActions.Move:
                        isScroll = true;
                        if (isMove)
                        {
                            isMove = false;
                            webview.PannedCommand?.Execute(null);
                        }
                        break;
                    case Android.Views.MotionEventActions.Up:

                        if (!isScroll)
                        {
                            webview.OnTouched();
                        }
                        break;
                    default:
                        break;
                }
            }
        }
    }
}

和 Xaml

  <controls:ExtendedWebView
                                        x:Name="webView"
                                        Grid.ColumnSpan="1"
                                        HorizontalOptions="FillAndExpand"
                                        Source="{Binding CZ, Mode=OneWay}"
                                        Touched="webView_Touched"/>

也许你们有经验如何实现控制点击和滚动？

标签： xamarin.forms

Answer 1

我创建了一个带有按钮单击事件的 html 页面。请检查用于加载 html 的方式。

html:

<!DOCTYPE html>
<html>
<head>
<style>
    .label {
        width: 800px;
        background-color: #4CAF50;
    }

    .button {
        width: 800px;
    }
</style>
</head>
<body>
<h1>Test Page</h1>
<label class="label" onclick="alert('Hello world!')">
    Click Me! This is a text label.
</label>
<button class="button" onclick="alert('Hello world!')">
   button click
</button>
</body>
</html>

代码：用于为 webview 加载 html 的代码。

   string fileName = "XamarinDemo.webview.html";

        var assembly = typeof(XamarinDemo.MainPage).Assembly;

        Stream stream = assembly.GetManifestResourceStream(fileName);
        if (stream == null)
        {
            throw new InvalidOperationException(
                String.Format("Cannot create stream from specified URL: {0}", fileName));
        }

        StreamReader reader = new StreamReader(stream);
        string htmlString = reader.ReadToEnd();

        HtmlWebViewSource html = new HtmlWebViewSource();
        html.Html = htmlString;

        Webview_html.Source = html;

截屏：