3.11 QRCode组件 原创 精华

/**
 * 3.11 QRCode组件
 * 显示二维码信息。
 *
 * 接口:
 *  QRCode(value: string)
 *    value: string 二维码内容字符串。
 *
 * 属性:
 *  .color(Color) 默认值Black,设置二维码颜色。
 *
 * 事件:
 *  通用事件仅支持点击事件。
 */
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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
1.
2.
3.
4.
5.

        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"))
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

        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%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

        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)
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.

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