微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

StaggeredGridView.countBuilder 正在渲染所有内容,而不仅仅是用户可见的部分,从而导致严重的性能问题

如何解决StaggeredGridView.countBuilder 正在渲染所有内容,而不仅仅是用户可见的部分,从而导致严重的性能问题

我正在使用 flutter_staggered_grid_view 包来显示动态高度的图像网格,我正在使用 StaggeredGridView.countBuilder,它应该基于 gridview.count,它应该呈现部分仅在屏幕上可见,但相反正在渲染整个网格,导致严重的性能问题。

class _BodyImagesstate extends State<BodyImages> {
var maxItemLogicalLength;
@override
Widget build(BuildContext context) {
  maxItemLogicalLength = (MediaQuery.of(context).size.width - 30) / 2;
  return StaggeredGridView.countBuilder(
    shrinkWrap: true,physics: BouncingScrollPhysics(),crossAxisCount: 4,itemCount: widget.count ?? widget.images.length,itemBuilder: (BuildContext context,int index) => ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(10)),child: GestureDetector(
        onTap: () => Navigator.of(context).push(
          PageRouteBuilder(
            pageBuilder: (context,animation,secondaryAnimation) =>
                ImageFullScreen(
              image: widget.images[index],),opaque: false,child: Hero(
          tag: widget.images[index].id,child: Container(
            height: (widget.images[index].height * maxItemLogicalLength) /
                widget.images[index].width,child: CachednetworkImage(
              placeholder: (context,url) => Image.asset(
                'assets/images/PlaceHolderImage.jpg',fit: BoxFit.cover,imageUrl: widget.images[index].compressedOriginal,staggeredTileBuilder: (int index) => StaggeredTile.fit(2),mainAxisspacing: 10,crossAxisspacing: 10,);
}
}

GitHub 代码 https://github.com/kandlaguntarohith/WallpaperApp/blob/master/lib/Screens/HomeScreen/BodyImages.dart

链接到 APK 文件 https://drive.google.com/file/d/1_MfpWQP0QRLXSaKA6O3CatEZ6Yh9DqR0/view

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。