颤动的 ImageAsset 图像延伸到 BoxDecoration 容器之外答案

【问题标题】：flutter ImageAsset Image extending outside BoxDecoration container颤动的 ImageAsset 图像延伸到 BoxDecoration 容器之外
【发布时间】：2018-12-19 10:50:03
【问题描述】：

我在 BoxDecoration 中有 Image，当我从 CachedNetworkImageProvider 获取图像时，它可以工作，但是当我从 Assetimage 获取图像时，图像不会被裁剪到盒子大小。两个图像源都显示在 ListTile 中。来自 AssetImage 的代码：

      return Container(
      width: widget.width, 
      height: widget.heigth,
      decoration: BoxDecoration(
      shape: BoxShape.circle,
      border: Border.all(color:widget.colour, width:3),
      image: DecorationImage(
      fit: BoxFit.cover,
      image: AssetImage(url)
       )....

来自 CachedNetworkImageProvider 的代码：

return Container(
width: widget.width, 
height: widget.heigth,
decoration: BoxDecoration(
  shape: BoxShape.circle,
  border: Border.all(color:widget.colour, width:3),
  image: DecorationImage(
    fit: BoxFit.cover,
    image: CachedNetworkImageProvider(widget.location.imageURLs[widget.index])...

【问题讨论】：

我无法重现。可能image.width/image.height有问题

标签： image flutter

【解决方案1】：

使用以下示例

decoration: BoxDecoration(

                image: DecorationImage(
                  alignment: Alignment.center,
                  matchTextDirection: true,
                  repeat: ImageRepeat.noRepeat,
                  image: AssetImage("assets/images/bed.jpg"),
                ))

【讨论】：

【解决方案2】：

您是否尝试将其设置为子元素，而不是将其作为 boxDecoration.image 的属性？

return Container(
child: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(url)
)....
width: widget.width,
height: widget.heigth,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color:widget.colour, width:3)),

【讨论】：

我收到一个编译错误，提示您无法将DecorationImage 分配给类型小部件

【解决方案3】：

好了，我就赶紧把这个偷懒的方法弄到这里?

   Container(
              width: 70,
              height: 70,
              decoration: BoxDecoration(
                color: AppColor.appColor,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                    height: 70,
                    width: 70,
                    decoration: new BoxDecoration(
                        borderRadius: BorderRadius.circular(18),
                        image: new DecorationImage(
                          image: new NetworkImage(
                            'https://images.unsplash.com/photo-1557296387-5358ad7997bb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
                          ),
                          fit: BoxFit.cover,
                        ))),
              ),
            ),

【讨论】：

【解决方案4】：

试试这个

  image: AssetImage(url).image

【讨论】：