如何在flutter web上启用水平滚动？

Question

我讨厌发布以前提出的问题，但我认为以前针对此问题的解决方案不再受支持。我使用下面的结构来启用滚动。垂直滚动在网络和移动设备上很好，但水平滚动在网络上不活跃。我搜索了这个问题，发现新版本的flutter不支持网页上的水平滚动。 即使在 Gmail 等一些 Google 产品中，此功能也无法使用。

Scrollbar(
                thumbVisibility: true,
                trackVisibility: true,
                child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Column(children: [scrollWiew()]))))

有没有新的方法来激活网络上的水平滚动？也许使用浏览器的默认滚动条可能适合我的项目，但我不知道它是否可行。

谢谢。

Answer 1

您应该添加自定义滚动行为，并且水平滚动将起作用。

class CustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

然后在

MaterialApp

小部件中：

scrollBehavior: CustomScrollBehavior(),

Answer 2

将子列设为行

Scrollbar(
            thumbVisibility: true,
            trackVisibility: true,
            child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(children: [scrollWiew()]))))

Answer 3

除了上面的答案之外，当 Flutter Web 上启用水平滚动时，您可能会遇到水平滚动触发浏览器的前进/后退导航命令的问题。

为了防止这种情况，您需要在

index.html

页面添加一个条目：

html, body {
  overscroll-behavior-x: none;
}

Flutter 团队的 GitHub 页面上有一张票证提出了这个问题，并包含上述解决方案。您可以在这里找到它：https://github.com/flutter/flutter/issues/152588