[Day7] Flutter - 堆叠布局 ( Stack、Positioned )

前言

Hi, 我是鱼板伯爵今天要教大家 Stack(堆叠) 和 Positioned(位子),Stack可以让子部件堆叠,Positioned 则可以根据四个边的距离来定位,这两个常常组合再一起使用。教学内容只会撷取片段程序码,建议大家搭配完整程序码来练习。

完整程序码

Stack

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,
        ),
      ],
    );
  }
}

Positioned

leftrighttopbottom分别代表离Stack左、右、上、下四边的距离。 widthheight用於指定宽度和高度。

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,
          ),
        ),
      ],
    );
  }
}


<<:  [Day 02] 建立 Kotlin 专案

>>:  全端入门Day07_何谓全端之後端中篇

Day 18 | 常用范例:表格分页 Pagination 前後端做好只需三分钟!?

今天的范例是超级无敌常用,有用到表格就一定会有的 分页(Pagination),从零到有不用三分钟!...

2D transform Continued

大家好,我是西瓜,你现在看到的是 2021 iThome 铁人赛『如何在网页中绘制 3D 场景?从 ...

Day 19 - 效能优化,避免过度 render state

如果有错误,欢迎留言指教~ Q_Q 如果你要成功更新画面,你必须经过两个步骤: render fu...

[2021铁人赛 Day15] General Skills 12

引言 昨天使用到 strings 与 grep 这两个工具, 主要是用来寻找一堆资料中的字串的。 ...

Swift纯Code之旅 Day28. 「新增闹钟功能(1) - Struct使用、取得UIDatePicker值」

前言 如果只有画面像的话,那也太弱了吧! 赶紧来实作新增闹钟的功能,做完拿去炫耀给边身边的人看! 实...