[英]Custom Border Widget Flutter
使用 Stack() 和 Positioned () 小部件来实现这一点。
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"),
],
),
)
],
),
)
了解有关堆栈的更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.