
如何制作這樣一個小部件,使 Row 小部件位于表頭的中間,而容器后面可以有任何與表頭不相交的顏色?
uj5u.com熱心網友回復:
使用 Stack() 和 Positioned () 小部件來實作這一點。
uj5u.com熱心網友回復:

SizedBox(
height: 150,
width: 400,
child: Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 150 - 48 / 2, // remove half title box height
decoration: BoxDecoration(
border: Border.all(color: Colors.amber, width: 5),
borderRadius: BorderRadius.circular(16),
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
alignment: Alignment.center,
color: Colors.grey[50],
width: 150 / 2,
height: 48,
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text("title"),
),
),
Align(
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("1st item"),
SizedBox(
height: 10,
), // space between item
Text("second item item"),
],
),
)
],
),
)
了解有關堆疊的更多資訊
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/409838.html
標籤:
