這一章節會先介紹基本的UI元件，並集中在元件攜帶的屬性上

元件架構

@Composable  
fun Greeting(name: String, modifier: Modifier = Modifier) {  
    Text(  
        text = "Hello $name!",  
        modifier = modifier  
    )  
}

這是預設的程式碼，其中的Greeting就是一個元件，就像是很多的前端語言一樣，我們可以將很多個UI打包起來變成客製化的UI批量使用
而編譯器是通過上面的@Composable來知道他是一個元件，而Greeting中的Text同樣是一個元件，當你將滑鼠移上去的時候就可以看到他的宣告內容，其中有很多是自動設定的，需要傳遞參數的只有text，也就是顯示的文字

元件的參數

元件的參數有很多種，其中比較常見到的就是直接的變數，而有一些會要求函數，除此之外，有一個參數很特別，幾乎每一個元件都需要它：Modifier

函數參數

Kotlin支援Lambda函數，所以多數時候都是直接些一個Lambda函數
但是，所有的函數都有型別要求，如這段程式碼中的Add就是一個(Int, Int)->Int的函數

fun Add(a: Int, b: Int): Int {
	return a+b
}
// In Lambda
val Add: (Int, Int)->Int = {a, b->
	a+b
}

但多數時候會遇到的是回傳為空的函數，那就是(Int)->Unit

Modifier

我認為這是所有元件最重要的屬性，因為它掌管了所有的UI樣式，所以需要對它有足夠的了解才能寫出好看的UI
可以從預設的程式碼看到，它的modifier有一個.padding(innerPadding)，這就是modifier的調整方式，也是最複雜的地方(先後順序)
我會給兩段程式，分別有個Preview圖來直觀的展現modifier的順序

@Composable  
fun Greeting1(name: String, modifier: Modifier = Modifier) {  
    Text(  
        text = "Hello $name!",  
        modifier = Modifier.padding(10.dp).border(1.dp, Color.Green)  
    )  
}

@Composable  
fun Greeting2(name: String, modifier: Modifier = Modifier) {  
    Text(  
        text = "Hello $name!",  
        modifier = Modifier.border(1.dp, Color.Green).padding(10.dp)  
    )  
}

直接說結論，Greeting1的邊框在裡面padding在外面，而Greeting2的邊框在外面而padding在裡面
Greeting1:

Greeting2:

如果你還不信邪，可以試試看這段程式

@Composable  
fun Greeting(name: String, modifier: Modifier = Modifier) {  
    Text(  
        text = "Hello $name!",  
        modifier = Modifier.border(1.dp, Color.Green).padding(10.dp).background(Color.Yellow)  
    )  
}

你就會發現黃色背景先觸發，再來是padding，最後才是border，所以請記住Modifier的觸發順序是最後一個屬性最先套用

注意事項

有時候你的程式打出來卻是紅色字體，如果你直接用複製的就會發現.dp與Color是紅色的，這是因為你沒有導入(import)，可以把屬標放在上面選import，也可以在打字出現選項時用tab選擇，它會自動import相關的依賴
如果遇到的是紅色底線，那多半是你的元件呼叫的缺少必要參數，或是說傳遞的參數型態有誤