前端开发 | 鸿蒙(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)：子组件之间的间距均匀分布。

效果展示：