Compose 基础组件

// 基本文本
Text("Hello Compose")
 
// 样式设置
Text(
    text = "Styled Text",
    color = Color.Blue,
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold,
    textAlign = TextAlign.Center
)

var text by remember { mutableStateOf("") }
 
TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("输入框") },
    placeholder = { Text("请输入内容") }
)

Button(
    onClick = { /* 处理点击事件 */ },
    colors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.primary
    )
) {
    Text("点击我")
}

IconButton(onClick = { /* 处理点击事件 */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = "收藏")
}

Image(
    painter = painterResource(id = R.drawable.image),
    contentDescription = "示例图片",
    modifier = Modifier
        .size(100.dp)
        .clip(CircleShape)
)

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "网络图片",
    placeholder = painterResource(R.drawable.loading)
)

LazyColumn {
    items(items = listOf("Item 1", "Item 2", "Item 3")) { item ->
        Text(
            text = item,
            modifier = Modifier.padding(16.dp)
        )
    }
}

LazyRow {
    items(10) { index ->
        Card(
            modifier = Modifier
                .size(100.dp)
                .padding(8.dp)
        ) {
            Text("Item $index")
        }
    }
}

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    elevation = 4.dp
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("卡片标题", style = MaterialTheme.typography.h6)
        Text("卡片内容", style = MaterialTheme.typography.body1)
    }
}

Surface(
    modifier = Modifier.padding(8.dp),
    elevation = 8.dp,
    shape = RoundedCornerShape(8.dp)
) {
    Text(
        text = "Surface 示例",
        modifier = Modifier.padding(16.dp)
    )
}

var checked by remember { mutableStateOf(false) }
 
Checkbox(
    checked = checked,
    onCheckedChange = { checked = it }
)

var selectedOption by remember { mutableStateOf(0) }
val options = listOf("选项1", "选项2", "选项3")
 
Column {
    options.forEachIndexed { index, text ->
        Row(
            Modifier
                .fillMaxWidth()
                .selectable(
                    selected = (selectedOption == index),
                    onClick = { selectedOption = index }
                )
                .padding(8.dp)
        ) {
            RadioButton(
                selected = (selectedOption == index),
                onClick = { selectedOption = index }
            )
            Text(
                text = text,
                modifier = Modifier.padding(start = 16.dp)
            )
        }
    }
}