flutter 如何在CachedNetworkImage中使用占位符?

vbopmzt1  于 2022-12-27  发布在  Flutter
关注(0)|答案(3)|浏览(212)

我想添加一个占位符的进度条,而图像正在加载,但由于某种原因,它不工作。
我的代码

CachedNetworkImage(
  imageUrl: 'url',
  fit: BoxFit.cover,
  height: 100,
  width: 100,
  placeholder: CircularProgressIndicator(),
),
yvgpqqbh

yvgpqqbh1#

当像这样加载图像时,可以使用progressIndicatorBuilder

progressIndicatorBuilder:
                          (context, url, downloadProgress) => Container(
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                      ),

或尝试此占位符

placeholder: (context, url) => CircularProgressIndicator(),
bybem2ql

bybem2ql2#

CachedNetworkImagePlaceholder属性是具有参数(BuildContext context, String url)函数 *,并且返回**Widget
尝试以下方法:

CachedNetworkImage(
    height: 100,
    width: 100,
    imageUrl: 'imageUrl',
      fit: BoxFit.cover,

    placeholder: (context, url) => Container(
      color:  Colors.transparent,
      height: 100,
      width: 100,
      child: SpinKitFadingCircle(
        color: ColorConstants.colorPrimary,
        size: 30,
      ),
    ),

    errorWidget: (context, url, error) => Image.asset(
       placeHolderImage,
      width: 100,
      height: 100,
      fit: BoxFit.cover,
    ),
  )
9rygscc1

9rygscc13#

变化

placeholder: CircularProgressIndicator(),

placeholder: (context,url) => CircularProgressIndicator(),

相关问题