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

[淺灰色背景]
  Hello Compose（藍(lán)色，24sp，粗體，斜體）

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

[紅色按鈕] ? Like（白色文字）
點(diǎn)擊后彈出Toast

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

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

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

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)
}

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

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

┌─[菜單]─────標(biāo)題─────[搜索]─┐
（兩端對(duì)齊，可橫向滾動(dòng)）

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")
    }
}

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

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

Column(
    modifier = Modifier.verticalScroll(rememberScrollState())
) { /* 長(zhǎng)內(nèi)容 */ }

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

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))
}

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