用鼠标在列表视图之外的 Flutter Web 滚动视图

Question

我有一个 GridView，即使鼠标在 GridView 之外，我也想使其可滚动。我试图将 GridView 添加到 SingleChildScrollView 中，并将 shrinkWrap: true 添加到 GridView。我也尝试过在 GridView 和 Expanded 周围添加一个 Column。这是代码：

return SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  constraints: BoxConstraints(maxWidth: 750),
                  child: GridView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    padding:
                        EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    itemCount: course.subjects.length,
                    itemBuilder: (context, idx) {
                      return CourseSubjectListEl(course, idx, data);
                    },
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 10,
                        childAspectRatio: 0.7,
                        mainAxisSpacing: 0,
                        crossAxisCount: 2),
                  ),
                ),
              ],
            ),
          );

如您在屏幕截图中所见，只有当鼠标悬停在 GridView 上时才能滚动。我认为这个问题可能会让网络用户感到困惑，通常你可以在任何地方用鼠标滚动。

Answer 1

您可以添加

primary: false,

属性里面 GridView。这将使 GridView 滚动物理为假，并将作用于父滚动方式（如果是您的 SingleChildScrollView）。

您可能想要删除 physics: NeverScrollableScrollPhysics(), 并添加上面的属性.

注意：确保您的滚动视图包含您要滚动的屏幕的整个宽度

用鼠标在列表视图之外的 Flutter Web 滚动视图

Flutter web scrollview with mouse outside of listview

web

flutter

flutter-layout

flutter-web