3.11 QRCode组件 原创 精华

鸿蒙开发之南拳北腿
发布于 2022-7-6 13:11
浏览
1收藏

本节学习一个二维码展示组件QRCode。调用方式很简单,接口参数输入我们希望被读取的字符串内容即可,可通过color属性设置二维码的颜色(如果不设置颜色属性,则默认为黑色), 通用事件仅支持点击事件:

/**
 * 3.11 QRCode组件
 * 显示二维码信息。
 *
 * 接口:
 *  QRCode(value: string)
 *    value: string 二维码内容字符串。
 *
 * 属性:
 *  .color(Color) 默认值Black,设置二维码颜色。
 *
 * 事件:
 *  通用事件仅支持点击事件。
 */

本节教程演示的目标为:二维码上面嵌入头像,可通过Slider组件动态调节二维码的大小,可通过点击选择二维码的颜色,以及通过修改输入框的文字动态生成二维码。效果如下图所示:
3.11 QRCode组件-鸿蒙开发者社区

首先我们可定义几个变量:

struct QRCodeSample {
  private colors:Array<any> = [Color.Black, $r("app.color.emui1"), $r("app.color.emui2"), $r("app.color.emui3"), $r("app.color.emui4"), $r("app.color.emui5"), $r("app.color.emui6"), $r("app.color.emui7"), $r("app.color.emui8"), $r("app.color.emui9")]
  @State info:string = '鸿蒙开发之南拳北腿'
  @State color:any = Color.Black
  @State size:number = 150

其中变量info用于设置二维码的信息,变量color用于设置二维码的颜色属性,变量size用于设置二维码的大小。

为了能在二维码上放置头像,这里使用了Stack布局组件,关于Stack布局组件的用法将在下一章《第4章 布局组件》中展开讲解。头像尺寸不能太大,否则可能会影响扫码识别,可以设置为二维码尺寸的20%大小,居中叠加到二维码上。为了使二维码的边缘更完美,在Stack组件上设置了10vp的padding,背景色设置为白色,并设置了一个卡片圆角,代码如下:

        Stack(){
          QRCode(this.info) // 二维码内容字符串
            .color(this.color) // 设置二维码颜色
            .width(this.size).height(this.size)
          Image('/common/images/icon.png') // 在二维码上叠加一个头像
            .width(this.size * 0.2).height(this.size * 0.2)
            .border({width:2,color:Color.White})
            .borderRadius($r("app.float.radius_S"))
        }
        .padding(10)
        .backgroundColor(Color.White)
        .borderRadius($r("app.float.radiusCard"))

接下来,通过Slider组件、Gird组件和文本输入组件设置二维码的大小、颜色和内容字符串。由于变量是通过@State声明的,所以,当变量值更改时,会实时刷新二维码效果。

先看调节大小的Slider组件,允许二维码大小范围为100vp-280vp,代码如下:

        Row(){
          TextBody1({text: '大小'})
          Slider({
            value: this.size,
            min: 100,
            max: 280,
          })
          .blockColor($r("app.color.info"))
          .trackColor($r("app.color.controlBg"))
          .selectedColor($r("app.color.info"))
          .onChange((value: number, mode: SliderChangeMode) => {
            this.size = value // 控制二维码大小
          })
        }.width('85%')

效果如下:

3.11 QRCode组件-鸿蒙开发者社区

设置十种可选颜色,点击不同色块,可更改二维码的颜色,代码如下:

        Row(){
          Row(){
            TextBody1({text: '颜色'})
          }.width(60).padding({left: $r("app.float.space_S")})
          Blank()
          Column() {
            Grid() {
              ForEach(this.colors, item => {
                GridItem() {
                  Column()
                    .width(35).height(35).backgroundColor(item)
                    .onClick(() => {
                      this.color = item  //更改二维码的颜色
                    })
                }
              }, item => item.toString())
            }
            .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
            .columnsGap(20)
            .rowsGap(20)
            .height(90)
          }.width(255).alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .margin({top: $r("app.float.space_S")})
        .alignItems(VerticalAlign.Top)

效果如下图所示:
3.11 QRCode组件-鸿蒙开发者社区

最后,利用TextInput组件动态更改二维码内容,代码如下:

        TextInput({ text: this.info })
          .onChange((value: string) => {
            this.info = value // 更改二维码内容字符串
          })

由于修改文本框内容需要模拟键盘,所以需要到远程模拟器体验效果:
3.11 QRCode组件-鸿蒙开发者社区

使用微信扫一扫功能扫描上述二维码,可识别到内容。

【源码地址:https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent】

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
1
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

可以自由设置颜色和大小好评!

1
回复
2022-7-6 14:15:01
回复
    相关推荐