鸿蒙ArkUI —— 登录页面开发

效果图

构建思路：

1. 排版（分析布局）
2. 内容（基础组件）
3. 美化（属性方法）

代码

@Entry
@Component
struct Index {
  // 构建 -> 界面
  build() {
    Column({space: 15}){
      Image($r('app.media.HUAWEI'))
        .width(90)
      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)
      Button('登录')
        .width(200)
      Row({space: 15}){
        Text('前往注册')
        Text('忘记密码')
      }
    }
    .padding(50)
    .width('100%')
  }
}

代码解析

1. 根据效果图可知需要分为分为5列

logo -- 用户名输入框 -- 密码输入框 -- 登录按钮 -- 前往注册 忘记密码

2. 第一列：logo

使用Image组件，引入图片地址，示例引入的是本地地址，也可以引入网络地址

注：本地图片应放置在resources -> base -> media目录下

3. 第二列：用户名输入框

使用TextInput组件即可，具体语法见下方

4. 第三列：密码输入框

使用TextInpt组件，可以设置输入的密码为密文形式，使用.type(InputType.Password)属性即可

5. 第四列：登录按钮

使用Button('按钮文本')组件，按钮文本可任意替换

6. 第五列：前往注册，忘记密码

有两行数据，所以需要在列组件下引入行组件，这里使用的文本形式，也可以改为其他形式，按需求即可。

为了让行之间有空隙，可设置间隙大小（使用space）

知识点总结

组件分类

基础组件：界面呈现的基础元素

如：文字、图片、按钮等

容器组件(){
  // 内容
}

容器组件：控制布局排布

如：Row行、Column等

基础组件(参数)

注意事项：

• 最外层必须保证只有一个容器组件
• build有且只能有一个根元素，且是容器组件

组件

Column、Row：属于容器组件，不可以同时在同一级出现

// 列
Column(){}
// 行
Row(){}

space：控制组件间的距离

Column({space: 间隙大小}){}
Row({space: 间隙大小}){}

image：图片组件

// 本地图片
Image($r('app.media.文件名'))
// 网络图片
Image('网图地址')

TextInput：输入框

// 基础语法
TextInput(参数对象)
    .属性方法

// 示例（常见输入）
TextInput({
    // 可以不写
    placeholder: '占位符文本'
})

// 密码加密
// 密码隐藏关键部分 ： .type(InputType.Password)
TextInput({
    // 可以不写
    placeholder: '占位符文本'
}).type(InputType.Password)

Button：按钮

Button('按钮文本')

.padding：内边距

组件(){
    // 内容
}.padding(边距大小)