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

Posted 2023-05-07

【中文标题】交错网格视图在 Flutter 中不向上滚动

【英文标题】：Staggered Grid View is not scrolling upwards in Flutter

【发布时间】：2021-07-12 10:03:37

【问题描述】：

伙计们，我正在尝试构建一个类似 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',
  ),
];

【参考方案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() 作为顶部的单个小部件。

【讨论】：

非常感谢您的帮助，它现在正在工作。还有一个问题是有另一种方法来实现这个用户界面我的意思是我正在尝试使用条子，所以如果你不介意的话，你能否建议我应该使用哪个条子小部件。仅用于学习目的。