本章内容概要

[外链图片转存中...(img-atorR2UK-1734704109537)]

QRCode

用于显示单个二维码的组件。

参数

参数名参数类型必填参数描述
valuestring是二维码内容字符串。最大支持256个字符，若超出，则截取前256个字符。
说明：
该字符串内容确保有效，不支持null、undefined以及空内容。

属性

名称参数类型描述
colorResourceColor设置二维码颜色。
默认值：Color.Black
从API version 9开始，该接口支持在ArkTS卡片中使用。
backgroundColorResourceColor设置二维码背景颜色。
默认值：Color.White
从API version 9开始，该接口支持在ArkTS卡片中使用。

ResourceColor ：颜色类型，用于描述资源颜色类型。

类型说明
Color颜色枚举值。
numberHEX格式颜色，支持rgb。示例：0xffffff。
stringrgb或者rgba格式颜色。示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。
Resource使用引入资源的方式，引入系统资源或者应用资源中的颜色。

案例讲解

案例中我们采用三种模式进行演练 

  1. 默认的情况下 二维码的展示，扫码展示的事英文字母
  2. 单独设置Color 情况下二维码的展示，微信扫码之后不展示内容， 因为设置的是中文，但是使用harmonyos 系统自带的扫码工具是可以识别的
  3. 单独设置背景颜色时， 二维码的展示 ， 自动跳转url

代码如下所示 ：

@Entry
@Component
struct QRCodeNote {
  @State message: string = 'Ruo Cheng'
  @State url:string ='https://blog.csdn.net/qq_33681891?type=blog'
@State zhWord:string='若城'

