参考 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 图片预览	⚠️	目前仅支持单张本地图片展示，拖拽效果需要进一步优化 发现做得更好的作品，jvziyaoyao/ImageViewer
	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

预览

demo运行

下载APK安装测试，点击这里下载APK

使用

• 最新版本 ver = 2.0.30
• 匹配版本 kotlin = 2.0.20

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.4")
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.4")

    // 可选：Coroutines
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.9.0-RC.2")
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0-RC.2")

    // 可选：导航路由
    implementation("io.github.raamcosta.compose-destinations:animations-core:1.10.2")

    // 可选：时间工具
    implementation("com.github.D10NGYANG:DLDateUtil:2.0.0")
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")
    // 必须：公共工具
    implementation("com.github.D10NGYANG:DLCommonUtil:0.5.1")
}

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]进行沟通。