Hi, 我是鱼板伯爵今天要教大家 Stack(堆叠) 和 Positioned(位子),Stack可以让子部件堆叠,Positioned 则可以根据四个边的距离来定位,这两个常常组合再一起使用。教学内容只会撷取片段程序码,建议大家搭配完整程序码来练习。
Stack可以将两个以上的元件或容器堆叠在一起,以下是常用属性。
Alignment
:可以控制元件对齐的地方,像是Alignment.bottomCenter
(下中)、Alignment.topCenter
(上中)等...Fit
:子部件根据Stack的大小缩放。StackFit.loose
(子部件大小)、StackFit.expand
(Stack大小)class DemoStack extends StatelessWidget {
const DemoStack({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
width: 100,
height: 100,
color: Colors.amber,
),
Container(
width: 75,
height: 75,
color: Colors.redAccent,
),
Container(
width: 50,
height: 50,
color: Colors.blueAccent,
),
],
);
}
}
left
、right
、top
、 bottom
分别代表离Stack左、右、上、下四边的距离。 width
和height
用於指定宽度和高度。
class DemoPositionedStack extends StatelessWidget {
const DemoPositionedStack({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.bottomCenter,
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 100,
height: 100,
color: Colors.amber,
),
),
Positioned(
right: 0,
bottom: 0,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
],
);
}
}
今天的范例是超级无敌常用,有用到表格就一定会有的 分页(Pagination),从零到有不用三分钟!...
大家好,我是西瓜,你现在看到的是 2021 iThome 铁人赛『如何在网页中绘制 3D 场景?从 ...
如果有错误,欢迎留言指教~ Q_Q 如果你要成功更新画面,你必须经过两个步骤: render fu...
引言 昨天使用到 strings 与 grep 这两个工具, 主要是用来寻找一堆资料中的字串的。 ...
前言 如果只有画面像的话,那也太弱了吧! 赶紧来实作新增闹钟的功能,做完拿去炫耀给边身边的人看! 实...