Composable

在 Jetpack Compose 中，每一个 UI 元素都是通过一个带有 @Composable 注解的函数构建的，例如：

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name")
}

只要一个函数前加了 @Composable，它就能用于描述 UI。
主要特点:

• 声明式UI
• 可重用，可组合
• 响应式更新

布局类

1. Column

垂直排列子元素。

Column {
    Text("A")
    Text("B")
}

2. Row

水平排列子元素。

Row {
    Text("A")
    Text("B")
}

3. Box

允许子组件重叠，自由定位。

Box {
    Text("底层文本")
    Text("覆盖文本")
}

4. LazyColumn

长列表（垂直）。

LazyColumn {
    items(100) { Text("Item $it") }
}

5. LazyRow

长列表（水平）。

6. LazyVerticalGrid / LazyHorizontalGrid

网格布局（Compose Material3 提供）。

文本类

1. Text

显示文字。

Text("Hello Compose")

2. TextField

可输入文本。

TextField(value, onValueChange)

3. OutlinedTextField

带边框的输入框。

4. ClickableText（accompanist）

可点击文本。

按钮类

1. Button

默认按钮。

Button(onClick = {}) {
    Text("按钮")
}

2. OutlinedButton

描边按钮。

3. TextButton

仅文字按钮。

4. IconButton

用于图标点击。

图片与图标

1. Image

加载图片。

Image(
    painter = painterResource(id = R.drawable.xxx),
    contentDescription = null
)

2. Icon

显示 Material 图标。

卡片与容器

1. Card

常用于展示内容块。

Card {
    Text("卡片内容")
}

2. Surface

Compose 中通用容器，可设置背景色、阴影、圆角等。

用户输入控制

1. Checkbox

多选框

@Composable
fun CheckBoxExample() {
    // 声明一个可变变量
    var checked by remember { mutableStateOf(false) }

    // CheckBox Compose
    Checkbox(
        checked = checked,
        onCheckedChange = { isChecked ->
            checked = isChecked
        }
    )
}

2. RadioButton

单选按钮

@Composable
fun RadioButtonExample() {
    var selectedOption by remember {
        mutableStateOf("Option 1")
    }

    Column {
        RadioButtonRow(
            text = "Option 1",
            isSelected = selectedOption == "Option 1",
            onSelected = { selectedOption =  "Option 1"}
        )
        RadioButtonRow(
            text = "Option 2",
            isSelected = selectedOption == "Option 2",
            onSelected = { selectedOption =  "Option 2"}
        )
        RadioButtonRow(
            text = "Option 3",
            isSelected = selectedOption == "Option 3",
            onSelected = { selectedOption =  "Option 3"}
        )
    }
}

@Composable
fun RadioButtonRow(text: String, isSelected: Boolean, onSelected: () -> Unit) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        RadioButton(
            selected = isSelected,
            onClick = onSelected,
            modifier = Modifier.padding(vertical = 4.dp)
        )
        Text(text = text)
    }
}

3. Switch

开关

@Composable
fun SwitchExample() {
    var isChecked by remember { mutableStateOf(false) }

    Switch(
        checked = isChecked,
        onCheckedChange = {
            isChecked = it
        }
    )
}

4. Slider

滑条（音量、亮度等）。

5. FloatingActionButton

悬浮按钮（FAB）。

Material 组件

1. Scaffold

提供顶部栏、底部栏、抽屉等结构化布局。

Scaffold(
    topBar = { TopAppBar(title = { Text("标题") }) },
    floatingActionButton = { FloatingActionButton { } }
) {
    // content
}

2. TopAppBar / CenterAlignedTopAppBar

顶部栏。

3. NavigationBar / BottomAppBar

底部导航。

4. ModalNavigationDrawer / NavigationDrawer

侧边抽屉。

页面导航

1. NavHost

定义导航图。

2. composable

定义具体页面。

动画类

1. AnimatedVisibility

显隐动画。

2. animate*AsState

数值、颜色、Dp 动画。

3. Crossfade

内容切换动画。