我有一个列,里面有一个页面标题,然后是Griview.count以显示项目的网格.

网格视图可以很好地向下滚动,但标题始终位于顶部,因此在默认实现中是不可滚动的.我将网格视图更改为physics: NeverScrollableScrollPhysics(),,然后网格本身不会滚动.

然后,我将容器包装在SingleChildScrollView英寸内,最终得到了一个部分有问题的工作解决方案.

到目前为止,简化的代码是:

class ExampleView extends StatefulWidget {
  const ExampleView({Key? key}) : super(key: key);

  @override
  _ExampleViewState createState() => _ExampleViewState();
}

class _ExampleViewState extends State<ExampleView> {
  @override
  Widget build(BuildContext context) {
    return _buildBody(['afsfdfdss', 'dffdfd', 'item3', 'item4 just example']);
  }

  Widget _buildBody(List<String> data) {
    return SingleChildScrollView(
      child: Container(
        height: MediaQuery
            .of(context)
            .size
            .height,
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('Some title'),
            const SizedBox(
              height: 16,
            ),
            Flexible(
              child: GridView.count(
                primary: false,
                physics: NeverScrollableScrollPhysics(),
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                crossAxisCount: 2,
                children: List<Widget>.generate(data.length,
                        (index) => _buildItem(index, data[index])),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildItem(int index, String item) {
    return Text(item);
  }
}

注: 我使用SingleChildScrollView包装容器,因为它需要知道高度,所以我使用了MediaQuery.

这在一定程度上起了作用.我可以向下滚动标题,但不能一直滚动到Gridview的末尾!所以我看到的东西都是破烂不堪的,而不是所有的.

例如,如果我增加高度:

height: MediaQuery .of(context).size.height + 1000,

然后这很好地工作,我可以向下滚动到网格视图的底部,甚至更远,这样就有了很多空白.

什么才是正确的解决办法: 只有整个_BuildBody小部件的滚动条,所以当我向下滚动时,标题也会向下滚动,我可以一直滚动到网格视图的底部. 用我目前的方法,问题是事先不知道高度,所以单一的滚动条不能很好地工作

我也上传了一些说明性的视频,以便更容易地解释. 默认行为当然不是错误,并按预期工作,标题不会滚动. https://www.youtube.com/shorts/uRBUO49XM6E个 我希望能够滚动标题时,向下滚动网格项目.

推荐答案

为此,您不需要高度,只需删除Flexible和Container的height,然后将shrinkWrap: trueGridView相加,如下所示:

SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('Some title'),
            const SizedBox(
              height: 16,
            ),
            GridView.count(
                primary: false,
                physics: NeverScrollableScrollPhysics(),
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                crossAxisCount: 2,
                shrinkWrap: true,
                children: List<Widget>.generate(data.length,
                        (index) => _buildItem(index, data[index])),
            ),
          ],
        ),
      ),
    )

Flutter相关问答推荐

具有可变高度小部件的SingleChildScrollView内的列

无法在GroupButton内部正确呈现

ProviderContainer和GoRouter

相同的Flutter 代码库,但Firebase登录适用于Web应用程序,但无法登录iOS应用程序

如何组合匹配器

从外部类动态更改IconButton的图标

如何使用Dio/Ffltter(前端)和amp;Go(后端)向API发送正确的请求

Flutter 隔离.使用多个参数运行

悬停时打开Flutter 下拉按钮

火焰Flutter 在多个向量之间插补2

如何处理平台游戏的对象冲突?

Select 文本时如何更改 Flutter 中的光标 colored颜色 ?

Flutter 3.10 - 'window' 已弃用,不应使用

我怎样才能消除我的 Column 子元素之间的差距?

Flutter 错误:OutletListModel类型的值不能分配给List类型的变量?

如何在 Flutter 执行通知时运行后台代码?

函数中的变量在 Dart 中应该有什么关键字?

我想在数组中添加项目

如何使用 Riverpod 在运行时动态创建提供程序?

在另一个页面编辑数据后更新 Flutter 页面的惯用方法?