【Android】Jetpack Compose 入門教學 基本 UI 元件範例
Jetpack Compose 是 Google 推出的現代化 Android UI 框架，採用宣告式寫法取代傳統 XML 佈局，大幅簡化 UI 開發流程。本篇整理常用的基本元件範例，讓你快速上手。
文章目錄
1. 環境需求
- Android Studio Hedgehog 以上
- Kotlin 1.9+
- Compose BOM 2024.02.00 以上
2. 建立 Compose 專案
在 build.gradle.kts 加入依賴：
dependencies {
implementation(platform("androidx.compose:compose-bom:2024.02.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.material3:material3")
implementation("androidx.activity:activity-compose:1.8.2")
}
3. Text 文字
@Composable
fun TextExample() {
Text(
text = "Hello Compose!",
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
color = Color.Blue
)
}
4. Button 按鈕
@Composable
fun ButtonExample() {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text(text = "點擊次數：$count")
}
}
5. TextField 輸入框
@Composable
fun TextFieldExample() {
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it },
label = { Text("請輸入文字") },
placeholder = { Text("輸入...") }
)
}
6. Image 圖片
@Composable
fun ImageExample() {
Image(
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = "圖片描述",
modifier = Modifier
.size(100.dp)
.clip(CircleShape)
)
}
7. Column / Row 排版
// 垂直排列
@Composable
fun ColumnExample() {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("第一行")
Text("第二行")
Text("第三行")
}
}
// 水平排列
@Composable
fun RowExample() {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Text("左")
Text("中")
Text("右")
}
}
8. 完整範例
@Composable
fun MainScreen() {
var inputText by remember { mutableStateOf("") }
var displayText by remember { mutableStateOf("") }
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "Jetpack Compose 範例",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = inputText,
onValueChange = { inputText = it },
label = { Text("請輸入文字") }
)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { displayText = inputText }) {
Text("送出")
}
Spacer(modifier = Modifier.height(16.dp))
if (displayText.isNotEmpty()) {
Text(
text = "你輸入了：$displayText",
color = Color.Green
)
}
}
}
// 在 Activity 中使用
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MainScreen()
}
}
}