跃迁引擎

空気を読んだ雨降らないでよ

iOS Research & Development

• 于 , 阅读

HarmonyOS - 鸿蒙通用 UI 组件设计与使用

按钮 - YCUIButton

UI 设计规范

img

img

如何使用

本地引入依赖

在使用方的 oh-package.json5 文件中添加如下代码依赖

1
2
3
"dependencies": {
  "@ohos/uikit": "file:../uikit"
}

Import 导入

导入所需的库内容，在使用的 .ets 文件内添加如下代码内容

1
2
3
4
5
6
7
8
9
import {
  YCUIButton,
  YCUIButtonConfig,
  YCUIButtonArrowType,
  YCUIButtonBackgroundType,
  YCUIButtonColorType,
  YCUIButtonConfigSizeType,
  YCUIButtonCornerType
} from '@ohos/uikit'

基础使用代码示例

这里演示了基本使用方法，以及点击后按钮的动态修改效果：初始黄色样式按钮，点击后变为红色样式，文案跟随改变，如此循环往复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@Entry
@Component
struct Index {
  /// 声明一个配置文件
  @State buttonConfig: YCUIButtonConfig = new YCUIButtonConfig()

  aboutToAppear(): void {
    /// 在 aboutToAppear 中，配置基础项，配置文件包含默认项（参考UI设计规范），只需配置非默认项内容
    this.buttonConfig.sizeType = YCUIButtonConfigSizeType.HUGE
    this.buttonConfig.backgroundType = YCUIButtonBackgroundType.SHADING
    this.buttonConfig.arrowType = YCUIButtonArrowType.RIGHT_ARROW
    this.buttonConfig.title = '短笛大魔王'
  }

