Composables cơ bản

1. Text

@Composable
fun TextExamples() {
    Column {
        // Basic
        Text("Hello World")

        // Styled
        Text(
            text = "Styled Text",
            color = Color.Blue,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            textAlign = TextAlign.Center,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis
        )

        // AnnotatedString
        Text(
            buildAnnotatedString {
                append("Normal ")
                withStyle(SpanStyle(color = Color.Red)) {
                    append("Red ")
                }
                withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
                    append("Bold")
                }
            }
        )
    }
}

2. Button

@Composable
fun ButtonExamples() {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        // Filled Button
        Button(onClick = { }) {
            Text("Filled Button")
        }

        // Outlined Button
        OutlinedButton(onClick = { }) {
            Text("Outlined Button")
        }

        // Text Button
        TextButton(onClick = { }) {
            Text("Text Button")
        }

        // Icon Button
        IconButton(onClick = { }) {
            Icon(Icons.Default.Favorite, "Favorite")
        }

        // FAB
        FloatingActionButton(onClick = { }) {
            Icon(Icons.Default.Add, "Add")
        }
    }
}

3. TextField

@Composable
fun TextFieldExamples() {
    var text by remember { mutableStateOf("") }

    Column {
        // Basic TextField
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Label") },
            placeholder = { Text("Enter text") }
        )

        // Outlined TextField
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Outlined") },
            leadingIcon = { Icon(Icons.Default.Person, null) },
            trailingIcon = { Icon(Icons.Default.Clear, null) }
        )

        // Password TextField
        var password by remember { mutableStateOf("") }
        var visible by remember { mutableStateOf(false) }

        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = if (visible)
                VisualTransformation.None
            else
                PasswordVisualTransformation(),
            trailingIcon = {
                IconButton(onClick = { visible = !visible }) {
                    Icon(
                        if (visible) Icons.Default.Visibility
                        else Icons.Default.VisibilityOff,
                        null
                    )
                }
            }
        )
    }
}

4. Image

@Composable
fun ImageExamples() {
    Column {
        // Resource image
        Image(
            painter = painterResource(R.drawable.ic_launcher),
            contentDescription = "App Icon",
            modifier = Modifier.size(100.dp)
        )

        // Vector image
        Image(
            imageVector = Icons.Default.Star,
            contentDescription = "Star",
            colorFilter = ColorFilter.tint(Color.Yellow)
        )

        // With Coil (network image)
        AsyncImage(
            model = "https://example.com/image.jpg",
            contentDescription = "Network image",
            modifier = Modifier.size(200.dp),
            contentScale = ContentScale.Crop
        )
    }
}

5. Icon

@Composable
fun IconExamples() {
    Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Icon(Icons.Default.Home, "Home")
        Icon(Icons.Default.Settings, "Settings", tint = Color.Blue)
        Icon(Icons.Outlined.Favorite, "Favorite")
        Icon(
            painter = painterResource(R.drawable.custom_icon),
            contentDescription = "Custom"
        )
    }
}

6. Card

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Card Title", fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(8.dp))
            Text("Card content goes here")
        }
    }
}

7. Checkbox và Switch

@Composable
fun ToggleExamples() {
    var checked by remember { mutableStateOf(false) }
    var switched by remember { mutableStateOf(false) }

    Column {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Checkbox(
                checked = checked,
                onCheckedChange = { checked = it }
            )
            Text("Checkbox")
        }

        Row(verticalAlignment = Alignment.CenterVertically) {
            Switch(
                checked = switched,
                onCheckedChange = { switched = it }
            )
            Text("Switch")
        }
    }
}

8. RadioButton

@Composable
fun RadioButtonExample() {
    val options = listOf("Option 1", "Option 2", "Option 3")
    var selected by remember { mutableStateOf(options[0]) }

    Column {
        options.forEach { option ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { selected = option }
            ) {
                RadioButton(
                    selected = selected == option,
                    onClick = { selected = option }
                )
                Text(option)
            }
        }
    }
}

9. Slider

@Composable
fun SliderExample() {
    var value by remember { mutableStateOf(50f) }

    Column {
        Slider(
            value = value,
            onValueChange = { value = it },
            valueRange = 0f..100f,
            steps = 9
        )
        Text("Value: ${value.toInt()}")
    }
}

10. Progress Indicators

@Composable
fun ProgressExamples() {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        // Indeterminate
        CircularProgressIndicator()
        LinearProgressIndicator()

        // Determinate
        CircularProgressIndicator(progress = 0.7f)
        LinearProgressIndicator(progress = 0.7f)
    }
}

---

📝 Tóm tắt

Component	Mô tả
Text	Hiển thị text
Button	Button với nhiều variants
TextField	Input text
Image	Hiển thị hình ảnh
Icon	Hiển thị icon
Card	Container với elevation
Checkbox/Switch	Toggle controls
RadioButton	Single selection
Slider	Range input
Progress	Loading indicators