實現按一個按鈕才顯示 "Hello Android!" 的功能
以使用 Jetpack Compose 的狀態管理來控制文本的顯示與隱藏。以下是改寫後的程式碼：
首先，你需要在
Greeting函數中加入一個按鈕，並使用MutableState來控制文本的顯示與隱藏。當按鈕被點擊時，切換狀態以顯示或隱藏文本。
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment // 導入 Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MyApplicationTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
}
@Composable
fun Greeting(modifier: Modifier = Modifier) {
// 使用 remember 來保存狀態
var showText by remember { mutableStateOf(false) }
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally // 使用 Alignment
) {
// 當 showText 為 true 時顯示文本
if (showText) {
Text(
text = "Hello Android!",
modifier = Modifier.padding(bottom = 16.dp)
)
}
// 按鈕，點擊時切換 showText 的值
Button(onClick = { showText = !showText }) {
Text(text = if (showText) "Hide Text" else "Show Text")
}
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyApplicationTheme {
Greeting()
}
}
程式碼說明：
1 導入 Alignment：
在檔案頂部加入 import androidx.compose.ui.Alignment。
Alignment 是 Compose UI 中用於對齊的類別，例如 Alignment.CenterHorizontally 用於水平居中對齊。
2 showText 狀態：使用 remember { mutableStateOf(false) } 來創建一個可觀察的狀態 showText，初始值為 false，表示文本一開始是隱藏的。
3 條件渲染：在 Column 中，使用 if (showText) 來判斷是否顯示 "Hello Android!" 文本。
4 按鈕點擊事件：按鈕的 onClick 事件會切換 showText 的值，從而控制文本的顯示與隱藏。按鈕的文本也會根據 showText 的值動態變化。
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally // 使用 Alignment
)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
這段程式碼的效果是：
Column會佔滿父容器的全部空間，並設置 16 dp 的內邊距。Column中的所有子元素會在垂直方向上居中排列。每個子元素會在水平方向上居中對齊。
運行效果：
1 當你運行這個應用程式時，一開始只會看到一個按鈕，點擊按鈕後會顯示 "Hello Android!" 文本。
2 再次點擊按鈕，文本會隱藏。