  build() {
    Row() {
      /// 传入标题、配置文件，点击回调可选，其余用法与常规系统通用控件相同
      YCUIButton({config: this.buttonConfig, onTapClicked: () => {
          console.debug('点击了' + this.buttonConfig.title)
          if (this.buttonConfig.title == '短笛大魔王') {
            this.buttonConfig.colorType = YCUIButtonColorType.RED
            this.buttonConfig.title = '悟天克斯'
          } else {
            this.buttonConfig.colorType = YCUIButtonColorType.YELLOW
            this.buttonConfig.title = '短笛大魔王'
          }
          console.debug('buttonConfig.colorType =' + this.buttonConfig.colorType)
        }
        })
      .height(45)
      .margin(120)
  }
}
运行效果

点击前

img

点击后

img

代码解释

首先我们需要声明一个配置文件 YCUIButtonConfig，配置文件的内容决定了 YCUIButton 的展示样式。同时我们可以随时修改配置文件，YCUIButton 会自动根据配置文件的内容进行样式修改和更新。

1
2
/// 声明一个配置文件
  @State buttonConfig: YCUIButtonConfig = new YCUIButtonConfig()

其次，我们需要在页面声明周期开始时，也就是 aboutToAppear 阶段对配置内容进行初始化，下面的示例我们只修改了 sizeType、backgroundType和arrowType 三项配置，其余均采用 UI 组件设计规范中默认的样式。

1
2
3
4
5
6
7
aboutToAppear(): void {
  /// 在 aboutToAppear 中，配置基础项，配置文件包含默认项（参考UI设计规范），只需配置非默认项内容
  this.buttonConfig.sizeType = YCUIButtonConfigSizeType.HUGE
  this.buttonConfig.backgroundType = YCUIButtonBackgroundType.SHADING
  this.buttonConfig.arrowType = YCUIButtonArrowType.RIGHT_ARROW
  this.buttonConfig.title = '短笛大魔王'
}

最后，我们在 build 中构建我们的 YCUIButton ，用法与系统 Button 基本一致。

只需要传入一个title 和我们此前声明的 YCUIButtonConfig 即可，同时提供了可选的单机回调onTapClicked 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
build() {
  Row() {
    YCUIButton({config: this.buttonConfig, onTapClicked: () => {
          console.debug('点击了' + this.buttonConfig.title)
          if (this.buttonConfig.title == '短笛大魔王') {
            this.buttonConfig.colorType = YCUIButtonColorType.RED
            this.buttonConfig.title = '悟天克斯'
          } else {
            this.buttonConfig.colorType = YCUIButtonColorType.YELLOW
            this.buttonConfig.title = '短笛大魔王'
          }
          console.debug('buttonConfig.colorType =' + this.buttonConfig.colorType)
        }
        })
      .height(45)
      .margin(120)
  }
}

自定义按钮颜色

某些需求可能要求使用超出组件 UI 设计规范（MasterGo - UI 组件规范设计稿）的色值，此时需要对色值进行自定义

1
2
3
4
5
6
7
8
9
aboutToAppear(): void {
  /// 需要将colorType标记为CUSTOM，这会致使预设样式失效    
  this.buttonConfig.colorType = YCUIButtonColorType.CUSTOM
  /// 处理需要自定义的颜色部分，接受ResourceColor值对象，不需要特殊设置的无需更改，其默认值为透明色
  this.buttonConfig.customBGColor = '#393548'
  this.buttonConfig.customFontColor = '#FFFFFF'
  this.buttonConfig.customBorderColor = Color.Red
  this.buttonConfig.title = '自定义按钮'
}

API

配置文件 (YCUIButtonConfig)
配置参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 按钮标题
title: string = ''
// 按钮尺寸类型，默认为MIDDLE（中等尺寸）
sizeType: YCUIButtonConfigSizeType = YCUIButtonConfigSizeType.MIDDLE
// 按钮圆角类型，默认为RADIUS_HALF（半径为一半）
cornerType: YCUIButtonCornerType = YCUIButtonCornerType.RADIUS_HALF
// 按钮背景类型，默认为PURE（纯色背景）
backgroundType: YCUIButtonBackgroundType = YCUIButtonBackgroundType.PURE
// 按钮箭头类型，默认为NONE（无箭头）
arrowType: YCUIButtonArrowType = YCUIButtonArrowType.NONE
// 按钮颜色类型，默认为YELLOW（黄色）
colorType: YCUIButtonColorType = YCUIButtonColorType.YELLOW
// 自定义按钮背景颜色，默认为透明
customBGColor: ResourceColor = Color.Transparent
// 自定义按钮字体颜色，默认为透明
customFontColor: ResourceColor = Color.Transparent
// 自定义按钮边框颜色，默认为透明
customBorderColor: ResourceColor = Color.Transparent
按钮尺寸类型
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 按钮尺寸类型。
 */
export enum YCUIButtonConfigSizeType {
  /// 超大，字体阿里巴巴普惠2.0 105 Heavy，手机字号18（平板 24)
  HUGE = 3,
  /// 大，字体苹方简，手机字16（平板 22）
  LARGE = 1,
  /// 中，字体苹方简体，手机字14（平板 20），默认
  MIDDLE = 0,
  /// 小，字体苹方简体，手机字12（平板 18）
  SMALL = 2
}
按钮圆角类型
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 按钮圆角类型。
 */
export enum YCUIButtonCornerType {
  /// 固定圆角 4
  RADIUS4 = 1,
  /// 固定圆角高度1/2，默认
  RADIUS_HALF = 0,
  /// 固定圆角高度一半加描边 1.5
  RADIUS_HALF_BORDER_BOLD = 2,
  /// 固定圆角高度一半加描边 1
  RADIUS_HALF_BORDER_REGULAR = 3
}
按钮背景类型
1
2
3
4
5
6
7
8
9
/**
 * 按钮背景类型。
 */
export enum YCUIButtonBackgroundType {
  /// 纯色背景，默认
  PURE = 0,
  /// 底纹背景
  SHADING = 1
}
按钮箭头类型
1
2
3
4
5
6
7
8
9
/**
 * 按钮箭头类型。
 */
export enum YCUIButtonArrowType {
  /// 无箭头，默认
  NONE = 0,
  /// 右侧箭头
  RIGHT_ARROW = 1
}
按钮颜色类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 按钮颜色类型。
 */
export enum YCUIButtonColorType {
  /// 黄色，默认
  YELLOW = 0,
  /// 蓝色，功能按钮
  BLUE = 1,
  /// 红色，运营/活动
  RED = 2,
  /// 白色，二级按钮（弱于黄色）
  WHITE = 3,
  /// 深色，二级按钮（弱于黄色）
  DARK = 4,
  /// 灰色，不可点击
  GRAY = 5,
  /// 白底红字，退出等按钮使用
  WHITE_RED = 6,
  /// 自定义颜色，选择该类型将全部交由外部处理按钮的样式
  CUSTOM = 7
}
按钮 (YCUIButton)
点击回调
1
2
3
4
/**
 * 按钮点击事件，当按钮被点击时触发。
 */
public onTapClicked?: () => void

加载 HUD - YCUILoading

使用非常简单，包含了 loading、success、error、info、progress 等样式效果

注意事项：受第三方库限制，使用时需要将 lottie 的 json文件放入 lottie 文件夹并加入到 scr/main/ets 路径下与 pages 文件夹同级别的目录中，否则无法识别 lottie 资源文件

如何使用

本地引入依赖

在使用方的 oh-package.json5 文件中添加如下代码依赖

1
2
3
"dependencies": {
  "@ohos/uikit": "file:../uikit"
}

Import 导入

导入所需的库内容，在使用的 .ets 文件内添加如下代码内容

1
2
3
import {
  YCUILoading
} from '@ohos/uikit'

Loading

1
2
3
4
5
6
7
8
9
/// 无文案展示
YCUILoading.showLoading()
/// 有文案展示，上图下文，可以是一个字符串或 LoadingSettings 对象
YCUILoading.showLoading('正在努力加载')
/// 隐藏
YCUILoading.hide()

/// 默认展示在windows层，需要局部展示传入showInSubWindow变量参数即可，如：
YCUILoading.showLoading('正在努力加载'， true)

Toast

1
2
3
4
5
6
7
8
9
10
/// 成功样式，可以是一个字符串或 LoadingSettings 对象
YCUILoading.showSuccess('充值成功')
/// 失败样式，可以是一个字符串或 LoadingSettings 对象
YCUILoading.showFailure('点赞失败，请检查网络')

/// 长文信息展示，可以是一个字符串或 LoadingSettings 对象
YCUILoading.showInfo('你指尖跳动的电光，是我永恒不变的信仰。\n 唯我超电磁炮永世长存。！\n\n あなたの指先の跃动する电光は、私の一生変わらない信仰である')

/// 默认展示在windows层，需要局部展示传入showInSubWindow变量参数即可，如：
YCUILoading.showSuccess('充值成功', true)

Progress

1
2
3
4
5
/// 进度展示，可以是一个字符串或 LoadingSettings 对象
YCUILoading.showProgress('正在下载中...')

/// 默认展示在windows层，需要局部展示传入showInSubWindow变量参数即可，如：
YCUILoading.showProgress('正在下载中...', true)

LoadingSettings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
export interface LoadingSettings {
  /**
   * 消息文本，默认为空字符串
   */
  msg?: string
  /**
   * 对齐方式，默认为居中
   */
  alignment?: DialogAlignment
  /**
   * 偏移量，默认为（0，0）
   */
  offset?: Offset
  /**
   * 色调颜色，应用于加载进度、图像，默认为白色
   */
  tintColor?: ResourceColor
  /**
   * 文本颜色，默认为白色
   */
  textColor?: ResourceColor
  /**
   * 隐藏延迟，默认为2000毫秒
   */
  hideDelay?: number
  /**
   * 字体大小，默认为16fp
   */
  fontSize?: number | string | Resource
  /**
   * 背景颜色，默认为#cc000000
   */
  backgroundColor?: ResourceColor
  /**
   * 遮罩颜色，默认为透明
   */
  maskColor?: ResourceColor
  /**
   * 边框圆角，默认为10
   */
  borderRadius?: Length | BorderRadiuses
  /**
   * 成功图像，最好是SVG格式
   */
  successSrc?: PixelMap | ResourceStr | DrawableDescriptor
  /**
   * 失败图像，最好是SVG格式
   */
  failureSrc?: PixelMap | ResourceStr | DrawableDescriptor
}

导航栏 - YCUINavigationBar

本地引入依赖

在使用方的 oh-package.json5 文件中添加如下代码依赖

1
2
3
"dependencies": {
  "@ohos/uikit": "file:../uikit"
}

Import 导入

导入所需的库内容，在使用的 .ets 文件内添加如下代码内容

1
2
3
4
import {
  YCUINavigationBar，
  YCUINavigationBarConfig
} from '@ohos/uikit'

基础使用代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@Entry
@Component
struct UIKitPage {

