前端开发 | 鸿蒙(HarmonyOS)应用开发——UI设计_鸿蒙前端开发文档

掌握UI界面的基本布局和简单组件的使用，能完成登录UI界面的实现。

• 涉及知识点

1. 掌握Flex弹性布局
2. 掌握容器组件Column、Row
3. 掌握基础组件Text、TextInput、Button等

• 准备

1. 技能要求：建议具备基本的编程知识。
2. 实验环境要求：
3. 操作系统Windows
4. 安装DevEco Studio

• 详细过程

本实验，我们实现登录UI界面。最终效果如下：

步骤 1: 初始化项目

1. 配置环境、安装编译器deveco

环境：下载nodejs、ohpm、sdk

新建空项目

2.在page目录下创建login.ets文件，在rawfile目录下创建image目录并导入所需图像资源

步骤 2: 设计登陆页面

1.整体结构：

struct Login 定义了一个名为 Login 的结构体或者组件。build() 方法内部描述了整个登录界面的布局结构。

2.布局组件：使用 Column() 和 Row() 组件来定义垂直和水平布局。

Column() {

  // 内部子组件

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.SpaceAround)

3.具体实现

（一）

Column() {
 
  Image($rawfile('images/pic0.png')).width(100).height(100)
 
  Text('智慧论坛')
 
    .fontSize(33)
 
    .fontWeight(FontWeight.Bold)
 
    .margin({ top: 40 })
 
    .fontColor(0x317aff)
 
}

在一个新的 Column 中添加一个图片和一个标题文字。使用 Image 组件加载本地图片 images/pic0.png，并设置宽高为 100 像素。使用 Text 组件显示标题 "智慧论坛"。设置字体大小为 33。设置字体为粗体。设置文字上方的外边距为 40。设置字体颜色为蓝色（十六进制颜色代码 0x317aff）。

效果展示：

（二）

包含了2个输入框（TextInput）、分隔线（Divider）、按钮（Button）和一些文本标签（Text）。输入框使用了不同的属性设置，如高度、边框半径、背景颜色等。每个输入框之间有一个占满宽度的分隔线。

一个 Row 包含了两个忘记密码和快速注册的文本，它们被放置在按钮下方，并采用了相应的样式。

按钮被定义为一个启动按钮，具有点击事件的处理函数。

Column() {
 
  TextInput({ placeholder: '请输入用户名/手机号/邮箱' })
 
    .height(47)
 
    .width('95%')
 
    .borderRadius(10)
 
    .type(InputType.Normal)
 
    .backgroundColor(Color.White)
 
  Divider().strokeWidth(1).width('100%')
 
 
 
  TextInput({ placeholder: '请输入密码' })
 
    .height(47)
 
    .width('95%')
 
    .borderRadius(10)
 
    .type(InputType.Normal)
 
    .backgroundColor(Color.White)
 
 
 
  Row() {
 
    Text('记住密码').fontColor('#4798fd')
 
    Text('快速注册').fontColor('#4798fd')
 
  }
 
  .width('100%')
 
  .justifyContent(FlexAlign.SpaceBetween)
 
 
 
  Button('登陆', { type: ButtonType.Normal, stateEffect: true })
 
    .borderRadius(8)
 
    .backgroundColor(0x317aff)
 
    .width('100%')
 
    .onClick(() => {
 
      console.log('ButtonType.Normal')
 
    })
 
}
 
.width('94%')
 
.height('25%')
 
.justifyContent(FlexAlign.SpaceAround)

（1）TextInput 组件：

①placeholder：设置输入框的提示文字。

②height(47)：设置输入框的高度为 47 像素。

③width('95%')：设置输入框的宽度为父容器的 95%。

④borderRadius(10)：设置输入框的圆角半径为 10 像素。

⑤type(InputType.Normal)：设置输入框的类型为普通文本。

⑥backgroundColor(Color.White)：设置输入框的背景颜色为白色。

（2）Divider 组件：

①strokeWidth(1)：设置分割线的宽度为 1 像素。

②width('100%')：设置分割线的宽度为父容器的 100%。

（3）记住密码和快速注册：

创建一个水平布局。

①Text('记住密码').fontColor('#4798fd')：显示 "记住密码" 文本，字体颜色为蓝色。

②Text('快速注册').fontColor('#4798fd')：显示 "快速注册" 文本，字体颜色为蓝色。

③.width('100%')：设置 Row 的宽度为父容器的 100%。

④.justifyContent(FlexAlign.SpaceBetween)：子组件之间的间距为均匀分布。

（4）Button 组件：

①Button('登陆', { type: ButtonType.Normal, stateEffect: true })：创建一个按钮，显示文字 "登陆"。

②.borderRadius(8)：设置按钮的圆角半径为 8 像素。

③.backgroundColor(0x317aff)：设置按钮的背景颜色为蓝色。

④.width('100%')：设置按钮的宽度为父容器的 100%。

⑤.onClick(() => { console.log('ButtonType.Normal') })：设置按钮的点击事件，点击时输出日志。

（5）布局：

①.width('94%') 和 .height('25%')：设置 Column 的宽度为父容器的 94%，高度为 25%。

②.justifyContent(FlexAlign.SpaceAround)：子组件之间的间距为均匀分布。

效果展示：

（三）

Column() {
 
  Row() {
 
    Divider().strokeWidth(1).width('30%')
 
    Text('其它方式登陆')
 
    Divider().strokeWidth(1).width('30%')
 
  }
 
  .width('100%')
 
  .justifyContent(FlexAlign.SpaceBetween)
 
 
 
  Row() {
 
    Image($rawfile('images/pic1.png')).width(30).height(30)
 
    Image($rawfile('images/pic2.png')).width(30).height(30)
 
    Image($rawfile('images/pic3.png')).width(30).height(30)
 
    Image($rawfile('images/pic4.png')).width(30).height(30)
 
    Image($rawfile('images/pic5.png')).width(30).height(30)
 
  }
 
  .width('70%')
 
  .justifyContent(FlexAlign.SpaceEvenly)}

①包含 "其它方式登陆" 文本及两侧的分割线。包含多个小图标，用于展示其他登录方式。

②Divider 分割线，宽度为父容器的 30%，线宽为 1 像素。

③Text('其它方式登陆')：显示文字 "其它方式登陆"。

④.width('100%')：宽度为父容器的 100%。

⑤.justifyContent(FlexAlign.SpaceBetween)：子组件之间的间距均匀分布。

效果展示：