目標
- 畫面底部 有三個按鈕 (Option1, Option2, Option3)
- 點擊按鈕時，顯示 Toast 訊息
- 使用 Jetpack Compose 來設計 UI
MainActivity.kt（完整程式碼 + 註解）package com.example.myapplication // 定義這個 Kotlin 檔案的 package 名稱
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
// `MainActivity` 繼承 `ComponentActivity`，是應用的主要活動 (Activity)
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { // `onCreate` 是 Activity 的進入點
super.onCreate(savedInstanceState)
setContent { // 使用 Jetpack Compose 來設定 UI
MyApp() // 呼叫 `MyApp()` 來顯示畫面
}
}
}
// `MyApp` 是 Compose 函式 (Composable)，用來定義畫面內容
@Composable
fun MyApp() {
val context = LocalContext.current // 取得當前的 Context (用來顯示 Toast)
// `Box` 是一個容器，它會填滿整個畫面，並讓內容對齊底部
Box(
modifier = Modifier.fillMaxSize(), // `fillMaxSize()` 讓 Box 佔滿整個螢幕
contentAlignment = Alignment.BottomCenter // 讓內容對齊到畫面底部
) {
// `Row` 用來水平排列三個按鈕
Row(
modifier = Modifier
.fillMaxWidth() // 讓 Row 佔滿整個寬度
.padding(16.dp), // 設定四周的間距
horizontalArrangement = Arrangement.SpaceEvenly // 讓按鈕均分寬度
) {
// 第一個按鈕：Option 1
Button(onClick = {
Toast.makeText(context, "Option 1 Clicked!", Toast.LENGTH_SHORT).show()
}) {
Text("Option 1") // 按鈕內的文字
}
// 第二個按鈕：Option 2
Button(onClick = {
Toast.makeText(context, "Option 2 Clicked!", Toast.LENGTH_SHORT).show()
}) {
Text("Option 2")
}
// 第三個按鈕：Option 3
Button(onClick = {
Toast.makeText(context, "Option 3 Clicked!", Toast.LENGTH_SHORT).show()
}) {
Text("Option 3")
}
}
}
}
// `PreviewMyApp()` 用來預覽 `MyApp()` 的畫面 (在 Android Studio 預覽模式中可見)
@Preview(showBackground = true)
@Composable
fun PreviewMyApp() {
MyApp()
}
📌 程式碼解析
1️⃣ setContent { MyApp() }
- 這是 Jetpack Compose 的進入點，取代了傳統
setContentView(R.layout.activity_main)。 MyApp()是一個@Composable函式，負責畫面設計。
2️⃣ 使用 Box 和 Row 來排列 UI
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter)- 讓 所有內容填滿整個畫面，並對齊到底部。
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly)- 讓三個按鈕水平排列，並且 平均分配寬度。
3️⃣ 使用 Button(onClick = { ... }) 來建立按鈕
- 當使用者點擊按鈕時，會顯示
Toast訊息，例如： - 這樣當按鈕被點擊時，就會在螢幕下方彈出「Option 1 Clicked!」的提示。
4️⃣ @Preview 提供畫面預覽
@Preview讓你可以在 Android Studio 預覽 UI，不需要每次都執行 App。
