参考 Vant4
下方支持程度图标说明
- ✅ 完全支持
⚠️ 部分支持- ℹ️ 计划实现，但暂时未实现
- 🚫 不考虑实现（原生已经有更好的）
| 类型 | 组件 | 支持程度 | 备注 |
|---|---|---|---|
| 基础组件 | Button 按钮 | 暂不支持渐变色背景、动画按钮 | |
| Cell 单元格 | ✅ | ||
| Toast 轻提示 | ✅ | ||
| 表单组件 | Calendar 日历 | ℹ️ | TODO |
| Cascader 级联选择 | ℹ️ | TODO | |
| Checkbox 复选框 | ✅ | ||
| Field 输入框 | ✅ | ||
| Picker 选择器 | ✅ | ||
| PickerGroup 选择器组 | ℹ️ | TODO | |
| Search 搜索 | ✅ | ||
| Slider 滑块 | ℹ️ | TODO | |
| Stepper 步进器 | ✅ | ||
| Switch 开关 | ✅ | ||
| CheckButton 选择按钮 | ✅ | ||
| 反馈组件 | Sheet 动作面板 | ✅ | |
| Dialog 弹出框 | ✅ | ||
| DropdownMenu 下拉菜单 | ℹ️ | TODO | |
| Loading 加载 | ✅ | ||
| Notify 消息提示 | ✅ | ||
| Overlay 遮罩层 | ✅ | ||
| ShareSheet 分享面板 | ℹ️ | TODO | |
| SwipeCell 滑动单元格 | ℹ️ | TODO | |
| PullRefresh 下拉刷新 | ✅ | ||
| 展示组件 | Badge 徽标 | ✅ | |
| Collapse 折叠面板 | ℹ️ | TODO | |
| CountDown 倒计时 | ℹ️ | TODO | |
| Divider 分割线 | 🚫 | 不考虑二次封装，建议选择原生 | |
| Empty 空状态 | ℹ️ | TODO | |
| ImagePreview 图片预览 | |||
| NoticeBar 通知栏 | ℹ️ | TODO | |
| Popover 气泡弹出框 | 支持自动识别弹出方向（上下），以及靠左、靠右、居中，深色浅色风格，更多特性如"水平排列、显示图标、禁用选项"可自行在此基础上实现 | ||
| Skeleton 骨架屏 | ℹ️ | TODO | |
| Steps 步骤条 | 暂不支持自定义样式、竖向步骤条 | ||
| Swipe 轮播 | ℹ️ | TODO | |
| Tag 标签 | ✅ | ||
| Avatar 头像 | ✅ | ||
| 导航组件 | ActionBar 动作栏 | 🚫 | |
| BackTop 回到顶部 | 🚫 | ||
| Grid 宫格 | 🚫 | ||
| IndexBar 索引栏 | ✅ | ||
| NavBar 导航栏 | ✅ | ||
| Pagination 分页 | ℹ️ | TODO | |
| Sidebar 侧边导航 | ℹ️ | TODO | |
| Tab 标签页 | ℹ️ | TODO | |
| Tabbar 标签栏 | ℹ️ | TODO | |
| TreeSelect 分类选择 | ℹ️ | TODO |
下载APK安装测试，点击这里下载APK
- 最新版本 ver =
2.0.25- 匹配版本 kotlin =
2.0.0
1 添加仓库
allprojects {
repositories {
...
maven { url 'https://raw.githubusercontent.com/D10NGYANG/maven-repo/main/repository' }
}
}2 添加依赖
dependencies {
implementation("com.github.D10NGYANG:DLJetpackComposeUtil:$ver")
// 可选：Lifecycle
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.0")
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.0")
// 可选：Coroutines
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.1")
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1")
// 可选：导航路由
implementation("io.github.raamcosta.compose-destinations:animations-core:1.10.2")
// 可选：时间工具
implementation("com.github.D10NGYANG:DLDateUtil:1.9.4")
coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")
// 必须：公共工具
implementation("com.github.D10NGYANG:DLCommonUtil:0.1.2")
}3 混淆
-keep class com.d10ng.compose.** {*;}
-dontwarn com.d10ng.compose.**4 代码演示
直接查看demo中app模块里代码/app/src/main/java/com/d10ng/compose/demo/pages/
5 颜色配置
根据Vant4的色彩规范，我们定义一套可修改变量；
object AppColor {
/**
* 主色
*/
object Main {
var primary = Color(0xFF1989FA)
}
/**
* 功能色
*/
object Func {
/**
* 文字链颜色
*/
var link = Color(0xFF576B95)
/**
* 成功色
*/
var success = Color(0xFF07C160)
/**
* 错误色
*/
var error = Color(0xFFEE0A24)
/**
* 通知消息中的文本颜色
*/
var notice = Color(0xFFED6A0C)
/**
* 通知消息中的背景颜色
*/
var noticeBg = Color(0xFFFFFBE8)
/**
* 文字辅助颜色
*/
var assist = Color(0xFFFAAB0C)
}
/**
* 中性色
*/
object Neutral {
/**
* 中性色 1 页面背景色
*/
var bg = Color(0xFFF7F8FA)
/**
* 中性色 2 item card 背景色
*/
var card = Color(0xFFF2F3F5)
/**
* 中性色 3 边框、线色
*/
var line = Color(0xFFEBEDF0)
/**
* 中性色 4 边框、线色
*/
var border = Color(0xFFDCDEF0)
/**
* 中性色 5 文字色，disable、提示文本等
*/
var hint = Color(0xFFC8C9CC)
/**
* 中性色 6 文字色，辅助、说明文本
*/
var tips = Color(0xFF969799)
/**
* 中性色 7 主要文本2
*/
var body = Color(0xFF646566)
/**
* 中性色 8 主要文本1
*/
var title = Color(0xFF323233)
}
}如果您有自定义颜色的需求，只需要执行如下代码即可：
AppColor.Main.primary = Color(0xFF1989FA)欢迎提交issue，或者发送邮件到[email protected]进行沟通。