Flutter 默认图像占位符

Question

在我的数据中，我有帖子，但有些帖子有图片网址，有些帖子有 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,
),

Answer 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 是一个字符串

则为真

Answer 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,
        ),

Flutter 默认图像占位符

Flutter Default Image Placeholder

dart

dart-pub

flutter

flutter-dependencies

flutter-layout