Question

请让我知道如何启用抖动CachedNetworkImageProvider的加载微调器。 CachedNetworkImage可以正常工作。但是问题是CachedNetworkImage不是有效的图像提供程序。

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
    ),
  ),
)

Answer 1

我通过使用AdvancedNetworkImage在某种程度上实现了这一目标我现在面临的问题是以下代码中的左上角和右上角四舍五入。

new Column(
  children: [

  Container (
    height: 250.0,
    width : double.infinity,
    margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

    child: TransitionToImage(

    AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
    // placeholder: CircularProgressIndicator(),
    duration: Duration(milliseconds: 300),
    fit: BoxFit.cover,
    loadingWidget: const CircularProgressIndicator(),
    placeholder: const Icon(Icons.refresh),
    enableRefresh: true,                    
    ),
    decoration: BoxDecoration(                    

    borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
    ),
  ),


  Container(
    width: double.infinity,
    margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
    padding: const EdgeInsets.all(10.0),
    decoration: new BoxDecoration(
    color: Colors.black,
    borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0)  ),
    boxShadow: <BoxShadow>[
        BoxShadow(
        color: Colors.black,
        offset: Offset(0.0, -12.0),
        blurRadius: 20.0,
        ),
    ],
    ),

    // alignment: TextAlign.left,
    child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
  ),

  ],
)

如果有人知道圆角的问题，请发表评论。

Answer 2

有点晚了，但是我遵循了这种方法

https://flutter.dev/docs/cookbook/images/fading-in-images

使用Stack，Padding和Container应该可以做到。这里的坏事是CircularProgressIndicator在后台运行，但对用户不可见。图片应大于CircularProgressIndicator。

这里有个例子

Stack(
      children: <Widget>[
         Padding(padding: const EdgeInsets.only(left: 10, top: 15),
                 child: CircularProgressIndicator(),
         ),
         Container(
              width: 80.0,
              height: 80.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: CachedNetworkImageProvider(
               'https://www.seti.org/sites/default/files/styles/original/public/2019-09/Zork%20alien%20head%20PPR.jpg?itok=T7eTYzCZ'),
                ),
              ),
            ),
          ],
        )

填充的目的是在图像的后面，无论它在哪里。对于像这样的小图片，我认为FadeInImage

FadeInImage(image: CachedNetworkImageProvider(url),
            fit: BoxFit.cover,
            placeholder: MemoryImage(kTransparentImage),
            )

Answer 3

您可以使用CachedNetworkImage的imageBuilder属性

CachedNetworkImage(
    imageUrl: 'yourURL',
    imageBuilder: (context, imageProvider) => Container(
       decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(16),
       image: DecorationImage(
       image: imageProvider,
       fit: BoxFit.cover),
                                  ),
                                ),

这样，您可以像装饰容器一样装饰CachedNetworkImage

Answer 4

据我所知，您想在显示图像之前先显示加载微调器。

这一定会对您有所帮助

new CachedNetworkImage(
    imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
    placeholder: new CircularProgressIndicator(),
    errorWidget: new Icon(Icons.error),
)

如果我理解您的问题有误，请使问题更加清楚

Flutter CachedNetworkImageProvider没有加载微调器

4 个答案: