上一篇提到了很多UI元件，但如果沒有正確規畫他們就會疊在一起，亂成一團，所以需要container來規劃好看的排版

了解並使用Container

上一回已經說到了基礎的幾種container

Box

這個Container是比較少用也沒有特色的，但它在特定場合有用處，像是要讓元素疊加的時候

Box{
	Button(
		onClick = {},
		modifier = Modifier.align(Alignment.TopEnd)
	) {Icon(Icons.Default.FavoriteBorder, "")}
	Image(painterResource(id = R.drawable.somePic), contentDescription = "圖")
}

這樣可以讓一個愛心按鈕出現在圖的右上角

Row

這個是常用的container，它可以讓元件水平排好

Row(
	horizontalArrangement = Arrangement.SpaceBetween,
){
	Text("Setting1")
	Switch(true, onCheckedChange = {...})
}

這樣看起來就是一個橫向的setting開關

Column

這個跟Row一樣常用，它可以垂直列

// Input
Column(
	horizontalAlignment = Alignment.CenterHorizontally
) {
	TextField("a", onValueChange1, label={Text("field1")})
	TextField("b", onValueChange2, label={Text("field2")})
	Button(onClick = {}) {Text("Submit")}
}

這樣就生出一個簡單，有兩個輸入框與一個送出的輸入介面

適用的屬性

兩個排列容器都有特殊的屬性Alignment(對齊)和Arrangement(布局)，Arrangement主要管元件之間的間隔方式
Column: 水平對齊/垂直布局
Row: 水平布局/垂直對齊
一般會讓最外層的Container戴上modifier.fillMaxSize()，裡面的則是height或width

正確的規劃Container

假設今天要設計一格像是IT幫幫忙的文章列表
如圖：

首先就是將大塊的分割成Row或Column，然後在往下細分，建構UI的時候就是從大到小一層套一層，才能製造出豐富的UI
分割流程如圖：

紅色->橘色->藍色->綠色 一步一步分割