【带源码】我用Jetpack Compose写了个组件库

前言

作为一名Web前端开发者，其实我很早以前就有学习安卓的想法了，因为感觉原生应用的体验真的很丝滑，能实现的功能好多， 但是以前只能用xml的方式开发安卓应用，我不喜欢这种开发体验，所以一直没去学。最近因为发现了Jetpack Compose这个谷歌官方大力推荐的声明式的安卓原生UI框架，简单了解之后发现它和我之前使用的Web前端框架React很相似，都是用函数来开发组件，都有state、effect的概念等，突然就跃跃欲试，并下定决心，在过去的3个月里全心在家学习安卓。

这是一个对我来说全新的领域，尽管我之前有一些Web前端和Kotlin的开发经验，但是安卓开发真的太复杂了，多了好多概念，而且很多地方和Web前端是很不一样的，一开始真的没有头绪。推动我学习的除了热情和兴趣，更重要的是我知道ChatGPT也许能帮我很大的忙，特别是对于我这种刚入门的，总是有十万个为什么。结果是它真的一直很细心、耐心地给我解答，就好像它有一个善良和博学的灵魂哈哈。当然除了ChatGPT，官网、Stack Overflow、Medium、Github、掘金、B站、公众号、Jetpack Compose 博物馆等都给我提供了很多的帮助，特别还有官方的Material3组件库源码。

Jetpack Compose

援引ChatGPT对它的介绍：

Jetpack Compose 是一个用于构建 Android 应用程序的声明式 UI 框架。与传统的基于 XML 的布局方式不同，Jetpack Compose 允许开发者使用 Kotlin 语言来描述 UI 的结构和行为。这种声明式的方法使得 UI 的构建更加直观和灵活。

使用 Jetpack Compose，开发者可以通过简洁的代码定义 UI 组件的外观和交互，而不需要编写大量的样板代码。此外，Jetpack Compose 提供了强大的组件化和复用机制，使得开发者可以更好地管理和维护复杂的 UI 结构。

Jetpack Compose 还具有与现有 Android 生态系统的无缝集成能力，开发者可以将其与传统的 Android UI 框架混合使用，逐步迁移现有的应用程序，而无需进行大规模的重构。 总的来说，Jetpack Compose 提供了一种现代化、高效和易于使用的方式来构建 Android 应用程序的用户界面，为开发者带来了全新的开发体验和更好的用户体验。

在国外，已经有很多大公司都在用Jetpack Compose开发APP了，包括不限于：X（Twitter）、ChatGPT（几乎完全用Compose实现）、谷歌旗下的大部分APP，国内也有微信、微信读书、微博、一刻相册等app部分用到。今天，我想分享我这几个月来开发的第一个安卓项目------WeUI。

WeUI

WeUI原本是微信官方推出的Web UI组件库，它专为移动端的网页和小程序设计，简洁优雅的设计风格是我选择模仿这个项目的主要原因，还有很重要的一点是在浏览器中打开weui.io就能够通过检查元素轻松获取到各种设计参数，如颜色、字体大小、宽高和边距等。但是为了能够尽可能全面地接触到原生安卓开发的各个方面，我以WeUI为基础，扩展了一大批安卓端特有的硬件和系统层面的功能示例，以及一些特定功能的UI界面，主要目的就是希望尽可能快速全面地熟悉安卓开发的各个方面。

在这个过程中，我遇到了许多挑战，但也学到了很多宝贵的经验。为了让更多的开发者，特别是像我这种从前端转过来的新手和没有接触过Jetpack Compose的安卓开发者少走弯路，我决定将代码全部开源！作为一名新手，可能有很多写的不好甚至不对的地方，希望大家多多指正，一起进步！

项目说明

• 根据官方指引，项目采用模块化设计
• 所有依赖尽可能用最新的版本
• 尽最大可能减少外部依赖
• 界面全部适配深色模式

源码&安装包

源码：gitee.com/chengdongqi...

安装包：gitee.com/chengdongqi...

功能介绍

mindmap 基础组件 Badge（角标） Loading（加载中） LoadMore（加载更多） Progress（进度条） Steps（步骤条） Swiper（轮播图） RefreshView（下拉刷新） TabView（选项卡视图） SwipeAction（可滑动列表项） Skeleton（骨架屏） Tree（树型菜单）

