Flutter 默认图片占位符

Posted 2023-02-23

【中文标题】Flutter 默认图片占位符

【英文标题】：Flutter Default Image Placeholder

【发布时间】：2020-09-07 05:10:13

【问题描述】：

在我的数据中，我有帖子，但有些有图片网址，而另一些有false 值，在显示时我想显示值为false 的占位符

这是我的代码：

     child: FadeInImage(
  placeholder: AssetImage('assets/images/placeholder.png'),
  image: NetworkImage(posts[index].featuredImage.large ) == null ? 
   Image.asset('assets/images/placeholder.png') : NetworkImage(posts[index].featuredImage.large ),
  fit: BoxFit.cover,
),

【参考方案1】：

你可以这样做

child: post[index].url==false? Image.assets('assets/images/placeholder.png'): FadeInImage(
fit: BoxFit.cover,
  placeholder: AssetImage('assets/images/placeholder.png'),
  image: posts[index].featuredImage.large == null ? 
   Image.asset('assets/images/placeholder.png') : NetworkImage(posts[index].featuredImage.large ),
),

但是如果你的 url 被声明为 String 就会出现问题，因为 false 不是 String 并且比较不同的数据类型不是一个好主意。然后你必须检查RuntimeType

例如：post[index].url is String//如果 url 是字符串则为真

【讨论】：

featured_image":"thumbnail":false,"medium":false,"large":false]

您似乎没有清楚地解释您的需求。如我所见，您想查找每个图像是否是链接。如果没有链接，那么你会显示一个占位符 issn't i?

【参考方案2】：

您无需将条件 posts[index].featuredImage.large 包装在 NetworkImage 小部件中。

只需检查来自 API 的字符串是否为空，然后将默认的Image 设置为Image.asset('assets/images/placeholder.png')，如果不为空，则将Image 设置为NetworkImage(posts[index].featuredImage.large )。

试试下面的代码：

FadeInImage(
          placeholder: AssetImage('assets/images/placeholder.png'),
          image: posts[index].featuredImage.large  == null ?
          Image.asset('assets/images/placeholder.png') : NetworkImage(posts[index].featuredImage.large ),
          fit: BoxFit.cover,
        ),