如何将图像作为容器小部件的背景图像？答案

【问题标题】：How can i fit an image as background image for a container widget?如何将图像作为容器小部件的背景图像？
【发布时间】：2019-04-24 22:35:17
【问题描述】：

我正在尝试创建类别卡，并将图像设置为子容器小部件的背景，但图像未显示在容器上

Container job1category(String imgpath, String name, String nikename) {
return Container(
width: 170,    
child: Card(
  child: Wrap(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(imgpath),
            fit: BoxFit.cover
          )
        ),
        child: null
      ),
      ListTile(
        title: Text(name),
        subtitle: Text(nikename),
      ),
    ],
  ),
),
);
}

【问题讨论】：

标签： dart flutter

【解决方案1】：

请试试这个，

Container(
      width: double.infinity,
      height: double.infinity,
      decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage('img/bg.jpg'),fit: BoxFit.cover)),
      child: ...,
    )

【讨论】：

【解决方案2】：

您可以简单地将图像添加为子图像并设置属性填充。

Container(child:Image.network('https://thenypost.files.wordpress.com/2014/01/dogs1.jpg',fit:fil),)

您甚至可以设置容器的高度和高度。希望这会有所帮助。

【讨论】：

【解决方案3】：

您的容器没有指定高度，因为您已将图像放入容器，因此您必须为容器指定特定高度。我修改了你的代码：

Container(

child: Card(
  child: Wrap(
    children: <Widget>[
      Container(
        height:300,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage("https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png"),
            fit: BoxFit.cover
          )
        ),
        child: null
      ),
      ListTile(
        title: Text("Flutter"),
        subtitle: Text("Image of flutter"),
      ),
    ],
  ),
),
);

要完整的背景更改：将您的文本设置为容器的子项。

Container(

child: Card(
  child: Wrap(
    children: <Widget>[
      Container(
        height:300,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage("https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png"),
            fit: BoxFit.cover
          )
        ),
        child: ListTile(
        title: Text("Flutter"),
        subtitle: Text("Image of flutter"),
      ),
      ),

    ],
  ),
),
);

【讨论】：