iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
Mobile Development

初窺Flutter系列 第 13

Stack(堆疊)

  • 分享至 

  • xImage
  •  

Stack是一種用於布局的widget,它可以在屏幕上重疊多個子widget。
(在stack程式中,最早寫得在最下層)

範例程式碼

Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
      alignment:const FractionalOffset(0.2,0.2), // 設置子 widget 的對齊方式為相對於 Stack 的左上角的偏移量為(0.2, 0.2)
      children:<Widget>[
      //最底層的子 widget 是一個白色的容器
        Container(
          width: 250,
          height: 250,
          color: Colors.white,
      ),
        // 第二層子 widget 是一個文本
        Text('Hello',
        style:new TextStyle(
            fontSize:25,
          color: Colors.purple,
        ),
        ),
      ]
    )
    );
  }

結果:可以看到text widgets 堆疊在白色容器左上角
https://ithelp.ithome.com.tw/upload/images/20230928/20162684hmRV2NXh8u.png

Stack 對齊屬性:改變widgets的位置
通常透過alignment來控制
1.Alignment.center(中間)
2.Alignment.topLeft(左上)
3.Alignment.topRight(右上)
4.Alignment.bottomLeft(左下)
5.Alignment.bottomRight(右下)
6.或像上面得程式碼一樣自訂義位置


上一篇
Row&Column(水平與垂直布局)
下一篇
Card(卡片)
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言