  /// 声明一个导航栏配置文件
  @State navigationConfig: YCUINavigationBarConfig = new YCUINavigationBarConfig()

  aboutToAppear(): void {
    /// 在 aboutToAppear 中，配置基础项，配置文件包含默认项（参考UI设计规范），只需配置非默认项内容
   
    /// - Note: 导航栏配置
    this.navigationConfig.title = '导航栏标题'
    /// - Note: 是否显示导航栏底部下划线
    this.navigationConfig.underlineVisibility = Visibility.Visible
    /// - Note: 是否显示导航栏右侧跳过按钮
    this.navigationConfig.jumpButtonVisibility = Visibility.Visible
  }

  onPageShow(): void {
    /// - Note: 全屏铺开
    YCScreenUtils.setWindowLayoutFullScreen(true)
  }

  /// 构建导航栏
  @Builder navigationBar() {
    YCUINavigationBar({
      config: this.navigationConfig,
      onBackClicked: () => {
        console.debug('点击了返回')
      },
      onRightClicked: () => {
        console.debug('点击了右侧按钮')
      }
    })
      .width('100%')
      .height('100vp')
      .position({x: 0, y: 0})
      .backgroundColor(Color.White)
  }

  build() {
    Column() {
      /// - Note: 导航栏
      this.navigationBar()
    }
    .width('100%')
    .height('100%')
  }
}
运行效果

img

代码解释

首先我们需要声明一个配置文件 YCUINavigationBarConfig，配置文件的内容决定了 YCUINavigationBar 的展示样式。同时我们可以随时修改配置文件，YCUINavigationBar 会自动根据配置文件的内容进行样式修改和更新。

1
2
/// 声明一个导航栏配置文件
@State navigationConfig: YCUINavigationBarConfig = new YCUINavigationBarConfig()

其次，我们需要在页面声明周期开始时，也就是 aboutToAppear 阶段对配置内容进行初始化，下面的示例我们只修改了 title、underlineVisibility和jumpButtonVisibility 三项配置，其余均采用 UI 组件设计规范中默认的样式。

1
2
3
4
5
6
7
8
9
aboutToAppear(): void {
  /// 在 aboutToAppear 中，配置基础项，配置文件包含默认项（参考UI设计规范），只需配置非默认项内容
  /// - Note: 导航栏配置
    this.navigationConfig.title = '导航栏标题'
    /// - Note: 是否显示导航栏底部下划线
    this.navigationConfig.underlineVisibility = Visibility.Visible
    /// - Note: 是否显示导航栏右侧跳过按钮
    this.navigationConfig.jumpButtonVisibility = Visibility.Visible
}

最后，我们在 build 中构建我们的 YCUINavigationBar ，用法与系统 Button 基本一致。

只需要传入一个title 和我们此前声明的 YCUINavigationBarConfig 即可，同时提供了可选的单击回调onBackClicked 和 onRightClicked 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Builder navigationBar() {
    YCUINavigationBar({
      config: this.navigationConfig,
      /// - Note: 返回按钮回调
      onBackClicked: () => {
        console.debug('点击了返回')
      },
      /// - Note: 右侧按钮回调
      onRightClicked: () => {
        console.debug('点击了右侧按钮')
      }
    })
      .width('100%')
      .height('100vp')
      .position({x: 0, y: 0})
      .backgroundColor(Color.White)
  }

API

配置文件 (YCUINavigationBarConfig)
配置参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/// 导航栏标题
title: string = ''
/// 导航栏返回按钮样式
backType: YCUINavigationBarBackType = YCUINavigationBarBackType.GREY_BACK
/// 导航栏下划线是否可见
underlineVisibility: Visibility = Visibility.Hidden
/// 导航栏跳过按钮是否可见(⚠️ shareButtonVisibility 和 customerButtonVisibility 将会失效)
jumpButtonVisibility: Visibility = Visibility.Hidden
/// 导航栏分享按钮是否可见(⚠️ jumpButtonVisibility 和 customerButtonVisibility 将会失效)
shareButtonVisibility: Visibility = Visibility.Hidden
/// 导航栏客服按钮是否可见(⚠️ jumpButtonVisibility 和 shareButtonVisibility 将会失效)
customerButtonVisibility: Visibility = Visibility.Hidden

export enum YCUINavigationBarBackType {
  GREY_BACK = 0, // 灰色背景的返回按钮
  LIGHT_BACK = 1, // 轻量级背景的返回按钮
  CLOSE_BACK = 2 // 关闭图标形式的返回按钮
}
导航栏(YCUINavigationBar)
点击回调
1
2
3
4
/// 导航栏返回按钮点击回调
public onBackClicked?: () => void
/// 导航栏右侧按钮点击回调
public onRightClicked?: () => void

弹窗 - YCUIAlert

本地引入依赖

在使用方的 oh-package.json5 文件中添加如下代码依赖

1
2
3
"dependencies": {
  "@ohos/uikit": "file:../uikit"
}

Import 导入

导入所需的库内容，在使用的 .ets 文件内添加如下代码内容

1
2
3
4
import {
  YCUIAlert,
  YCUIAlertConfig
} from '@ohos/uikit'

基础使用代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@Entry
@Component
struct UIKitPage {
  /// 声明一个alert配置文件
  alertConfig: YCUIAlertConfig = new YCUIAlertConfig()

  aboutToAppear(): void {
    /// 在 aboutToAppear 中，配置基础项，配置文件包含默认项（参考UI设计规范），只需配置非默认项内容
    
    /// - Note: 弹窗导航栏标题
    this.alertConfig.navigationBarTitle = '支付结果确认'
    /// - Note: 是否使用弹窗导航栏底纹图片
    this.alertConfig.useNavigationShading = true
    /// - Note: 弹窗尺寸
    this.alertConfig.size = { width: 350, height: 212 }
    /// - Note: 设置弹窗样式
    this.alertConfig.style = YCUIAlertStyle.ALERT
    /// - Note: 默认样式设置
    this.alertConfig.defaultStyle.textContent = '你指尖跃动的电光，是我永恒不变的信仰，唯我超电磁炮永世长存！'
    this.alertConfig.defaultStyle.confirmButtonTitle = '电磁炮发射'
    this.alertConfig.defaultStyle.confirmButtonTitle = '取消发射'
  }

  /// 构建导航栏
  @Builder navigationBar() {
    YCUINavigationBar({
      config: this.navigationConfig,
      onBackClicked: () => {
        console.debug('点击了返回')
      },
      onRightClicked: () => {
        console.debug('点击了右侧按钮')
      }
    })
      .width('100%')
      .height('100vp')
      .position({x: 0, y: 0})
      .backgroundColor(Color.White)
  }

