【 HarmonyOS】基于Arkts制作一个仿QQ登录界面

1. 基于Arkts制作的一个简单的qq登录界面

2. 项目结构

3. 代码实现

@Entry
@Component
struct login {
  build(){
    Column(){
      Row(){
        Flex({ justifyContent: FlexAlign.Start }) {
          Image($r("app.media.back"))
            .width(30)
            .height(30)
            .margin({left:5,top:10})
        }
      }

      Row(){
        Flex({ justifyContent: FlexAlign.Center }) {
        Text('添加账号')
          .fontSize(27)
          .fontWeight(FontWeight.Bold)
          .margin({top:10})
        }
      }

      Row(){
        Column(){
        TextInput({placeholder: '输入QQ号'})
          .type(InputType.Number)
          .maxLength(10)
          .placeholderFont({ size: 14, weight: 400 })
          .caretColor(Color.Blue)
          .width(280)
          .height(50)
          .margin({top:65})
          .borderRadius(15)

        TextInput({placeholder: '输入QQ密码'})
          .placeholderFont({ size: 14, weight: 400 })
          .type(InputType.Password)
          .caretColor(Color.Blue)
          .width(280)
          .height(50)
          .margin({top:15})
          .borderRadius(15)
          .maxLength(20)

          Button('登录', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(8)
            .width(280)
            .height(40)
            .fontColor('grey')
            .fontSize(15)
            .margin({top:25})
            .borderRadius(8)

          Row(){
          Toggle({ type: ToggleType.Checkbox, isOn: false })
            .margin({top:12,right:5})
            .width(14)
            .height(14)

          Text('已阅读并同意')
            .margin({top:12})
            .fontSize(12)

            Text('服务协议')
              .margin({top:12})
              .fontSize(12)
              .fontColor('blue')

              Text('和')
              .margin({top:12})
              .fontSize(12)

              Text('QQ隐私保护指引')
              .margin({top:12})
                .fontSize(12)
                .fontColor('blue')
          }
        }
      }

      Row({
      }) {
        Column({
        }) {

          Image($r('app.media.icon_phone'))
            .width(42)
            .height(42)
            .borderWidth(0.8)
            .borderRadius(50)
            .borderColor('#DCDCDC')
            .padding(5)
          Text('手机号登录')
            .fontSize(12)
            .margin({ top: 10 });
        }.width('25%');

        Column({
        }) {
          Image($r('app.media.icon_other_login'))
            .width(42)
            .height(42)
            .borderWidth(0.8)
            .borderRadius(50)
            .borderColor('#DCDCDC')
            .padding(5)
          Text('其他方式登录')
            .fontSize(12)
            .margin({ top: 10 })

        }.width('25%');

        Column({

        }) {
          Image($r('app.media.icon_register'))
            .width(42)
            .height(42)
            .borderWidth(0.8)
            .borderRadius(50)
            .borderColor('#DCDCDC')
            .padding(5)
          Text('注册')
            .fontSize(12)
            .margin({ top: 10 });
        }.width('20%')

        Column({
        }) {
          Image($r('app.media.icon_more'))
            .width(42)
            .height(42)
            .borderWidth(0.8)
            .borderRadius(50)
            .borderColor('#DCDCDC')
            .padding(5)
          Text('更多')
            .fontSize(12)
            .margin({ top: 10 });
        }.width('20%')
      }.height('90%')
    }
    }
  }