水平模式下，SingleChildScrollView中的所有项目都不会发生flutter滚动

Question

我在

SingleChildScrollView

中创建了一些项目，问题是没有一个项目以水平模式滚动，但相同的代码以垂直模式滚动项目。

项目可滚动，当

scrollDirection: Axis.vertical

在Android平台可以水平滚动，但在web和Windows窗体上不能滚动。

Scaffold(
  appBar: CustomAppBar(),
  body: RawScrollbar(
    thumbVisibility: true,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: AlwaysScrollableScrollPhysics(),
      child: Row(
        children: List.generate(
            50,
            (index) => Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                      height: 50,
                      color: Colors.blue,
                      child: Center(child: Text('Item $index'))),
                )),
      ),
    ),
  ));

Answer 1

要使您的项目可在所有平台（包括 Web 和桌面）上水平滚动，您可以使用

ScrollConfiguration

。这确保触摸和鼠标输入都可以触发滚动事件。出现此问题的原因是，在 Web 和 Windows 等平台上，默认行为可能仅侦听特定的输入类型。通过显式指定可以控制滚动的设备，您可以确保它可以跨各种平台工作。

以下是调整代码的方法：

ScrollConfiguration(
  behavior: ScrollConfiguration.of(context).copyWith(
    // Allow scrolling with both touch and mouse devices
    dragDevices: {
      PointerDeviceKind.touch,  // For touch-based devices (e.g., mobile)
      PointerDeviceKind.mouse,  // For mouse-based devices (e.g., desktop)
    },
  ),
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    physics: AlwaysScrollableScrollPhysics(),
    child: Row(
      children: List.generate(
        50,
        (index) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 50,
            color: Colors.blue,
            child: Center(
              child: Text('Item $index'),
            ),
          ),
        ),
      ),
    ),
  ),
)