# JetpackComposeUI

**Repository Path**: glony/jetpack-compose-ui

## Basic Information

- **Project Name**: JetpackComposeUI
- **Description**: ComposeUI - Jetpack Compose 组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-14
- **Last Updated**: 2026-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ComposeUI - Jetpack Compose 组件库

一个基于 **Jetpack Compose** 构建的 Android 组件库，包含 12 大类别、70+ 个组件的演示应用。

## 技术栈

- **框架**: Jetpack Compose 1.6.5
- **设计系统**: Material3
- **语言**: Kotlin 1.9.22
- **构建工具**: Gradle 8.7
- **Android Gradle Plugin**: 8.6.0
- **最低 SDK**: 24

## 项目结构

```
app/src/main/kotlin/com/example/composeui/
├── components/           # 组件目录（按类别划分）
│   ├── basic/           # 基础组件（15个）
│   ├── form/            # 表单组件（7个）
│   ├── feedback/        # 反馈组件（6个）
│   ├── media/           # 媒体组件（7个）
│   ├── system/          # 系统组件（12个）
│   ├── network/         # 网络组件（4个）
│   ├── hardware/        # 硬件组件（10个）
│   ├── chart/           # 图表组件（3个）
│   ├── qrcode/          # 二维码组件（2个）
│   ├── map/             # 地图组件（2个）
│   └── extension/       # 扩展组件（12个）
├── navigation/          # 导航管理
├── ui/                  # UI 屏幕
├── theme/               # 主题配置
├── MainActivity.kt      # 主入口
└── ComposeUIApplication.kt
```

## 组件清单

### 基础组件 (Basic)

| 组件 | 说明 | 文件 |
|------|------|------|
| Badge | 徽标/角标 | [BadgeScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/BadgeScreen.kt) |
| Loading | 加载动画 | [LoadingScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/LoadingScreen.kt) |
| Progress | 进度条 | [ProgressScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/ProgressScreen.kt) |
| Swiper | 轮播图 | [SwiperScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/SwiperScreen.kt) |
| TabView | 标签页 | [TabViewScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/TabViewScreen.kt) |
| RefreshView | 下拉刷新 | [RefreshViewScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/RefreshViewScreen.kt) |
| LoadMore | 上拉加载更多 | [LoadMoreScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/LoadMoreScreen.kt) |
| Skeleton | 骨架屏 | [SkeletonScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/SkeletonScreen.kt) |
| Tree | 树形结构 | [TreeScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/TreeScreen.kt) |
| Steps | 步骤条 | [StepsScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/StepsScreen.kt) |
| SwipeAction | 滑动操作 | [SwipeActionScreen.kt](app/src/main/kotlin/com/example/composeui/components/basic/SwipeActionScreen.kt) |

### 表单组件 (Form)

| 组件 | 说明 | 文件 |
|------|------|------|
| Button | 按钮 | [ButtonScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/ButtonScreen.kt) |
| Switch | 开关 | [SwitchScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/SwitchScreen.kt) |
| Checkbox | 复选框 | [CheckboxScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/CheckboxScreen.kt) |
| Radio | 单选框 | [RadioScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/RadioScreen.kt) |
| Input | 输入框 | [InputScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/InputScreen.kt) |
| Slider | 滑块 | [SliderScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/SliderScreen.kt) |
| Rate | 评分 | [RateScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/RateScreen.kt) |
| Picker | 选择器 | [PickerScreen.kt](app/src/main/kotlin/com/example/composeui/components/form/PickerScreen.kt) |

### 反馈组件 (Feedback)

| 组件 | 说明 | 文件 |
|------|------|------|
| Toast | 轻提示 | [ToastScreen.kt](app/src/main/kotlin/com/example/composeui/components/feedback/ToastScreen.kt) |
| Dialog | 对话框 | [DialogScreen.kt](app/src/main/kotlin/com/example/composeui/components/feedback/DialogScreen.kt) |
| Popup | 弹出层 | [PopupScreen.kt](app/src/main/kotlin/com/example/composeui/components/feedback/PopupScreen.kt) |
| ActionSheet | 操作菜单 | [ActionSheetScreen.kt](app/src/main/kotlin/com/example/composeui/components/feedback/ActionSheetScreen.kt) |
| ContextMenu | 上下文菜单 | [ContextMenuScreen.kt](app/src/main/kotlin/com/example/composeui/components/feedback/ContextMenuScreen.kt) |
| InformationBar | 信息栏 | [InformationBarScreen.kt](app/src/main/kotlin/com/example/composeui/components/feedback/InformationBarScreen.kt) |

