HarmonyOS登录UI界面

步骤

在DevEco Studio中创建新的项目

完整代码

@Entry
@Component
struct Login {
  build() {

    Column() {


      Column() {
        Image($rawfile('img/bilibili.png')).width(100).height(100)
        Text('哔哩哔哩').margin({ top: 20 })
      }


      Column() {
        TextInput({ placeholder: '请输入手机号或邮箱' })
          .type(InputType.Normal)
          .height(50)
          .borderRadius(10)
          .backgroundColor(Color.White)
        Divider().strokeWidth(1).width('100%')

        TextInput({ placeholder: '请输入密码' })
          .type(InputType.Password)
          .height(50)
          .borderRadius(10)
          .backgroundColor(Color.White)
        Divider().strokeWidth(1).width('100%')

        Row() {

          Text('忘记密码').fontColor('#FFB3CA')
          Text('快速注册').fontColor('#FFB3CA')

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

        Button('启 动', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor('#FF8CB0')
          .width('100%')
          .onClick(() => {
            console.log('ButtonType.Normal')
          })

      }

      .width('94%')
      .height('25%')
      .justifyContent(FlexAlign.SpaceAround)

      Column() {
        Row() {
          Divider().strokeWidth(1).width('30%')
          Text('遇到问题？查看帮助').fontColor('#515151')
          Divider().strokeWidth(1).width('30%')
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)


        Row() {
          Image($rawfile('img/QQ.png'))
            .width(30)
            .height(30)
          Image($rawfile('img/wechat.png'))
            .width(30)
            .height(30)
          Image($rawfile('img/phone.png'))
            .width(30)
            .height(30)
        }
        .width('40%')
        .justifyContent(FlexAlign.SpaceEvenly)
      }

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

页面展示