Question

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

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),
      ),
    ],
  ),
),
);
}

Answer 1

您可以简单地将图像添加为子图像。例如。

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

您甚至可以设置容器的with和height。
希望有帮助。

Answer 2

请尝试一下

Container(
      child: Image.asset(
        'assets/flutter.jpg',
      ),
    )

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

    ],
  ),
),
);

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

3 个答案: