Compose UI 组件封装——水平/垂直、虚线/实现的使用(一)

207 阅读3分钟

前言

项目地址:github.com/Peakmain/Co…

How To

  • Step 1. Add the JitPack repository to your build file

gradle

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

gradle.kts

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    mavenCentral()
    maven { url = uri("https://jitpack.io") }
  }
}
  • Step 2. Add the dependency
dependencies {
    implementation("com.github.Peakmain:ComposeUI:+")
}

1. 展示组件

1.1. 分割线

1.1.1. PkDivider分割线

1.1.1.1. 介绍
  • 支持设置水平/垂直 虚线或实线分割线
  • PkDashDivider(虚线)和 PkFullDivider(实线)整合类

1.1.1.2. 导入依赖
import com.peakmain.compose.ui.divier.PkDivider
1.1.1.3. 参数
参数名参数类型说明
modifierModifier用于添加额外修饰符的 Modifier。
colorColor分隔线的颜色,默认为 0xFFF1EFE9。
heightDp分隔线的高度,仅在垂直分隔线生效,默认为 28.dp。
thicknessDp分隔线的厚度,仅在非虚线时生效,默认为 1.dp。
startIndentDp分隔线的起始缩进,仅在非虚线时生效,默认为 0.dp。
isHorizontalBoolean是否为水平分隔线,默认为 false。
isDashBoolean是否绘制虚线分隔线,默认为 false。
strokeWidthDp虚线的宽度,仅在绘制虚线时生效,默认为 0.5.dp。
dashLengthDp虚线的线段长度,仅在绘制虚线时生效,默认为 2.dp。
gapLengthDp虚线的间隔长度,仅在绘制虚线时生效,默认为 2.dp。
1.1.1.4. 示例代码
//默认垂直实线
PkDivider()
//水平实线
PkDivider(modifier = Modifier.padding(top = 10.dp), isHorizontal = true)
//垂直虚线
PkDivider(isDash=true)
//水平虚线
PkDivider(modifier = Modifier.padding(top = 10.dp), isHorizontal = true, isDash = true)

1.1.2. PkFullDivider实线分割线

1.1.2.1. 介绍
  • 创建一个水平/垂直实线分隔线组件
1.1.2.2. 导入依赖
import com.peakmain.compose.ui.divier.PkFullDivider
1.1.2.3. 参数
参数名参数类型说明
modifierModifier用于添加额外修饰符的 Modifier。
colorColor分隔线的颜色,默认为 0xFFF1EFE9。
heightDp分隔线的高度,垂直方向生效默认为 28.dp。
thicknessDp分隔线的厚度,默认为 1.dp。
startIndentDp分隔线的起始缩进,默认为 0.dp。
isHorizontalBoolean水平分割线 (true)/ 垂直分割线 (false),默认是 false
1.1.2.4. 示例代码
PkFullDivider(modifier = Modifier.padding(top = 10.dp), isHorizontal = true)

1.1.3. PkDashDivider虚线分割线

1.1.3.1. 介绍
  • 创建一个水平/垂直虚线分隔线组件
1.1.3.2. 导入依赖
import com.peakmain.compose.ui.divier.PkDashDivider
1.1.3.3. 参数
参数名参数类型说明
modifierModifier用于添加额外修饰符的 Modifier。
colorColor分隔线的颜色,默认为 0xFFF1EFE9。
heightDp分隔线的高度,垂直方向生效,默认为 28.dp。
strokeWidthDp虚线的宽度,默认为 0.5.dp。
dashLengthDp虚线的长度,默认为 2.dp。
gapLengthDp虚线之间的间隔长度,默认为 2.dp。
isHorizontalBoolean水平分割线 (true)/ 垂直分割线 (false),默认是 false
1.1.3.4. 示例代码
 PkDashDivider(modifier = Modifier.padding(top = 10.dp), isHorizontal = true)

2. 扩展类

2.1. List扩展类

2.1.1. 介绍

可空List的扩展类,作用如下

  • 可空List的大小
  • 可空List的大小是否大于0
  • 可空List大小是否为0

2.1.2. 导入依赖

import com.peakmain.compose.ext.orSize

2.1.3. 方法

方法名返回值说明
orSizeInt获取 List 的大小。若 List 为 null,则返回 0;若 List 不为 null,则返回其 size。
sizeBigZeroBoolean判断 List 大小是否大于 0。若 List 为 null,则返回 false;若 List 不为 null,则判断其大小是否大于 0。
sizeEqualZeroBoolean判断 List 的大小是否为 0。若 List 为 null,则返回 true;若 List 不为 null,则判断其大小是否等于 0。

2.1.4. 示例代码

params?.imageList.orSize() > 0
params?.imageList.sizeBigZero()

3. 工具类

3.1. ImagePainterUtils工具类

3.1.1. 介绍

  • 根据图片 URL 获取 AsyncImagePainter 对象

3.1.2. 导入依赖

import com.peakmain.compose.utils.ImagePainterUtils

3.1.3. 参数

参数名参数类型说明
imageUrlString图片的 URL,如果为空则显示占位图。
errorDrawableResIdInt图片加载失败时显示的 Drawable 资源 ID,默认为 R.drawable.icon_loading。
placeDrawableResIdInt图片加载过程中显示的占位图 Drawable 资源 ID,默认为 R.drawable.icon_loading。

3.1.4. 示例代码

Image(
    painter = ImagePainterUtils.getPainter(it.imageUrl),
    contentDescription = null,
    modifier = Modifier
        .clip(RoundedCornerShape(8.dp))
        .weight(1f)
        .height(75.dp),
    contentScale = ContentScale.Crop
)