美文网首页
Flutter的Image之加载网络图片(效果)

Flutter的Image之加载网络图片(效果)

作者: 讠纟纟 | 来源:发表于2020-09-07 19:37 被阅读0次
//添加了淡出效果
Image.network(
              "https://www.???.com/image/xx.png",
              height: 300,
              frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
                if (wasSynchronouslyLoaded)
                  return child;

                return AnimatedOpacity(
                  child: child,
                  opacity: frame == null ? 0 : 1,
                  duration: const Duration(seconds: 2),
                  curve: Curves.easeOut,
                );
              },),
//添加了 圆形进度条
            Image.network(
              "https://www.???.com/image/xx.png",
              height: 150,
              loadingBuilder: (context, child, loadingProgress) {
                if (loadingProgress == null)
                  return child;

                return Container(
                  alignment: Alignment.center,
                  child: CircularProgressIndicator(
                    value: loadingProgress.expectedTotalBytes != null
                        ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes
                        : null,
                  ),
                );
              },)

相关文章

网友评论

      本文标题:Flutter的Image之加载网络图片(效果)

      本文链接:https://www.haomeiwen.com/subject/bdilektx.html