3.11 QRCode组件 原创 精华

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

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

本节教程演示的目标为：二维码上面嵌入头像，可通过Slider组件动态调节二维码的大小，可通过点击选择二维码的颜色，以及通过修改输入框的文字动态生成二维码。效果如下图所示：

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

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%')

效果如下：

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

        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)

效果如下图所示：

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

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

由于修改文本框内容需要模拟键盘，所以需要到远程模拟器体验效果：

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

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