时间戳

首页 > 解决方案 > 如何将图像作为容器小部件的背景图像？

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

问题描述

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

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

标签： dartflutter

解决方案

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

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

    ],
  ),
),
);

推荐阅读