在列表视图之外使用鼠标颤动 Web 滚动视图

Posted 2023-02-23

【中文标题】在列表视图之外使用鼠标颤动 Web 滚动视图

【英文标题】：Flutter web scrollview with mouse outside of listview

【发布时间】：2021-09-04 14:00:02

【问题描述】：

我有一个 GridView，即使鼠标在 GridView 之外，我也希望它可以滚动。我试图在 SingleChildScrollView 中添加 GridView 并将 shrinkWrap: true 添加到 GridView。我也尝试在 GridView 和 Expanded 周围添加一个列。代码如下：

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 上时滚动。我认为这个问题可能会让网络用户感到困惑，因为您通常可以在任何地方用鼠标滚动。

【参考方案1】：

你可以添加

primary: false,

GridView 内的属性。这将使 GridView 滚动物理错误，并将作用于父级滚动方式（如果是您的 SingleChildScrollView）。

您可能想要删除physics: NeverScrollableScrollPhysics(), 并添加上述属性。

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

【讨论】：

如何确保滚动视图包含整个屏幕宽度？只有 primary: false 字段不起作用。

我只是在一个 Row 中使用了一个包裹的元素。这是一种更好的方法吗？

我不确定Row。要包含整个宽度的 SingleChildScrollView 可以通过使其父级包含宽度可能是 SizedBox 或任何其他小部件来制作。 SingleChildScrollView 将其父级的大小包含在其中。