交错网格视图在 Flutter 中不向上滚动

Question

伙计们，我正在尝试构建一个类似 Instagram 搜索的页面，但使用交错网格视图包进行了一些更改。但是当我尝试滚动时它不会滚动但图像是可见的。

当我尝试滚动时出现此错误。

D/ColorViewRootUtil( 1284): nav gesture mode swipeFromBottom ignore false downY 1776 mScreenHeight 2340 mScreenWidth 1080 mStatusBarHeight 54 globalScale 1.125 nav mode 3 event MotionEvent { action=ACTION_DOWN, actionButton=0, id[0]=0, x[0]=866.0, y[0]=1776.0, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, classification=NONE, metaState=0, flags=0x0, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=36924392, downTime=36924392, deviceId=6, source=0x1002, displayId=0 } rotation 0

我的个人资料页面在app bar 内包含一个search bar，然后在标题的listview 下方，在其下方又是一个listView of categories，在container of height about 70*70 中包含图像，在下方是我想要的Staggered Grid View。一切正常，但 Staggered Grid view 不滚动

代码如下，谁能告诉我我做错了什么。

完整代码在这里-------> https://github.com/prajesh9921/Problem-Repo-for-Stack.git

class GridList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
      child: StaggeredGridView.countBuilder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        crossAxisCount: 2,
        itemCount: imageList.length,
        itemBuilder: (context, index) {
          return ImageCard(
            imageData: imageList[index],
          );
        },
        staggeredTileBuilder: (index) =>
            StaggeredTile.count(1,1),
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
    );
  }
}


class ImageCard extends StatelessWidget {
  const ImageCard({this.imageData});

  final ImageData imageData;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
        child: Image.network(imageData.imageUrl, fit: BoxFit.cover));
  }
}


class ImageData {
  final String id;
  final String imageUrl;

  const ImageData({
    @required this.id,
    @required this.imageUrl,
  });
}

  List<ImageData> imageList = [
  ImageData(
    id: 'id-001',
    imageUrl: 'https://picsum.photos/seed/image001/500/500',
  ),
  ImageData(
    id: 'id-002',
    imageUrl: 'https://picsum.photos/seed/image002/500/800',
  ),
  ImageData(
    id: 'id-003',
    imageUrl: 'https://picsum.photos/seed/image003/500/300',
  ),
  ImageData(
    id: 'id-004',
    imageUrl: 'https://picsum.photos/seed/image004/500/900',
  ),
  ImageData(
    id: 'id-005',
    imageUrl: 'https://picsum.photos/seed/image005/500/600',
  ),
  ImageData(
    id: 'id-006',
    imageUrl: 'https://picsum.photos/seed/image006/500/500',
  ),
  ImageData(
    id: 'id-007',
    imageUrl: 'https://picsum.photos/seed/image007/500/400',
  ),
  ImageData(
    id: 'id-008',
    imageUrl: 'https://picsum.photos/seed/image008/500/700',
  ),
  ImageData(
    id: 'id-009',
    imageUrl: 'https://picsum.photos/seed/image009/500/600',
  ),
  ImageData(
    id: 'id-010',
    imageUrl: 'https://picsum.photos/seed/image010/500/900',
  ),
  ImageData(
    id: 'id-011',
    imageUrl: 'https://picsum.photos/seed/image011/500/900',
  ),
  ImageData(
    id: 'id-012',
    imageUrl: 'https://picsum.photos/seed/image012/500/700',
  ),
  ImageData(
    id: 'id-013',
    imageUrl: 'https://picsum.photos/seed/image013/500/700',
  ),
  ImageData(
    id: 'id-014',
    imageUrl: 'https://picsum.photos/seed/image014/500/800',
  ),
  ImageData(
    id: 'id-015',
    imageUrl: 'https://picsum.photos/seed/image015/500/500',
  ),
  ImageData(
    id: 'id-016',
    imageUrl: 'https://picsum.photos/seed/image016/500/700',
  ),
  ImageData(
    id: 'id-017',
    imageUrl: 'https://picsum.photos/seed/image017/500/600',
  ),
  ImageData(
    id: 'id-018',
    imageUrl: 'https://picsum.photos/seed/image018/500/900',
  ),
  ImageData(
    id: 'id-019',
    imageUrl: 'https://picsum.photos/seed/image019/500/800',
  ),
];

Answer 1

我刚刚用代码复制了你的问题，问题是你已经有了列表视图，其中有StaggeredGridView，StaggeredGridView 返回的是另一个ListView。

这是解决方案，

• 您在 ExploreView 中的Scaffold。

  return Scaffold(
    appBar: AppBar(
      elevation: 2.0,
      title: TextField(
        decoration: InputDecoration(
          hintText: 'Search',
          prefixIcon: Icon(Icons.search_rounded),
          border: InputBorder.none,
        ),
      ),
    ),
    body: GridList(),
  );
  

• GridList 应该返回关注，

  return Container(
    child: StaggeredGridView.countBuilder(
      addAutomaticKeepAlives: true,
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      crossAxisCount: 2,
      itemCount: imageList.length + 1,
      itemBuilder: (context, index) {
        if (index == 0) {
          return Column(
            children: [
              Explore_list(),
              Explore_catagories(),
              divider(),
            ],
          );
        }
        return Container(
          padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
          child: ImageCard(
            imageData: imageList[index - 1],
          ),
        );
      },
      staggeredTileBuilder: (index) =>
          index == 0 ? StaggeredTile.count(2, 1) : StaggeredTile.count(1, 1),
      // crossAxisSpacing: 8.0,
      mainAxisSpacing: 8.0,
    ),
  );
  

我所做的是，仅从您的班级返回 GridView，包括所有其他组件，即 StaggeredGridView 中的 Explore_list()、Explore_catagories()、divider() 作为顶部的单个小部件。