Flutter Web 中存在 2 个滚动条

Question

我有点烦恼。我希望在我的 flutter web 'page' 中始终出现一个滚动条，以向用户指示仍然有一些元素可以查看它们。我在我的主题 class.

中使用 scrollbar isAlwaysShown to true 实现了这一点

现在，当我使用 GridView.builder 在屏幕上生成元素时，我必须事先提供高度限制，否则我会得到一个错误 'height is infinite'。

问题是，始终有 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()
          ]
        )
      )
    )

Answer 1

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

shrinkWrap: true,

然后你可能会遇到 Scrolling 和 GridView.builder 的问题，所以要解决这个问题，请使用另一个属性 primary并将其设置为 false

primary : false,

Answer 2

您不应在彼此内部使用多个 Scrollable 来获得页脚功能。通过在内部可滚动 (GridView) 上使用 shrinkWrap，您可以有效地将它变成一个常规的不可滚动小部件，并使用外部视图 (SingleChildScrollView) 的滚动。这对性能来说很糟糕，因为 Flutter 每次都必须构建、布局和（可能）渲染整个 GridView，包括所有项目。

您应该改为使用 CustomScrollView 来显示您的网格和页脚，如下所示：

Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverPadding(
          // not sure what you were trying to do with your padding
          padding: (Responsive.isDesktop(context)
                  ? const EdgeInsets.symmetric(vertical: 10)
                  : EdgeInsets.zero) +
              (Responsive.isDesktop(context)
                  ? desktopPadding
                  : smallAndMediumPadding),
          sliver: SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) => GridCard(name: '', image: ''),
              childCount: 12,
            ),
          ),
        ),
        SliverToBoxAdapter(
          child: Footer(),
        ),
      ],
    ),
  )

Flutter Web 中存在 2 个滚动条

2 scroll bars present in flutter web

flutter

flutter-web