在颤动的webview中禁用水平滚动

Posted 2023-02-23

【中文标题】在颤动的webview中禁用水平滚动

【英文标题】：Disable horizontal scrolling in flutter webview

【发布时间】：2019-04-20 03:53:35

【问题描述】：

我正在使用这个颤振WebView 插件https://pub.dartlang.org/packages/flutter_webview_plugin

应用程序运行良好。但是，当网页加载时，某些网站中有一个水平滚动条，如果我水平滚动，这些只是网站中的空白区域。我想禁用此水平滚动功能以保持用户体验准确。

Horizontal Scrolling in the screenshot I want the webview look like this with horizontal scrolling disabled

测试代码如下：

webview.dart

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebViewExample extends StatefulWidget 
  @override
  _WebViewExampleState createState() => _WebViewExampleState();


class _WebViewExampleState extends State<WebViewExample> 
  FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
  var urlString = "https://www.prothomalo.com/bangladesh/article/1565521/%E0%A6%B6%E0%A6%A4%E0%A6%AD%E0%A6%BE%E0%A6%97-%E0%A6%B8%E0%A7%81%E0%A6%B7%E0%A7%8D%E0%A6%A0%E0%A7%81-%E0%A6%A8%E0%A6%BF%E0%A6%B0%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%9A%E0%A6%A8-%E0%A6%B9%E0%A6%AC%E0%A7%87-%E0%A6%A8%E0%A6%BE-%E0%A6%95%E0%A6%AC%E0%A6%BF%E0%A6%A4%E0%A6%BE-%E0%A6%96%E0%A6%BE%E0%A6%A8%E0%A6%AE";

  @override
  void initState() 
    super.initState();
    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) 
      print(wvs.type);
    );
  

  @override
  Widget build(BuildContext context) 
    return WebviewScaffold(
      appBar: AppBar(
        title: new Text(
          'WebView Test',
          style: new TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      url: urlString,
      withZoom: false,
    );
  

【问题讨论】：

有什么更新吗？

很遗憾，还没有更新。

我们不得不使用 flutter_html_view 插件而不是本地 html 没有 javascript 支持

【参考方案1】：

就我而言，将WebView 包装在GestureDetector 小部件中并覆盖onHorizontalDragUpdate() 回调就足够了。

WebViewController _webViewController;

GestureDetector(
    onHorizontalDragUpdate: (updateDetails) ,
    child: WebView(
      initialUrl: 'about:blank',
      onWebViewCreated: (WebViewController webViewController) 
        _webViewControllerHeader = webViewController;
      ,
    ),
)

要在flutter webview中禁用垂直滚动，您可以相应地覆盖onVertivalDragUpdate()。

查找更多信息 here 和 here。

【参考方案2】：

你可以使用 webview_flutter，https://pub.dev/packages/webview_flutter

不添加任何手势识别器。

例如，如果您有一个 ListView，并且在列表的每个项目内，您都有代表 webview 的小窗口。不添加gestureRecognizers将不允许您在webview中滚动，但如果您确实想在listview和webview中垂直滚动，您将需要gestureRecognizers， 语法是：

WebView(
  initialUrl: someUrl,
  gestureRecognizers: Set()
  ..add(Factory<VerticalDragGestureRecognizer>(
  () => VerticalDragGestureRecognizer())),
)