在Flutter WebView中禁用水平滚动

Question

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

应用程序运行完美。但是，当网页加载时，有些网站会出现横向滚动条，如果我横向滚动，网站上只有白色的空白区域。我想禁用此横向滚动功能，以使用户体验更好。

截图中的横向滚动
我希望WebView看起来像这样，禁用了横向滚动

以下是测试代码：

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,
    );
  }
}

- Abdullah Al Nahid

---

有关那个的任何更新吗？ - dubace

很遗憾，目前还没有更新。 - Abdullah Al Nahid

我们不得不使用flutter_html_view插件，而且只支持本地html而不支持javascript。 - dubace

@amine-boularbah answer 对我来说完美地工作了。 - Filipe Nanclarez

Answer 1

在我的情况下，只需要将 WebView 包装在一个 GestureDetector 组件中，并覆盖 onHorizontalDragUpdate() 回调函数即可。

WebViewController _webViewController;

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

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

查找更多信息此处和此处。

- kosiara - Bartosz Kosarzycki