Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
    Flex({ direction: FlexDirection.Row }) {
      Text($r('app.string.title'))
        .fontSize(30)
    }
    .width('100%')
    .margin({ bottom: 30 })
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      Text($r('app.string.inputStr'))
        .fontSize(24)
        .margin({ bottom: 15 })
        .width('100%')
      TextArea()
        .width('100%')
        .height(180)
        .backgroundColor(0x0ffff)
        .borderRadius(0)
    }.width('100%')

    Row() {
      Column() {
        Button($r('app.string.btnDec2hex'), { type: ButtonType.Normal })
          .width('50%')
      }
      .padding({ top: 10, right: 5, bottom: 0, left: 0 })

      Column() {
        Button($r('app.string.btnHex2dex'), { type: ButtonType.Normal })
          .width('50%')
      }
      .padding({ top: 10, right: 0, bottom: 0, left: 5 })
    }
    Row() {
      ……
    }
    Row() {
……
    }
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      Text($r('app.string.encodeStr'))
        .fontSize(24)
        .margin({ bottom: 10 })
        .width('100%')
      Flex() {
        Text(this.strEncode).fontSize(16)
      }
      .width('100%')
      .height(180)
      .backgroundColor(0x0ffff)
      .borderRadius(20)
      .padding({ top: 10, right: 10, bottom: 10, left: 10 })
    }
    .width('100%')
    .margin({ top: 20 })
    Row() {
      Column() {
        Button($r('app.string.btnClean'), { type: ButtonType.Normal })
          .width('50%')
      }
      .padding({ top: 10, right: 5, bottom: 0, left: 0 })
    }
    .width('100%')
  }
  .padding({ top: 18, right: 18, bottom: 18, left: 18 })
}