Flutter Web 中存在 2 个滚动条答案

【问题标题】：2 scroll bars present in flutter webFlutter Web 中存在 2 个滚动条
【发布时间】：2022-01-24 09:09:30
【问题描述】：

我有点烦。我希望我的颤动网页“页面”中始终存在一个滚动条，以向用户表明仍有一些元素可以查看它们。我在我的 Theme 类中使用滚动条 isAlwaysShown 实现了这一点。

现在，当我使用 GridView.builder 在屏幕上生成元素时，我必须事先提供高度约束，否则我会收到“高度无限”的错误消息。

问题在于，始终可见 2 个滚动条。一个来自 SingleChildScrollView，一个来自 GridView.builder。我需要带有列的 SingleChildScrollView，这样我就可以在页面底部有一个页脚。

我的问题是，如何摆脱 GridView.builder 滚动条？

提前谢谢...

我的代码：

Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(),
      drawer: const DrawerWidget(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              constraints: BoxConstraints(maxHeight: _size.height),
              margin: Responsive.isDesktop(context)
              ? const EdgeInsets.symmetric(vertical: 10)
              : null,
              padding: Responsive.isDesktop(context)
              ? desktopPadding
              : smallAndMediumPadding,
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                itemCount: 12,
                itemBuilder: (BuildContext context, int index) {
                  return GridCard(name: '', image: '');
                }
              )
            ),
            /////////////// Footer ///////////////////
            Footer()
          ]
        )
      )
    )

【问题讨论】：

无论有多少滚动条可见，在滚动中包含滚动都会使用户在 UX 方面感到困惑和沮丧。我建议尝试将页脚放在网格的底部，因为它是自己的元素，所以你只有一个滚动
要将页脚放在底部，必须使用 Column 或 ListView。或者，在 Scaffold 中使用 bottomNavigationBar 选项（这是错误的，因为它将是持久的）。

标签： flutter flutter-web

【解决方案1】：

实际上，您可以从 Container 中删除 BoxConstraints 并解决 height 问题，您在 GridView.builder 中有一个名为 shrinkWrap 的属性。只需设置true 即可解决您的身高问题。

shrinkWrap: true,

之后您可能会遇到Scrolling GridView.builder 的问题，因此请使用另一个属性primary 并将其设置为false

primary : false,

【讨论】：