箱体装饰适合父母身高
箱体装饰适合父母身高
提问于 2021-12-29 17:26:17
我需要制作一个container，background image和背景颜色在下面的30个像素，但我需要布局如下：
SizedBox(
height: 540,
child: Container(
width: 392.7,
height: 510,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25)),
image: DecorationImage(
image: Image.network(
'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
).image,
fit: BoxFit.cover)回答 3
Stack Overflow用户
回答已采纳
发布于 2021-12-29 18:50:07
根据您的ui，我认为您必须使用堆栈而不是列使用堆栈，它将为您提供所需的输出。
下面是代码示例：-
SizedBox(
height: 540,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
/// your image
fit: BoxFit.fill,
)),
),
Positioned(
bottom: 0.0,
child: Container(
height: 30,
// set color and border radius as u need
)),
],
),
);Stack Overflow用户
发布于 2021-12-29 17:49:03
您可以简单地使用Column来使用另一个Container或Material.小部件提供额外的30 to边框。
SizedBox(
height: 540,
child: Column(
children: [
Container(
width: 392.7,
height: 510,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25)),
image: DecorationImage(
image: Image.network(
'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
).image,
fit: BoxFit.cover),
),
),
Container(
color: Colors.deepPurple,
height: 30.0,
width: 392.7,
)
],
),
)但是对于背景情况，您可以使用Stack。
SizedBox(
height: 540,
width: 392.7,
child: Stack(
children: [
Container(
color: Colors.deepPurple,
),
Container(
width: 392.7,
height: 510,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(25),
bottomRight: Radius.circular(25)),
image: DecorationImage(
image: Image.network(
'https://ak.picdn.net/shutterstock/videos/8258557/thumb/1.jpg',
).image,
fit: BoxFit.cover),
),
),
],
),
)更多关于堆栈的信息
Stack Overflow用户
发布于 2021-12-29 17:49:25
试试下面的代码，如果需要更改，请告诉我。
SizedBox(
height: 540,
child: Column(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
),
fit: BoxFit.fill,
)),
)),
Container(
height: 30,
color: Colors.red,
)
],
),
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70522851
复制相关文章
相似问题
腾讯云开发者