  /// 构建按钮
  @Builder button() {
    /// 传入标题、配置文件，点击回调可选，其余用法与常规系统通用控件相同
    YCUIButton({
      title: this.buttonTitle,
      config: this.buttonConfig,
      onTapClicked: () => {
          /// - Note: 设置弹窗配置
          YCUIAlert.setConfig(this.alertConfig, () => {
            /// - Note: 弹窗消失回调
            console.debug('弹窗已消失')
          })
          /// - Note: 设置弹窗空白区域的视图内容
          YCUIAlert.setBlankContentArea(() => {this.alertContentView()})
          /// - Note: 弹窗展示
          YCUIAlert.show()
      }
    })
      .offset({x: 0, y: -200})
      .height(45)
      .margin(120)
  }

  /// 构建弹窗空白区域内容
  @Builder alertContentView() {
    Stack(){
      Button('点击')
        .width(30)
        .height(30)
        .onClick(() => {
          /// 弹窗消失
          YCUIAlert.dismiss()
        })
    }
    .backgroundColor(Color.Red)
    .margin({top: 100})
    .width(50)
    .height(50)
    .borderRadius(25)
  }

  build() {
    Column() {
      Stack() {
        /// - Note: 按钮
        this.button()
      }
      .alignContent(Alignment.Center)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
运行效果

img

代码解释

首先我们需要声明一个配置文件 YCUIAlertConfig，配置文件的内容决定了 YCUIAlert 的展示样式。注意：弹窗属于一次性样式，不支持配置文件的动态更新！

1
2
/// 声明一个alert配置文件
  alertConfig: YCUIAlertConfig = new YCUIAlertConfig()

其次，我们需要在页面声明周期开始时，也就是 aboutToAppear 阶段对配置内容进行初始化，下面的示例我们只修改了navigationBarTitle、useNavigationShading、size 、style四项配置，其余均采用 UI 组件设计规范中默认的样式，如果需要使用默认样式，请设置defaultStyle 。

1
2
3
4
5
6
7
8
9
10
11
12
/// - Note: 弹窗导航栏标题
    this.alertConfig.navigationBarTitle = '支付结果确认'
    /// - Note: 是否使用弹窗导航栏底纹图片
    this.alertConfig.useNavigationShading = true
    /// - Note: 弹窗尺寸
    this.alertConfig.size = { width: 350, height: 212 }
    /// - Note: 设置弹窗样式
    this.alertConfig.style = YCUIAlertStyle.ALERT
    /// - Note: 默认样式设置（需要时再配置，提供一个默认样式模板，包含一个内容和取消、确定按钮）
    this.alertConfig.defaultStyle.textContent = '你指尖跃动的电光，是我永恒不变的信仰，唯我超电磁炮永世长存！'
    this.alertConfig.defaultStyle.confirmButtonTitle = '电磁炮发射'
    this.alertConfig.defaultStyle.confirmButtonTitle = '取消发射'

最后，我们在 build 中构建我们的 YCUIAlet ，用法非常简单。

  1. 只需要将弹窗的配置文件传入即可，setConfig 的第一个参数为配置文件，第二个参数为弹窗消失时的回调，在开启蒙版点击的状态下，点击右上角关闭按钮和点击蒙版均会触发此回调，换句话说，只要弹窗消失回调就会触发 。
  2. 需要给弹窗空白区域传入一个 @Builder 修饰好的视图，否则弹窗空白区域将没有内容。
  3. 调用 show()弹窗展示，调用dismiss弹窗消失。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/// - Note: 设置弹窗配置
YCUIAlert.setConfig(this.alertConfig, () => {
   /// - Note: 弹窗消失回调
   console.debug('弹窗已消失')
})
/// - Note: 设置弹窗空白区域的视图内容
YCUIAlert.setBlankContentArea(() => {this.alertContentView()})
/// - Note: 弹窗展示
YCUIAlert.show()

/// 构建弹窗空白区域内容
@Builder alertContentView() {
   ...
}

API

配置文件 (YCUIAlertConfig)
配置参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/// 弹窗样式，默认 alert
style: YCUIAlertStyle = YCUIAlertStyle.ALERT
/// 弹窗圆角，默认 {topLeft: 12, topRight: 12}
boardRadius: Length | BorderRadiuses = {topLeft: 12, topRight: 12}
/// 弹窗导航栏样式，默认常规
navigationBarType: YCUIAlertNavigationBarType = YCUIAlertNavigationBarType.NORMAL
/// 弹窗导航栏标题内容，无导航栏时不生效
navigationBarTitle: string = ''
/// 弹窗尺寸，居中展示
size: Size = { width: 0, height: 0 }
/// 弹窗 frame，默认不生效，设置之后 size 将失效，并以 frame 为主，建议只在特殊场景需要绝对布局时使用
frame: Rect = Rect.Zero()
/// 蒙层颜色，默认 70% 黑色
maskColor: ResourceColor = 'rgba(0,0,0,0.7)'
/// 使用导航栏底纹，默认开启
useNavigationShading: boolean = true
/// 使用自定义导航栏，默认关闭，开启该选项 title 设置的内容将失效
/// - Note: 自定义导航栏最大宽度不超过：弹窗容器总宽度减去右边距及关闭按钮宽度（含按钮左边距）之和
/// - Note: 当 useNavigationShading = true  时，自定义导航栏背景色将自动设置为透明
useCustomNavigation: boolean = false
/// 允许点击蒙层关闭弹窗
enableClickMaskAreaCloseAlertView: boolean = false
/// 弹窗是否显示在子窗口，默认展示在window层
showInSubWindow: boolean = false
/// 默认弹窗样式
defaultStyle: YCUIAlertDefaultStyle = new YCUIAlertDefaultStyle()

YCUIAlertDefaultStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/// sheet样式弹窗标题
sheetTitle: string = ''
/// sheet样式弹窗副标题 (标题右侧小标题)
sheetTipsTitle: string = ''
/// 弹窗文案内容
textContent: string = ''
/// 弹窗文案字体大小
textFontSize: number = 20
/// 弹窗按钮布局方向，默认水平方向，即左取消，右确认
buttonLayoutDirection: YCUIAlertDefaultStyleButtonLayoutDirection = YCUIAlertDefaultStyleButtonLayoutDirection.HORIZONTAL
/// 取消按钮文案
cancelButtonTitle: string = '取消'
/// 确认按钮文案
confirmButtonTitle: string = '确认'
/// 取消按钮点击回调
cancelClicked: () => void = () => {}
/// 确认按钮点击回调
confirmClicked: () => void = () => {}

无数据视图 - YCUINoDataView

本地引入依赖

在使用方的 oh-package.json5 文件中添加如下代码依赖

1
2
3
"dependencies": {
  "@ohos/uikit": "file:../uikit"
}

Import 导入

导入所需的库内容，在使用的 .ets 文件内添加如下代码内容

1
2
3
import {
  YCUINoDataView
} from '@ohos/uikit'

基础使用代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Entry
@Component
struct UIKitPage {
  /// 无数据提示
  @State noDataTips: string = '没有下载的学案'

  /// 无数据视图
  @Builder noDataView() {
    YCUINoDataView({tips: this.noDataTips})
      .width('100%')
      .height('100%')
  }

  build() {
    Column() {
      /// - Note: 无数据视图
      this.noDataView()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
运行效果

img

代码解释

只需要传入对应文案即可，如果需要根据业务需求动态切换展示文案，标记为 @State 即可。

1
2
/// 无数据提示
  @State noDataTips: string = '没有下载的学案'

注意：无数据视图当前只支持配置文案，不支持图片替换

最近的文章

iOS 端基于 NLP/CoreML + Vision 实现「图像文字识别&提取」

前言 阅读本文内容前，你可能需要了解的基础知识「端智能」基于自然语言处理 (NLP) 的光学字符识别 (OCR) 在最近的技术分享中，我们已经知道了实现「图像文字识别&提取」这个功能所需的基本技术方案和原理 ，这解决了我们实现这一功能当中 Why 和 What 的问题。但光知道 Why …

• 于 , , , , , 开始阅读
更早的文章

HarmonyOS - 应用程序包

1. 应用程序包概述1.1 应用与应用程序包用户应用程序泛指运行在设备的操作系统之上，为用户提供特定服务的程序，简称“应用”。一个应用所对应的软件包文件，称为“应用程序包”。 当前系统提供了应用程序包开发、安装、查询、更新、卸载的管理机制，便于开发者开发和管理应用。同时，系统还屏蔽了不同的芯片平 …

• 于 , , 开始阅读
comments powered by Disqus