📦 Jetpack Compose 常用组件列表
1. 基础控件（Widgets）
| 组件 | 作用 | 备注 |
|---|
Text | 显示文本 | 最基础的文本控件 |
Button | 按钮 | 支持点击事件 |
IconButton | 只带图标的按钮 | 常用在工具栏 |
TextField | 单行输入框 | 表单输入 |
OutlinedTextField | 带边框的输入框 | 常用于登录界面 |
Checkbox | 复选框 | 多选场景 |
RadioButton | 单选按钮 | 单选场景 |
Switch | 开关 | 开启/关闭设置项 |
2. 布局控件（Layouts）
| 组件 | 作用 | 备注 |
|---|
Column | 垂直排列 | 类似 LinearLayout vertical |
Row | 水平排列 | 类似 LinearLayout horizontal |
Box | 叠加布局 | 类似 FrameLayout |
LazyColumn | 垂直列表 | 类似 RecyclerView |
LazyRow | 横向列表 | 横向滑动效果 |
Spacer | 空白占位 | 用来调整布局间距 |
Divider | 分割线 | 分隔不同部分 |
3. 高级控件（Advanced）
| 组件 | 作用 | 备注 |
|---|
Card | 卡片 | 常用于列表或分组展示 |
Surface | 带样式的容器 | 可以设置背景色、圆角等 |
Scaffold | 页面骨架 | 包括 TopBar、BottomBar、FAB 等 |
TopAppBar | 顶部应用栏 | 标题、返回键、菜单等 |
BottomAppBar | 底部应用栏 | 配合底部导航使用 |
BottomNavigation | 底部导航栏 | 类似 ViewPager+TabLayout组合 |
FloatingActionButton | 浮动按钮 | 常用于新增操作 |
4. 图形与媒体（Graphics & Media）
| 组件 | 作用 | 备注 |
|---|
Image | 显示图片 | 可以加载本地或网络图片 |
Icon | 显示图标 | 通常配合 Button 或导航栏 |
Canvas | 自定义绘制 | 高级绘图使用 |
5. 手势与交互（Gesture）
| 组件 | 作用 | 备注 |
|---|
Clickable Modifier | 让任何组件可以点击 | 类似设置 setOnClickListener |
Draggable Modifier | 拖拽效果 | 支持拖动交互 |
SwipeToDismiss | 滑动删除 | 常用于列表项滑动删除 |
✨ 示例 - 基本布局
@Composable
fun GreetingCard() {Card(modifier = Modifier.padding(16.dp),elevation = 8.dp) {Column(modifier = Modifier.padding(16.dp)) {Text(text = "Hello, Compose!", style = MaterialTheme.typography.h6)Spacer(modifier = Modifier.height(8.dp))Button(onClick = { }) {Text("Click Me")}}}
}