  build() {
    Row() {
      Column() {
        Column({space:10}){
          Text('不进行任何设置').fontSize(20).width('100%')
          QRCode(this.message).width(200).height(200)

          Text('设置Color').fontSize(20).width('100%')
          QRCode(this.zhWord).color('#f00').width(200).height(200)

          Text('设置backgroundColor').fontSize(20).width('100%')
          QRCode(this.url).backgroundColor('#0f0').width(200).height(200)
        }
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

效果展示

在这里插入图片描述

注意

中文情况下， 微信扫码之后不展示内容， 但是使用harmonyos 系统自带的扫码工具是可以识别的， 可以自动跳转url 地址 

Rating

提供在给定范围内选择评分的组件。

参数

参数名参数类型必填参数描述
ratingnumber是设置并接收评分值。
默认值：0
取值范围： [0, stars]
小于0取0，大于stars取最大值stars。
indicatorboolean否设置评分组件作为指示器使用，不可改变评分。
默认值：false, 可进行评分
说明：
indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。
indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。

属性

名称参数类型描述
starsnumber设置评分总数。
默认值：5
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
设置为小于0的值时，按默认值显示。
stepSizenumber操作评级的步长。
默认值：0.5
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
设置为小于0.1的值时，按默认值显示。
取值范围为[0.1, stars]。
starStyle{
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
}		backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。
foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。
secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
startStyle属性所支持的图片类型能力参考Image组件。
支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。
默认图片加载方式为异步，暂不支持同步加载。
设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。

案例展示

[外链图片转存中...(img-Je7d7TiY-1734704109537)]

代码展示

@Entry
    @Component
    struct RatingNote {

        build() {
            Row() {
                Column() {
                    List(){
                        ListItem(){
                            Column({space:20}){
                                Column({space:10}){
                                    Text('基本案例').fontSize(20)
                                    Rating()
                                }.alignItems(HorizontalAlign.Start).padding({ top:20 , left:20}).width('100%')

                                Column({space:10}){
                                    Text('自定义选择星星数量').fontSize(20)
                                    Rating({rating:3.5})
                                }.alignItems(HorizontalAlign.Start).padding({left:20}).width('100%')


                                Column({space:10}){
                                    Text('设置星星只读').fontSize(20)
                                    Rating({rating:4,indicator:true})
                                }.alignItems(HorizontalAlign.Start).padding({left:20}).width('100%')

                                Column({space:10}){
                                    Text('自定义星星大小').fontSize(20)
                                    Rating({rating:0}).height('90vp')
                                }.alignItems(HorizontalAlign.Start).padding({left:20}).width('100%')

                                Column({space:10}){
                                    Text('自定义选中星星颜色').fontSize(20)
                                    Rating({rating:3}).starStyle({
                                        backgroundUri:'/common/icon-star-default.png', // 未选中的星级的图片链接
                                        foregroundUri:'/common/icon-star.png', // 选中的星级的图片路径
                                        secondaryUri:'/common/icon-star-default.png' // 部分选中的星级的图片路径
                                    }).height('20vp')
                                }.alignItems(HorizontalAlign.Start).padding({left:20}).width('100%')

                                Column({space:10}){
                                    Text('自定义选中星星步长及个数').fontSize(20)
                                    Rating({rating:0}).stars(10).stepSize(2)
                                }.alignItems(HorizontalAlign.Start).padding({left:20}).width('100%')
                            }
                        }
                    }
                }
                .height('100%')
                    .width('100%')
            }
            .width('100%')
                .height('100%')
        }
    }

注意

在使用自定义的星星图片时， 图片等资源存放路径 是与pages 同级的目录， 且 **部分选中的星级 与选中的星级   **是叠加展示， 因此 案例中 **部分选中的星级 **使用的图片是 未选中的星级图片

QRCode组件的高级应用

除了基本的使用方法，QRCode组件在HarmonyOS Next中还支持一些高级应用，这些应用可以在复杂场景中发挥重要作用。

动态内容生成

QRCode组件允许开发者动态生成二维码内容。这意味着，你可以根据应用的状态或用户的行为来实时更新二维码，例如：

  • 在一个电子商务应用中，根据用户选择的商品动态生成带有商品详情的二维码，方便用户分享或扫码购买。
  • 在活动现场，根据时间或活动阶段生成不同的二维码，用于参与者签到或领取礼品。

    二维码美化

    QRCode组件还支持二维码的美化功能，允许开发者自定义二维码的颜色、图案甚至中间的Logo，以下是一些高级应用的注意事项：
  • 确保在美化二维码时，二维码的可读性不受影响。
  • 使用合适的颜色对比度，以便在各种背景下都能被扫描设备正确识别。

    代码示例

    以下是一个动态生成并美化二维码的代码示例：
    ```typescript
    @Entry
    @Component
    struct DynamicQRCode {
    private qrContent: string = "初始内容"
    private qrColor: string = "#000000"
    private qrBackgroundColor: string = "#FFFFFF"
    build() {
      Column() {
      Button("生成二维码")
          .onClick(() => {
              this.qrContent = "新的内容 " + new Date().toISOString();
          })
      QRCode({
          value: this.qrContent,
          foregroundColor: this.qrColor,
          backgroundColor: this.qrBackgroundColor,
          logo: "/common/logo.png"
      }).width('200vp').height('200vp')
  }
  .width('100%')
  .height('100%')
    }
    }
    Rating组件的交互设计
    Rating组件的交互设计对于提升用户体验至关重要。以下是一些设计建议：
    反馈机制
    当用户进行评分时，提供即时反馈，如动画效果或声音提示，以增强用户的互动感。
    显示用户的评分结果，让用户知道他们的选择已被记录。
    易用性
    确保Rating组件的大小适中，方便用户操作，特别是在移动设备上。
    对于视力不佳的用户，提供语音反馈或大字体显示。
    代码示例
    以下是一个带有反馈机制的Rating组件代码示例：
    @Entry
    @Component
    struct InteractiveRating {
    private ratingValue: number = 0
    build() {
      Column() {
      Text("请评分：")
      Rating({
          rating: this.ratingValue,
          onChange: (value) => {
              this.ratingValue = value;
              // 提供反馈，例如显示评分结果
              prompt.showToast({
                  message: `您已评分：${value}星`,
                  duration: 2000
              });
          }
      }).height('50vp')
  }
  .width('100%')
  .height('100%')
    }
    }
    通过这些高级应用和设计建议，开发者可以更全面地利用HarmonyOS Next的QRCode和Rating组件，创造出更加丰富和用户友好的应用界面。记住，细节决定成败，因此在实现这些功能时，务必注重用户体验的每一个环节。

进一步探索HarmonyOS Next的QRCode和Rating组件

在前面的内容中，我们已经探讨了QRCode和Rating组件的基本和高级应用。接下来，我们将进一步 ，提供更多细节和深入的实践指导。

QRCode组件的深度应用

动态内容与场景适配

场景化应用

  • 教育领域：利用QRCode组件为学生提供互动式学习材料，二维码内容可以是视频、音频或额外的阅读材料。
  • 旅游行业：在景点门票或导览图上嵌入QRCode，为游客提供详细的景点介绍和语音导览。

内容更新策略

  • 讨论如何制定高效的内容更新策略，确保二维码内容始终与用户需求同步。

二维码错误纠正

  • 介绍QRCode组件如何通过内置的错误纠正机制，保证二维码在部分损坏的情况下仍能被正确扫描。

Rating组件的精细化设计

用户交互反馈

动画与声音效果

  • 展示如何为Rating组件添加动画效果，以及如何选择合适的音效来增强用户的评分体验。

评分结果的展示

  • 讨论不同的评分结果展示方式，例如使用图表或文字反馈，以及如何根据应用类型选择最合适的方法。

无障碍设计

  • 详细说明如何使Rating组件符合无障碍设计标准，确保所有用户都能轻松使用。

代码优化

  • 提供代码优化的建议，包括如何减少组件的渲染时间以及如何提高代码的可维护性。

完整示例：集成QRCode和Rating组件的应用

以下是一个集成QRCode和Rating组件的完整应用示例，展示了如何在同一个界面中同时使用这两个组件。

@Entry
@Component
struct IntegratedApp {
    private qrContent: string = "欢迎扫描"
    private ratingValue: number = 0

    build() {
        Column() {
            // QRCode展示区域
            Text("扫描以下二维码获取更多信息：")
            QRCode({
                value: this.qrContent,
                foregroundColor: "#00FF00",
                backgroundColor: "#FFFFFF",
                logo: "/common/logo.png"
            }).width('200vp').height('200vp')

            // Rating组件区域
            Text("请为我们的服务评分：")
            Rating({
                rating: this.ratingValue,
                onChange: (value) => {
                    this.ratingValue = value;
                    // 显示评分结果
                    prompt.showToast({
                        message: `感谢您的评分：${value}星`,
                        duration: 2000
                    });
                }
            }).height('50vp')
        }
        .width('100%')
        .height('100%')
    }
}
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

＜HarmonyOS TechTalk 30＞一镜到底、智能填充、悬停适配开发实践

avatar HarmonyOS开发者社区
cover

＜ 鸿蒙生态学堂 线上培训 第11期 ＞ 最佳实践：HarmonyOS应用代码资产保护

avatar HarmonyOS开发者社区
cover

＜ HarmonyOS TechTalk 32 ＞ 全场景协同开发实践

avatar HarmonyOS开发者社区