mindmap 表单组件 Button（按钮） Checkbox（复选框） Radio （单选框） Switch（开关） Slider（滑块） Picker（滚动选择器） Input（输入框） Rate（评分）

mindmap 媒体组件 Camera（相机，拍照+录视频） MediaPicker（媒体选择器） AudioRecorder（录音） AudioPlayer（音频播放） LivePlayer（直播拉流，待完善） LivePusher（直播推流，待完善） Gallery（相册） ImageCropper（图片裁剪） PanoramicImage（全景图片）

mindmap 操作反馈 ActionSheet（弹出式菜单） Dialog （对话框） Popup（半屏弹窗） Toast（提示框） InformationBar（信息提示条） ContextMenu（上下文菜单）

mindmap 系统服务 Contacts（拨号、通讯录、通话记录） Clipboard（剪贴板） CalendarEvents （系统日历事件） DeviceInfo（设备信息） Downloader（系统下载） Database（数据库示例） SystemStatus（系统状态） SMS（短信发送与读取） InstalledApps（已安装的应用） Keyboard（系统键盘） Notification（发送通知）

mindmap 网络服务 HTTPRequest（网络请求） FileUpload（文件上传） FileDownload（文件下载） WebSocket（双向通信）

mindmap 硬件接口 Screen（屏幕） Flashlight（闪光灯） Vibration（震动） WiFi Bluetooth（蓝牙） NFC（近场通信，待完善） GNSS（全球卫星导航系统） Infrared（红外线） Gyroscope（陀螺仪） Compass（罗盘） Accelerometer（加速度计） Hygrothermograph（温湿度计） Fingerprint（指纹识别）

mindmap 图表组件 BarChart （柱状图） LineChart（折线图） PieChart（饼图、环形图）

mindmap 二维码 QrCodeScanner（二维码识别） QrCodeGenerator（二维码生成）

mindmap 地图组件 LocationPreview（位置预览） LocationPicker（位置选择）

mindmap 扩展示例 Calendar（日历） Clock（时钟） DropCard （滑走式卡片） FileBrowser （文件浏览器） Paint （画板） IndexedList（索引列表） DragSorter（拖拽排序） DividingRule （刻度尺） OrgTree（组织机构树） DigitalRoller（数字滚轮） DigitalKeyboard（数字键盘） CubicBezier（贝塞尔曲线） NotificationBar（通知栏） VideoChannel（视频号） SolarSystem（太阳系动画）

部分界面演示

首页

基础组件

表单组件

媒体组件

操作反馈

系统服务

网络服务

硬件接口

图标组件

二维码

地图组件

扩展示例

注：

• 全景图片、太阳系动画的设计和素材来自MDN：developer.mozilla.org/zh-CN/docs/...
• DropCard、Paint参考了ComposeCookBook：github.com/Gurupreet/C...
• FileBrowser参考了MIUI自带的文件管理器
• CubicBezier、DigitalKeyboard、DigitalRoller、DividingRule、OrgTree等参考了小程序ThorUI
• 其它参考了WeUI、微信、小程序示例、uni-app等
• 细节比较多，光代码提交次数就超过了250次，有些功能没有一一列举，欢迎大家下载体验，交流分享
• 因为依赖版本非常新，如果要运行代码请下载最新的AndroidStudio，最好配置代理或国内镜像仓库，以便更顺畅地下载依赖

其它项目分享

最后和大家分享几个我之前写的web项目：

mishop-ui

精仿小米商城，基于react18+vite+ts

源码：gitee.com/chengdongqi...

预览：chengdongqing.gitee.io/mishop-ui
mishop-api

小米商城后端，基于springboot3+gradle+kotlin

源码：gitee.com/chengdongqi...
xiaopeng

精仿小鹏官网，基于vue3+vite+ts

源码：gitee.com/chengdongqi...

预览：chengdongqing.gitee.io/xiaopeng

莱布尼兹说：

唯有相互交流我们各自的才能，才能共同点燃我们的智慧之灯。

完 ^_^