一、基礎控件詳解

1. Text - 文本控件

Text(text = "Hello Compose", // 必填，顯示文本color = Color.Blue,      // 文字顏色fontSize = 24.sp,        // 字體大小（注意使用.sp單位）fontStyle = FontStyle.Italic, // 字體樣式（斜體）fontWeight = FontWeight.Bold, // 字體粗細modifier = Modifier.padding(16.dp)     // 內邊距.background(Color.LightGray) // 背景色
)

核心參數說明：

• text：顯示的文字內容（必填）

• color：文字顏色（Color.Red,?Color(0xFF6200EE)等）

• fontSize：字體大小（必須使用.sp單位，如18.sp）

• fontWeight：字體粗細（FontWeight.Normal,?Bold,?W800等）

• modifier：通用修飾符（設置邊距、背景、點擊事件等）

• maxLines：最大行數（超出顯示省略號）

• textDecoration：文本裝飾（TextDecoration.Underline下劃線）

效果(示意圖)：

[淺灰色背景]Hello Compose（藍色，24sp，粗體，斜體）

---

2. Button - 按鈕控件

val context = LocalContext.currentButton(onClick = { // 必填，點擊回調Toast.makeText(context, "Clicked!", Toast.LENGTH_SHORT).show()},colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red, // 按鈕背景contentColor = Color.White   // 內容顏色),modifier = Modifier.padding(8.dp),enabled = true // 是否啟用
) {Icon( // 圖標imageVector = Icons.Filled.Favorite,contentDescription = "Like")Spacer(Modifier.width(8.dp)) // 間距Text("Like") // 按鈕文字
}

核心參數說明：

• onClick：點擊事件回調（必填）

• colors：顏色配置（背景色、文字色）

• enabled：是否啟用（false時變灰色）

• content：按鈕內容（可包含任意Composable）

效果：

[紅色按鈕] ? Like（白色文字）
點擊后彈出Toast

---

3. TextField - 輸入框控件

var text by remember { mutableStateOf("") } // 關鍵：狀態管理TextField(value = text, // 當前值（綁定狀態）onValueChange = { newText -> // 輸入變化回調text = newText },label = { Text("Username") }, // 浮動標簽placeholder = { Text("Enter your name") }, // 提示文字leadingIcon = { // 前綴圖標Icon(Icons.Filled.Person, null) },keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, // 鍵盤類型imeAction = ImeAction.Done        // 鍵盤動作),modifier = Modifier.fillMaxWidth()
)

核心參數說明：

• value/onValueChange：必須配合狀態管理（remember+mutableStateOf）

• label：浮動標簽（輸入時上浮）

• placeholder：提示文本（未輸入時顯示）

• keyboardOptions：鍵盤配置（郵箱/數字鍵盤等）

• singleLine：是否單行（true時禁用換行）

---

4. Image - 圖片控件

// 加載本地資源
Image(painter = painterResource(R.drawable.dog),contentDescription = "Cute dog", // 必填（無障礙）modifier = Modifier.size(120.dp).clip(CircleShape), // 圓形裁剪contentScale = ContentScale.Crop // 裁剪模式
)// 加載網絡圖片（Coil）
AsyncImage(model = "https://example.com/image.jpg",contentDescription = "Network image",placeholder = { // 加載中顯示CircularProgressIndicator()},error = { // 錯誤顯示Icon(Icons.Filled.Error, null)}
)

核心參數說明：

• painter：本地資源（painterResource()）

• contentDescription：必填（無障礙支持）

• contentScale：縮放模式（Crop,?Fit,?Inside等）

• alpha：透明度（0.0f-1.0f）

• colorFilter：顏色濾鏡（如黑白效果）

---

5. ProgressIndicator - 進度指示器

// 圓形進度條
CircularProgressIndicator(progress = 0.7f, // 進度值（0-1）color = Color.Green,strokeWidth = 8.dp,modifier = Modifier.size(50.dp)
)// 線性進度條
LinearProgressIndicator(progress = 0.4f,backgroundColor = Color.LightGray,color = MaterialTheme.colors.primary,modifier = Modifier.fillMaxWidth().padding(16.dp)
)

參數說明：

• progress：進度值（0-1），不傳則為不確定進度

• color：進度條顏色

• strokeWidth：圓形進度條粗細

• backgroundColor：線性進度條背景色

---

二、核心布局詳解（附結構圖）

1. Column - 垂直布局

Column(modifier = Modifier.fillMaxSize() // 占滿父布局.background(Color.LightGray),horizontalAlignment = Alignment.CenterHorizontally, // 水平居中verticalArrangement = Arrangement.SpaceEvenly // 等間距分布
) {Text("Item 1")Button(onClick = {}) { Text("Button") }Image(painterResource(R.drawable.icon), null)
}

參數說明：

參數	說明	常用值
horizontalAlignment	子項水平對齊	Start,?CenterHorizontally,?End
verticalArrangement	垂直分布方式	Top,?Center,?SpaceBetween,?SpaceEvenly
modifier	修飾符	設置尺寸/背景/邊距等

布局效果：

┌───────────────────────────┐
│                           │
│          Item 1           │
│                           │
│         [ Button ]        │
│                           │
│          [圖標]           │
│                           │
└───────────────────────────┘
（等間距分布）

---

2. Row - 水平布局

Row(modifier = Modifier.fillMaxWidth().background(Color.LightGray).padding(16.dp).horizontalScroll(rememberScrollState()), // 水平滾動verticalAlignment = Alignment.CenterVertically, // 垂直居中horizontalArrangement = Arrangement.SpaceBetween // 兩端對齊
) {Icon(Icons.Filled.Menu, "Menu")Text("Title", fontWeight = FontWeight.Bold)Icon(Icons.Filled.Search, "Search")
}

參數說明：

參數	說明	常用值
verticalAlignment	子項垂直對齊	Top,?CenterVertically,?Bottom
horizontalArrangement	水平分布方式	Start,?Center,?SpaceBetween,?SpaceAround
.horizontalScroll()	水平滾動支持	必須添加

布局效果：

┌─[菜單]─────標題─────[搜索]─┐
（兩端對齊，可橫向滾動）

---

3. Box - 層疊布局

Box(modifier = Modifier.size(200.dp).background(Color.Blue)
) {Image( // 底層painter = painterResource(R.drawable.bg),contentDescription = "Background",modifier = Modifier.fillMaxSize())Text( // 中層"Overlay Text",color = Color.White,modifier = Modifier.align(Alignment.Center).padding(8.dp))Button( // 頂層onClick = {},modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)) {Text("Action")}
}

關鍵方法：

• Modifier.align()：在Box內定位

  • Alignment.TopStart

  • Alignment.Center

  • Alignment.BottomEnd

• Modifier.zIndex()：控制層級（默認后添加的在上層）

布局效果：

┌───────────────────────────┐
│   [背景圖片]              │
│                           │
│        居中文字           │
│                           │
│                   [按鈕]  │
└───────────────────────────┘
（三層疊加）

---

三、常見問題

Q1：Compose 為什么需要狀態管理？TextField 如何處理狀態變化？

答：

// 狀態聲明
var text by remember { mutableStateOf("") }// 狀態綁定
TextField(value = text, // 綁定狀態值onValueChange = { newText -> text = newText // 更新狀態}
)/*
1. 初始狀態 text = ""
2. 用戶輸入 "A" -> 觸發 onValueChange
3. text 更新為 "A"
4. 狀態變化觸發重組（Recomposition）
5. TextField 根據新值刷新界面
*/

Q2：如何實現列表滾動？

垂直滾動：

Column(modifier = Modifier.verticalScroll(rememberScrollState())
) { /* 長內容 */ }

高性能列表（LazyColumn）：

LazyColumn {item { Header() }items(100) { index -> // 只渲染可見項ListItem(index)}item { Footer() }
}

Q3：Box 布局如何實現復雜定位？

Box(modifier = Modifier.fillMaxSize()) {// 左上角Text("TopStart", Modifier.align(Alignment.TopStart))// 右上角Button(onClick = {}, Modifier.align(Alignment.TopEnd)) { ... }// 正中央Image(..., Modifier.align(Alignment.Center))// 左下角Icon(..., Modifier.align(Alignment.BottomStart))// 右下角CircularProgressIndicator(Modifier.align(Alignment.BottomEnd))
}

Q4：如何實現響應式布局？

@Composable
fun AdaptiveLayout() {// 根據屏幕寬度選擇布局val configuration = LocalConfiguration.currentval screenWidth = configuration.screenWidthDp.dpif (screenWidth < 600.dp) {VerticalLayout() // 小屏：垂直布局} else {HorizontalLayout() // 大屏：水平布局}
}