如何使FadeInImage通告?

时间:2019-01-06 07:32:31

标签: dart flutter

我正在使用FadeInImage小部件在我的应用程序中显示网络图像。因为要使用FadeInImage的占位符属性,所以不能使用NetworkImageImage.Network小部件。

现在我想使FadeInImage呈圆形,所以我尝试使用以下选项。

  1. 我尝试将FadeInImage包裹在Container内使其循环,但是DecorationImage属性不允许FadeInImage
  2. 我尝试使用CircleAvatar,但是CircleAvatar的backgroundImage属性不允许FadeInImage
  3. 我尝试使用cached_network_image的flutter库,但遇到了同样的问题
  4. 我尝试的最后一个选项是使用ClipRRect使它呈圆形,但仍然不起作用

以下是我的代码

Container(
      width: 50.0,
      height: 50.0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: FadeInImage(
            placeholder: AssetImage("images/alex.jpg"),
            image: NetworkImage(
                "https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg")),
      ),
    );

4 个答案:

答案 0 :(得分:2)

设置FadeInImage的width和height属性,它应该可以工作。

ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: CachedNetworkImage(
            fit: BoxFit.cover,
            width: 50,
            height: 50,
            placeholder: AssetImage("images/alex.jpg"),
            imageUrl:
                "https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg"),
      )

enter image description here

答案 1 :(得分:1)

我为此创建了一个自定义小部件:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class CircleCachedNetworkAvatar extends StatelessWidget {
  final String url;
  final double size;

  CircleCachedNetworkAvatar({@required this.url, this.size = 50.0});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: size,
        width: size,
        child: url != null
            ? ClipOval(
                child: CachedNetworkImage(
                  fadeInDuration: const Duration(seconds: 0),
                  fadeOutDuration: const Duration(seconds: 0),
                  imageUrl: url,
                  placeholder: Container(
                      color: Colors.greenAccent, child: Icon(Icons.person)),
                  fit: BoxFit.cover,
                ),
              )
            : CircleAvatar(
                backgroundColor: Colors.greenAccent,
                child: Icon(Icons.person)));
  }
}

您如何看待这段代码?

答案 2 :(得分:1)

用椭圆形包裹FadeInImage小部件,然后用长宽比包裹clipoval小部件

AspectRatio(
      aspectRatio: 1/1,
      child: ClipOval(
        child: FadeInImage.assetNetwork(
            fit: BoxFit.cover,
            placeholder: "Your-placeholder-path",
            image: "Your-Image-Url"),
      ),
    );`

答案 3 :(得分:0)

ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: CachedNetworkImage(
            fit: BoxFit.fill,
            width: 50,
            height: 50,
            placeholder: AssetImage("images/alex.jpg"),
            imageUrl: "<IMAGE URL>"),
      );

这对我有用,看看。