上一篇講了很多有點無聊的內容，這一篇就要開始使用各種基礎的UI元件

UI元件

常用的UI元件有：

• Text
• Icon

常見的輸入元件有：

• TextField
• Button

常見的容器有：

• Box
• Row
• Column
• Scaffold
  這篇會大概講述如何使用上面兩種，但也會稍微用到容器

開始使用

在開始之前，先把不太好看的範例給重新整理

class MainActivity : ComponentActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        enableEdgeToEdge()  
        setContent {  
            Tutorial2025Theme {  
                App(  
                    modifier = Modifier.padding()  
                )  
            }  
        }
    }  
}  
  
@Composable  
fun App(modifier: Modifier = Modifier) {  
    Text(  
        text = "Hello",  
        modifier = Modifier  
    )  
}

注意：因為我用的UI比較新，所以請確認使用的是material3的UI，像

import androidx.compose.material3.Text

如果你沒有material3，請在build gradle加上

implementation "androidx.compose.material3:material3:$material3_version"

基本UI元件

我會先使用一個column container，那是下一篇的主題
把App中的Text刪除後，加入一個Column，在其中添加上一個Text和Icon

Column {  
    Text()  
    Icon()  
}

此時兩個元件都有紅底線，觀察他們需要的參數分別是String和Painter，其中String很好理解，但是Painter又是什麼
其實Icon有不同的參數選項，一個選項是ImageBitmap(jpg一類)，而我們要選的是ImageVector，我們可以使用Icons找出內建的一些向量圖標

Column {  
    Text("Ok")  
    Icon(Icons.Default.Add, "")  
}

這樣Preview頁面就會有一個Ok和加號

輸入框

接下來還需要往底下塞一個Button和TextField

Column {  
    Text("Ok")  
    Icon(Icons.Default.Add, "")  
    TextField(  
        value = "nothing",  
        onValueChange = {},  
        label = {}  
    )  
    Button(  
        onClick = {}  
    ) {  
  
    }
}

可以發現Button和TextField都需要一個lambda函數和UI元件
往裡面填了兩個Text元件，打開虛擬機，發現雖然有輸入框和按鈕，但很像都操作不了，所以可以加入lambda函數來觀察交互之後到底發生了什麼

@Composable  
fun App(modifier: Modifier = Modifier) {  
    Column {  
        Text("Ok")  
        Icon(Icons.Default.Add, "")  
        TextField(  
            value = "nothing",  
            onValueChange = {it-> //可省略  
                Log.d("TextField", "App: $it")  
            },  
            label = {Text("TextField")}  
        )  
        Button(  
            onClick = {  
                Log.d("Button", "App: pressed")  
            }  
        ) {  
            Text("Button")  
        }  
    }
}

Kotlin語法糖：Button(){}的大括號代表的是Button的最後一個參數，可以免標大括號(如果是函數)

在重啟後，從左邊打開LogCat來觀察logd的訊息


輸入的'a'一閃而過，而botton確確實實的接收到了訊息
至於如何將這些輸入保留在畫面上，這是之後Day7：狀態儲存的內容