前端开发 | 鸿蒙(HarmonyOS)应用开发——UI筹划

把握UI界面的根本结构和简朴组件的利用，能完成登录UI界面的实现。

• 涉及知识点
  

• 把握Flex弹性结构
  
• 把握容器组件Column、Row
  
• 把握根本组件Text、TextInput、Button等
  

• 预备
  

• 技能要求：发起具备根本的编程知识。
  
• 实行环境要求：
  
• 操纵体系Windows
  
• 安装DevEco Studio
  

• 详细过程
  

本实行，我们实现登录UI界面。最闭幕果如下：

步调 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.详细实现

（一）

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

复制代码

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

结果展示：

（二）

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

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

按钮被界说为一个启动按钮，具有点击变乱的处理处罚函数。

2. Column() {
4.   TextInput({ placeholder: '请输入用户名/手机号/邮箱' })
6.     .height(47)
8.     .width('95%')
10.     .borderRadius(10)
12.     .type(InputType.Normal)
14.     .backgroundColor(Color.White)
16.   Divider().strokeWidth(1).width('100%')
20.   TextInput({ placeholder: '请输入密码' })
22.     .height(47)
24.     .width('95%')
26.     .borderRadius(10)
28.     .type(InputType.Normal)
30.     .backgroundColor(Color.White)
34.   Row() {
36.     Text('记住密码').fontColor('#4798fd')
38.     Text('快速注册').fontColor('#4798fd')
40.   }
42.   .width('100%')
44.   .justifyContent(FlexAlign.SpaceBetween)
48.   Button('登陆', { type: ButtonType.Normal, stateEffect: true })
50.     .borderRadius(8)
52.     .backgroundColor(0x317aff)
54.     .width('100%')
56.     .onClick(() => {
58.       console.log('ButtonType.Normal')
60.     })
62. }
64. .width('94%')
66. .height('25%')
68. .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)：子组件之间的间距为匀称分布。

结果展示：

（三）

2. Column() {
4.   Row() {
6.     Divider().strokeWidth(1).width('30%')
8.     Text('其它方式登陆')
10.     Divider().strokeWidth(1).width('30%')
12.   }
14.   .width('100%')
16.   .justifyContent(FlexAlign.SpaceBetween)
20.   Row() {
22.     Image($rawfile('images/pic1.png')).width(30).height(30)
24.     Image($rawfile('images/pic2.png')).width(30).height(30)
26.     Image($rawfile('images/pic3.png')).width(30).height(30)
28.     Image($rawfile('images/pic4.png')).width(30).height(30)
30.     Image($rawfile('images/pic5.png')).width(30).height(30)
32.   }
34.   .width('70%')
36.   .justifyContent(FlexAlign.SpaceEvenly)}

复制代码

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

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

③Text('别的方式登岸')：表现笔墨 "别的方式登岸"。

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

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

结果展示：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金