因此,我必须在容器中显示图像,并在容器底部显示一些说明。该图像应填满整个屏幕。正在从网络获取图像。
这是我的初始方法
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: ClipRRect(
child: Image.network(category.imageURL,
height: maxHeight * 1, fit: BoxFit.cover),
),
),
Align(
alignment: Alignment.bottomLeft,
child: getNameAndDeleteSection(context),
)
],
),
),
其中getNameAndDeleteSection基本上是这个
return Container(
color: Colors.yellow,
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
category.name,
maxLines: 1,
style: TextStyle(color: Colors.white),
),
Spacer(),
IconButton(
icon: Icon(Icons.delete, size: 18.0, color: Colors.white,),
onPressed: () {
deleteTap(category);
},
)
],
),
);
}
加载网络映像时,它隐藏了黄色容器,但保留了子容器。我想要的是图像保留在背景中,黄色容器保留在背景之上。这个想法是,黄色容器将具有某种透明的颜色,以使其看起来漂浮在图像上。
最大高度是listView提供的高度。我正在尝试使UI具有适应性。有帮助吗?
为什么不像这样将图像作为BoxDecoration放在容器中:
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(url), fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: getNameAndDeleteSection(context),
)
],
),
我决定使用Card来包围容器,而不是使用似乎总是被网络映像隐藏的容器。而且有效。
因此,更改是在getNameAndDeleteSection中完成的,基本上将整个代码包装在Card中。宾果游戏也有效。