### 媒体组件 (Media)

| 组件 | 说明 | 文件 |
|------|------|------|
| Camera | 相机 | [CameraScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/CameraScreen.kt) |
| Gallery | 相册 | [GalleryScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/GalleryScreen.kt) |
| ImageCropper | 图片裁剪 | [ImageCropperScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/ImageCropperScreen.kt) |
| PanoramicImage | 全景图片 | [PanoramicImageScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/PanoramicImageScreen.kt) |
| MediaPicker | 媒体选择器 | [MediaPickerScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/MediaPickerScreen.kt) |
| AudioPlayer | 音频播放 | [AudioPlayerScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/AudioPlayerScreen.kt) |
| AudioRecorder | 音频录制 | [AudioRecorderScreen.kt](app/src/main/kotlin/com/example/composeui/components/media/AudioRecorderScreen.kt) |

### 系统组件 (System)

| 组件 | 说明 | 文件 |
|------|------|------|
| Notification | 通知 | [NotificationScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/NotificationScreen.kt) |
| Contacts | 联系人 | [ContactsScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/ContactsScreen.kt) |
| SMS | 短信 | [SMSScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/SMSScreen.kt) |
| CalendarEvents | 日历事件 | [CalendarEventsScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/CalendarEventsScreen.kt) |
| DeviceInfo | 设备信息 | [DeviceInfoScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/DeviceInfoScreen.kt) |
| InstalledApps | 已安装应用 | [InstalledAppsScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/InstalledAppsScreen.kt) |
| Clipboard | 剪贴板 | [ClipboardScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/ClipboardScreen.kt) |
| Keyboard | 键盘 | [KeyboardScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/KeyboardScreen.kt) |
| SystemStatus | 系统状态 | [SystemStatusScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/SystemStatusScreen.kt) |
| Database | 数据库 | [DatabaseScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/DatabaseScreen.kt) |
| Downloader | 下载管理 | [DownloaderScreen.kt](app/src/main/kotlin/com/example/composeui/components/system/DownloaderScreen.kt) |

### 网络组件 (Network)

| 组件 | 说明 | 文件 |
|------|------|------|
| HTTPRequest | HTTP 请求 | [HTTPRequestScreen.kt](app/src/main/kotlin/com/example/composeui/components/network/HTTPRequestScreen.kt) |
| WebSocket | WebSocket | [WebSocketScreen.kt](app/src/main/kotlin/com/example/composeui/components/network/WebSocketScreen.kt) |
| FileUpload | 文件上传 | [FileUploadScreen.kt](app/src/main/kotlin/com/example/composeui/components/network/FileUploadScreen.kt) |
| FileDownload | 文件下载 | [FileDownloadScreen.kt](app/src/main/kotlin/com/example/composeui/components/network/FileDownloadScreen.kt) |

### 硬件组件 (Hardware)

| 组件 | 说明 | 文件 |
|------|------|------|
| Fingerprint | 指纹识别 | [FingerprintScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/FingerprintScreen.kt) |
| Bluetooth | 蓝牙 | [BluetoothScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/BluetoothScreen.kt) |
| WiFi | WiFi | [WiFiScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/WiFiScreen.kt) |
| Flashlight | 手电筒 | [FlashlightScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/FlashlightScreen.kt) |
| Vibration | 震动 | [VibrationScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/VibrationScreen.kt) |
| Accelerometer | 加速度计 | [AccelerometerScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/AccelerometerScreen.kt) |
| Gyroscope | 陀螺仪 | [GyroscopeScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/GyroscopeScreen.kt) |
| Compass | 指南针 | [CompassScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/CompassScreen.kt) |
| GNSS | 定位 | [GNSSScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/GNSSScreen.kt) |
| Infrared | 红外 | [InfraredScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/InfraredScreen.kt) |
| Screen | 屏幕 | [ScreenScreen.kt](app/src/main/kotlin/com/example/composeui/components/hardware/ScreenScreen.kt) |

### 图表组件 (Chart)

| 组件 | 说明 | 文件 |
|------|------|------|
| PieChart | 饼图 | [PieChartScreen.kt](app/src/main/kotlin/com/example/composeui/components/chart/PieChartScreen.kt) |
| BarChart | 柱状图 | [BarChartScreen.kt](app/src/main/kotlin/com/example/composeui/components/chart/BarChartScreen.kt) |
| LineChart | 折线图 | [LineChartScreen.kt](app/src/main/kotlin/com/example/composeui/components/chart/LineChartScreen.kt) |

