鸿蒙HarmonyOS NEXT开发，实现登录页UI（二）

浩宇软件开发

已于 2024-08-09 10:48:12 修改

阅读量558

点赞数 7

分类专栏： HarmonyOS NEXT鸿蒙开发文章标签： harmonyos ui 华为

于 2024-07-26 14:01:31 首次发布

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/140713715

版权

HarmonyOS NEXT鸿蒙开发专栏收录该内容

9 篇文章 3 订阅

订阅专栏

文章目录

1. 涉及到的技术点

局线性布局 (Row/Column)的使用

2.基本概念

布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
布局子元素：布局容器内部的元素。
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。

3. 布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

4.官方使用指南

官方地址：线性布局 (Row/Column)

5. demo实现登录页面

@Entry
@Component
struct Index {
  build() {

    Column() {
      Text('登录')
        .fontWeight(700)
        .fontSize(28)
        .lineHeight(46)
        .width('100%')


      Image($r('app.media.img_logo'))
        .width(89)
        .borderRadius(50)
        .margin({ top: 100 })

      Text('用户名')
        .width('100%')
        .margin({ top: 50, left: 20 })
        .fontSize(14)

      TextInput({ placeholder: '请输入用户名' })
        .margin({ top: 10 })
        .borderRadius(4)


      Text('密码')
        .width('100%')
        .margin({ top: 20, left: 20 })
        .fontSize(14)

      TextInput({ placeholder: '请输入密码' })
        .type(InputType.Password)
        .margin({ top: 10 })
        .borderRadius(4)


      Row() {
        Toggle({ type: ToggleType.Checkbox })
        Text('记住密码')
      }
      .width('100%')
      .margin({ top: 10 })

      Button('登录', { type: ButtonType.Normal })
        .width('100%')
        .backgroundColor('#e22418')
        .borderRadius(4)
        .margin({ top: 30 })


      Row() {
        Text('还没有账号? ').fontColor('#999')
        Text(' 点击注册').fontColor('#e22418')
      }
      .margin({ top: 30 })

    }
    //设置父布局左右的间距
    .padding({
      left: 26,
      right: 26
    })
    .width('100%')
    .height('100%')

  }
}