Stack(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100.0),
bottomRight: Radius.circular(100.0)),
color: darkBlue,
),
),
Positioned(
bottom: 0,
left: MediaQuery.of(context).size.width / 3,
child: CircleAvatar(
backgroundColor: white,
radius: 70,
child: Image.asset('assets/images/homepage.png'))),
],
)
當我在代碼中將值設定為 bottom : 0 時，由于影像位于堆疊內，因此它將其視為邊框并將影像移動到堆疊的底部。但是我想要的是將影像放在Container的中心，如圖中的黑色圓圈所示。
uj5u.com熱心網友回復：
您需要將高度的負一半傳遞給底部值才能得到它，不要忘記設定Stack's clipBehavior為none. 嘗試這個：
Stack(
clipBehavior: Clip.none,// <-- add this
children: [
Container(
height: MediaQuery.of(context).size.height * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100.0),
bottomRight: Radius.circular(100.0)),
color: darkBlue,
),
),
Positioned(
bottom: -100/2,// <-- add this
left: MediaQuery.of(context).size.width / 3,
child: CircleAvatar(
backgroundColor: white,
radius: 70,
child: Image.asset('assets/images/homepage.png'))),
],
),
uj5u.com熱心網友回復：
嘗試這個：
Stack(
alignment: Alignment.center
children: [
Container(
height: MediaQuery.of(context).size.height * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100.0),
bottomRight: Radius.circular(100.0)),
color: darkBlue,
),
),
CircleAvatar(
backgroundColor: white,
radius: 70,
child: Image.asset('assets/images/homepage.png'))
],
)
uj5u.com熱心網友回復：
將底部放在半影像上bottom:-halfImageHeight，并且堆疊的默認剪輯行為是硬邊緣，需要設定Clip.none
Stack(
clipBehavior: Clip.none,
children: [
/// background widgets
Position(
bottom: -70 // while radius is 70
left: MediaQuery.of(context).size.width / 2 - 70, // remove half width , maybe left:0 and right:0 will work as well
放置中心，您可以使用Align小部件
Align(
alignment: Alignment.center, //default
child: CircleAvatar(
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/533179.html
標籤：扑镖颤振布局