### 二维码组件 (QR Code)

| 组件 | 说明 | 文件 |
|------|------|------|
| QrCodeGenerator | 二维码生成 | [QrCodeGeneratorScreen.kt](app/src/main/kotlin/com/example/composeui/components/qrcode/QrCodeGeneratorScreen.kt) |
| QrCodeScanner | 二维码扫描 | [QrCodeScannerScreen.kt](app/src/main/kotlin/com/example/composeui/components/qrcode/QrCodeScannerScreen.kt) |

### 地图组件 (Map)

| 组件 | 说明 | 文件 |
|------|------|------|
| LocationPreview | 位置预览 | [LocationPreviewScreen.kt](app/src/main/kotlin/com/example/composeui/components/map/LocationPreviewScreen.kt) |
| LocationPicker | 位置选择 | [LocationPickerScreen.kt](app/src/main/kotlin/com/example/composeui/components/map/LocationPickerScreen.kt) |

### 扩展组件 (Extension)

| 组件 | 说明 | 文件 |
|------|------|------|
| Calendar | 日历 | [CalendarScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/CalendarScreen.kt) |
| Clock | 时钟 | [ClockScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/ClockScreen.kt) |
| DigitalRoller | 数字滚轮 | [DigitalRollerScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/DigitalRollerScreen.kt) |
| DigitalKeyboard | 数字键盘 | [DigitalKeyboardScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/DigitalKeyboardScreen.kt) |
| FileBrowser | 文件浏览器 | [FileBrowserScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/FileBrowserScreen.kt) |
| OrgTree | 组织树 | [OrgTreeScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/OrgTreeScreen.kt) |
| DragSorter | 拖拽排序 | [DragSorterScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/DragSorterScreen.kt) |
| DropCard | 卡片掉落 | [DropCardScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/DropCardScreen.kt) |
| IndexedList | 索引列表 | [IndexedListScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/IndexedListScreen.kt) |
| DividingRule | 分割线 | [DividingRuleScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/DividingRuleScreen.kt) |
| CubicBezier | 贝塞尔曲线 | [CubicBezierScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/CubicBezierScreen.kt) |
| Paint | 画板 | [PaintScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/PaintScreen.kt) |
| NotificationBar | 通知栏 | [NotificationBarScreen.kt](app/src/main/kotlin/com/example/composeui/components/extension/NotificationBarScreen.kt) |

## 快速开始

### 环境要求

- **Android Studio**: Hedgehog (2023.1.1) 或更高版本
- **JDK**: 17 或更高版本
- **Android SDK**: 35 (compileSdk)

### 构建运行

1. 克隆项目到本地
2. 使用 Android Studio 打开项目
3. 等待 Gradle 同步完成
4. 连接 Android 设备或启动模拟器
5. 点击 **Run** 按钮运行应用

### Gradle 配置

项目使用 Compose BOM 统一管理版本：

```kotlin
// app/build.gradle
dependencies {
    implementation platform('androidx.compose:compose-bom:2024.02.01')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.foundation:foundation'
    implementation 'androidx.compose.material3:material3'
    // ... 其他依赖
}
```

## 核心特性

- **声明式 UI**: 基于 Jetpack Compose 的声明式编程范式
- **Material3 设计**: 采用 Material Design 3 设计语言
- **完整导航**: 使用 Navigation Compose 实现组件间跳转
- **状态管理**: 使用 `remember`, `mutableStateOf`, `LaunchedEffect` 等 Compose 状态 API
- **权限处理**: 使用 Accompanist Permissions 处理相机等敏感权限

## 导航结构

应用采用底部导航 + 分类列表的结构：

```
HomeScreen (首页)
├── BasicCategory (基础组件)
│   ├── BadgeScreen
│   ├── LoadingScreen
│   └── ...
├── FormCategory (表单组件)
│   ├── ButtonScreen
│   ├── InputScreen
│   └── ...
└── ... (其他分类)
```

## 注意事项

1. **相机权限**: CameraScreen 和 QrCodeScannerScreen 需要相机权限，首次使用会弹出权限请求
2. **硬件功能**: 部分硬件组件（如指纹、蓝牙）需要在真实设备上测试
3. **网络功能**: HTTPRequest 和 WebSocket 组件为模拟实现，未连接真实服务器

## 许可证

MIT License