iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Mobile Development

一起學Flutter,和我變Better!系列 第 12

Day 12單一子元素元件Single-child

單一子元素元件包含Container、Padding、Center、Align、FittedBox、AspectRatio,今天會著重介紹Container及FittedBox。

Container容器佈局
(一) 常用屬性
child:設定一個子元件。
color:背景顏色。
alignment:對齊方式。
constraints:最大高度/寬度、最小高度/寬度。
margin:外部間距。
padding:內部間距。
width:寬度。
height:高度。
https://ithelp.ithome.com.tw/upload/images/20210924/20140524CGjOjwUQaq.png

(二)容器的基本佈局
https://ithelp.ithome.com.tw/upload/images/20210924/20140524eSXDMoZvG3.png
在Container裡面,我們可以設定margin和padding的情況,但僅限制元件的大小及位置是不夠的,因此就有了Decoration(裝飾器)的概念。

(三)BoxDecoration
常用屬性:
color:背景色。
backgroundBlendMode:背景混合模式。
border:邊框。
borderRadious:圓角角度。
boxShadow:陰影。
shape:形狀。
gradient:漸層效果。
image:背景圖。

FittedBox
(一) 介紹
主要負責對元件縮放及位置調整。

(二) 屬性
fit:縮放,預設值為BoxFit.contain,當子元件被縮放到父容器的限定值時會停止縮放。
alignment:對齊。
https://ithelp.ithome.com.tw/upload/images/20210924/20140524qMGNJUGdA7.png

今天介紹了兩種單一子元素元件,明天將會介紹多子元素元件,敬請期待。

參考資料
橫跨Android及Apple的神話:用Dart語言神啟Flutter大業3.2節
http://tw-hkt.blogspot.com/2019/08/flutter-container.html
http://jdev.tw/blog/5953/flutter-layout-widget-container


上一篇
Day 11基礎元件
下一篇
Day 13多子元素元件Multi-child
系列文
一起學Flutter,和我變Better!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言