Flutter占位图和圆角实现

1.FadeInImage.assetNetwork 实现占位图

FadeInImage.assetNetwork(
              placeholder: 'images/placeholder.png',
              image: imageUrl,
              width: 100,
              fit: BoxFit.fitWidth,
            )

2.CachedNetworkImage实现占位图

CachedNetworkImage(
                          imageUrl:
                             url,
                          placeholder: (context, url) => new Image.asset(
                              "image/placeholder.png",
                              width: 100,
                              height: 100,
                          errorWidget: (context, url, error) =>
                              new Image.asset("image/news_big_default.png"),
                        )

3.既有圆角,又有占位图

Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Container(
          width: 250,
          height: 150,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: FadeInImage.assetNetwork(
              placeholder: "images/ic_device_image_default.png",
              image: imagePath,
              fit: BoxFit.cover,
            ),
          ),
        )));

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容