Flutter web - 水平singlechildscrollview无法用鼠标滚轮滚动

Question

我想在 Flutter web 中用鼠标滚轮水平滚动 SingleChildScrollView() ，但 SingleChildScrollView() 位于 ListView() 内部，当我尝试用鼠标滚轮滚动它时，它会滚动 ListView() 。

这是我的代码

      child: ListView(
        children: [
            Container(
            width: 420.0,
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    'Popular Search',
                  ),
                ),
                Expanded(
                  flex: 3,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: categoriesList.map((e) {
                        return Container(
                          decoration: BoxDecoration(
                            borderRadius:
                                BorderRadius.all(Radius.circular(12.0)),
                            color: Colors.white,
                          ),
                          child: Text(
                            e,
                            style: TextStyle(
                              fontSize: 13.0,
                            ),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),

Answer 1

用Listener包裹你的内部 SingleChildScrollView并添加onPointerSignal回调，当使用鼠标滚轮时你可以得到 y 轴的偏移量。然后，滚动内部 SingleChildScrollView 并禁止外部 ListView 滚动。这是我的代码，它可以在 dartpad 上运行。

final outerController = ScrollController();
final innerController = ScrollController();

ListView(
      controller: outerController,
      children: [
        Container(
          width: 420.0,
          child: Row(
            children: [
              Expanded(
                child: Text(
                  'Popular Search',
                ),
              ),
              Expanded(
                  flex: 3,
                  child: Listener(
                    onPointerSignal: (event) {
                      if (event is PointerScrollEvent) {
                        final offset = event.scrollDelta.dy;
                        innerController.jumpTo(innerController.offset + offset);
                        outerController.jumpTo(outerController.offset - offset);
                      }
                    },
                    child: SingleChildScrollView(
                      controller: innerController,
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: categoriesList.map((e) {
                          return Container(
                            decoration: BoxDecoration(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(12.0)),
                              color: Colors.white,
                            ),
                            child: Text(
                              e,
                              style: TextStyle(
                                fontSize: 13.0,
                              ),
                            ),
                          );
                        }).toList(),
                      ),
                    ),
                  ))
            ],
          ),
        ),
      ],
    ),