How can I do this?
我已经试过了,但它不是我想要的
Container(
height: 900,
width: double.maxFinite,
color: const Color(0xff070540),
child: Stack(
children: [
Padding(
padding: EdgeInsets.only(left: 15, right: 15, top: 15),
child: Container(
height: 30,
color: Color(0xff2147AF),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.arrow_back),
Text(
'Details of Athlete',
style: TextStyle(fontSize: 15),
),
Icon(Icons.thumb_up_sharp),
],
),
),
),
Row(
children: [
Container(
height: 150,
width: 80,
decoration: const BoxDecoration(
color: Color(0xff2147AF),
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(20)),
)
),
Container(
height: 150,
width: 80,
decoration: const BoxDecoration(
color: Color(0xff2147AF),
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(20)),
)
)
],
)
],
)
);
字符串
2条答案
按热度按时间q1qsirdb1#
尝试使用此代码片段
字符串
的数据
nkoocmlb2#
首先,Stack(Stack Class)中子元素的顺序是最后一个子元素应该放在最前面,这意味着在你的代码中,最后一个包含容器的Row将覆盖第一个包含文本的Row。
对于浅蓝色的盒子,你可以只使用一个带有底部边框半径的容器,而不是用一个角半径对齐两个容器。
我不是Maven,所以这可能不是最好的方法,但我会使用一个Stack,其中一个容器用于背景元素,一个列用于前景元素(文本和图像)。
一些提示:
这是我用你的图片作为参考创建的一个小部件:
字符串