HarmonyOS6 - ArkUI学习-上

HarmonyOS6 - ArkUI学习-上

学习目标

• 理解组件的基本概念
• 掌握自定义组件的创建和使用
• 掌握常见组件的使用和页面布局
• 掌握常见页面的布局方式

1. ArkUI介绍

方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

方舟开发框架示意图，如下：

1. 基本概念

• **UI：**即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。
• **组件：**UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

2. 两种开发方式

针对不同的应用场景及技术背景，方舟开发框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称"声明式开发范式"）和兼容JS的类Web开发范式（简称"类Web开发范式"）。

1. 声明式开发范式(推荐)

采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力

2. 类Web开发范式

采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用

3. 建议

在开发一款新应用时，推荐采用声明式开发范式来构建UI，主要基于以下几点考虑：

• **开发效率：**声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。
• **应用性能：**如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

2. 组件介绍

1. 组件是什么

• 组件是独立的代码块，具有特定的功能和样式，并且可以在页面中独立使用和重复使用
• ArkUI为开发者提供了可以直接在程序中使用的组件，通过组件可以快速构建UI，提高UI的开发效率和一致性

组件可以按照其功能和用途进行分类，ArkUI中的组件分类如下：

1. 基础组件 ：提供了构建UI的基础，如按钮、单行文本输入框、标签等，它们通常是构建其他复杂组件的基础
2. 容器组件 ：帮助开发者构建不同样式的页面布局，如栅格系统、弹性布局、网格布局等，使页面的布局更加灵活
3. 媒体组件 ：用于处理和展示音视频内容，丰富UI的视觉和交互体验
4. 绘制组件 ：用于绘制图形，例如线条、矩形、圆形等，通常用于实现涂鸦板、绘图工具等应用场景
5. 画布组件 ：提供了一个可绘制的画布，开发者可以在画布上绘制各种图形、文本等内容。这些组件通常用于创建自定义的图形界面或实现特定的绘图功能
6. 其他组件 ：包括操作块组件、弹出框组件、气泡组件、工具栏组件等

ArkUI为组件提供了属性和事件，包括所有组件通用的属性和事件，以及每个组件特有的属性和事件。关于属性和事件的介绍如下：

1. 属性用于定义组件的样式、数据、特性等。其中，定义组件样式的属性与网页中的CSS样式属性类似，从而能让Web前端开发者快速上手鸿蒙应用的UI开发
2. 事件用于定义组件的交互逻辑。开发者可以为组件的事件设置事件处理程序，当用户的交互触发了事件时，程序就会执行事件处理程序，从而处理用户的操作

1. 组件的属性和事件都是以调用方法的形式设置的。例如，调用width()方法可以设置width属性 ，调用onClick()方法可以设置onClick事件
2. 通过链式调用的方式可以连续设置多个属性 和事件

2. 组件基本使用方法

1. 鸿蒙开发文档提供了ArkUI组件的示例代码，用于展示组件的实际应用，这些示例代码可以帮助开发者了解如何使用组件
2. 建议初学者在学习时，一边学习一边查阅鸿蒙开发文档，通过鸿蒙开发文档获取组件的相关信息

通过查阅鸿蒙开发文档的方式学习ArkUI组件的基本流程如下：

1. 在鸿蒙开发文档中找到所需组件，阅读组件的概述部分，了解组件的基本信息、特性和用途
2. 查看文档中提供的示例代码，以便了解如何使用该组件及其各种属性和方法
3. 根据文档提供的示例代码和说明，在DevEco Studio中进行实际操作并测试组件的各种功能
4. 如果效果与实际需求有差异，可以进一步调整和修改代码，以达到期望的效果

在使用组件时，经常会用到通用属性和通用事件。通过鸿蒙开发文档查阅通用属性和通用事件的相关信息，文档的路径为"API参考 > 应用框架 > ArkUI（方舟UI框架） > ArkTS组件 > 组件通用信息"

下面列举一些ArkUI中常用的通用属性和通用事件：

类型	名称	说明
通用属性	width	设置宽度
通用属性	height	设置高度
通用属性	margin	设置外边距
通用属性	padding	设置内边距
通用属性	background	设置背景
通用属性	backgroundColor	设置背景颜色
通用属性	border	设置边框的样式
通用属性	borderRadius	设置边框的圆角半径
通用事件	onClick	点击事件

在设置组件的属性时，经常需要设置一些数字（如高度、宽度）和颜色（如背景颜色、边框色）

下面对ArkUI中数字的单位和颜色的取值分别进行介绍

1. 数字的单位

• ArkUI中数字的默认单位是vp。vp的含义是虚拟像素（virtual pixel），它提供了一种灵活的方式来使组件适应不同屏幕像素密度的显示效果，使组件在不同像素密度的设备上具有一致的视觉体验。
• 在代码中，直接使用number类型的数字即表示使用vp单位，此外还可以使用string类型的百分比数来设置相对值。

2. 颜色的取值

ArkUI中颜色的取值方式有5种，分别是预定义的颜色名、十六进制颜色值、RGB值、RGBA值以及资源中的颜色，具体如下

1. 预定义的颜色名：例如，Color.Red、Color.Green、Color.Blue，分别表示红色、绿色和蓝色。当在DevEco Studio中输入"Color."后，DevEco Studio会提示所有可用的颜色名。
2. 十六进制颜色值：有字符串和数字两种类型，具体如下
   • 字符串：由"#"开头的8位十六进制数字符串组成，每两位代表一个值，一共4个值，从左到右依次表示不透明度、红色、绿色、蓝色，每个值的取值范围是00~FF。如果每个值的两位都相同，可以简写成1位，例如'#FFFF0000'（红色）可以简写为'#FF00'。如果不需要设置不透明度，可以省略。例如，'#FFFF0000'可以简写成'#FF0000'或'#F00'。十六进制颜色值中的英文字母不区分大小写
   • 数字：由"0x"开头的6位十六进制数表示，每两位代表一个值，一共3个值，从左到右分别表示红色、绿色、蓝色，每个值的取值范围是00～FF。例如，0xFF0000表示红色
3. RGB值：使用'rgb(r, g, b)'格式表示，其中r、g和b分别表示红色、绿色、蓝色，每个颜色的取值范围为0~255的整数。例如，'rgb(255, 0, 0)'表示红色。
4. RGBA值：使用'rgba(r, g, b, a)'格式表示，它相比RGB值多了a，a表示不透明度。不透明度的取值范围为0~1，0表示完全透明。例如，'rgba(255, 0, 0, 0.5)'表示半透明的红色
5. 资源中的颜色：通过 r ( ) 函数读取 e n t r y / s r c / m a i n / r e s o u r c e s / b a s e 目录下的 c o l o r . j s o n 文件中的内容，写法为" r()函数读取entry/src/main/resources/base目录下的color.json文件中的内容，写法为" r()函数读取entry/src/main/resources/base目录下的color.json文件中的内容，写法为"r('app.color.资源名')"。

3. 自定义组件

在entry/src/main/ets/pages目录下，每个文件对应一个页面，在每个文件中可以定义多个自定义组件。打开该目录下的Index.ets文件，会看到里面的代码主要包括@Entry、@Component、struct Index {}、@State和build()，示例代码如下。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    ......（此处省略一些代码）
  }
}

1. 装饰器

装饰器用于装饰类、结构、方法以及变量，并赋予特殊的含义

装饰器既可以与被装饰的内容写在同一行，用空格分隔，也可以单独写在一行，写在被装饰内容的上方。多个装饰器可以同时使用，用空格或换行分隔即可。

常用的装饰器有：

1. @Component
2. @Entry
3. @State
4. @Preview

1. @Component

使用@Component装饰的struct具有组件化能力，能够成为一个独立的组件，即自定义组件

自定义组件可以调用其他自定义组件和ArkUI提供的组件，自定义组件内部必须使用build()方法来描述UI结构。

2. @Entry

@Entry用于将一个自定义组件装饰为页面的入口组件。入口组件用于展示页面，一个页面只能有一个入口组件

• 当一个页面有入口组件时，需要通过自动或手动的方式将页面注册到entry/src/main/resources/base/profile目录下的main_pages.json文件中
• 如果删除了入口组件 ，则需要手动从main_pages.json文件中删除相应的注册页面的代码，否则编译时会报错

注意事项：

1. 对于entry/src/main/ets/pages目录下的页面文件，应采用"新建"→"Page"→"Empty Page"的方式进行创建，这样创建的页面文件，会自动在main_pages.json文件中进行路径注册
2. 其他目录下的文件（非页面）则应采用"新建"→"ArkTS File"的方式进行创建，则不会自动在main_pages.json文件中进行路径注册

main_page.json文件的示例代码如下：

{
  "src": [
    "pages/Index",
    "pages/Example"
  ]
}

3. @State

• @State用于装饰自定义组件内的变量，以保存状态数据
• 状态数据变化会触发所在组件的UI重新渲染（或称为刷新）
• 所有被@State装饰的变量必须设置初始值

4. @Preview

• @Preview用于使自定义组件可以在DevEco Studio的预览器上预览
• 入口组件不需要添加@Preview即可预览，@Preview通常用于预览非入口组件

2. UI描述

• UI描述 是指以声明式的方式来描述自定义组件的UI结构
• UI描述的代码写在build()方法中
• 在build()方法中可以使用ArkUI提供的组件和自定义组件

build()方法可以没有内容，如果有内容，需要注意以下两点：

1. 对于被@Entry装饰的自定义组件，build()方法必须有且只能有一个根组件，且该根组件必须能够容纳子组件
2. 对于被@Component装饰的自定义组件，build()方法必须有且只能有一个根组件 ，但这个根组件可以没有子组件

3. struct

• struct是指使用struct关键字声明的结构（或称为结构体），被@Component装饰的struct代表一个自定义组件
• 自定义组件是一个可复用的UI单元，可以组合其他组件
• struct关键字后面的Index表示自定义组件的名称 ，该名称不能和ArkUI提供的组件名称相同

4. ArkUI常用组件

1. Text 文本组件

官网介绍地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text

1. Text组件是文本组件，用于显示文本内容，其内部可以包含Span组件和ImageSpan组件
2. Span组件用于显示行内文本，ImageSpan组件用于显示行内图像

Text组件的语法格式如下：

Text(content)

content参数用于设置文本内容，可以是string类型或Resource类型，具体介绍如下：

1. string类型 用于直接写入文本内容。例如：Text('鸿蒙学习')
2. Resource类型 用于读取本地资源文件，即通过 r ( ) 函数从 e n t r y / s r c / m a i n / r e s o u r c e s / z h C N / e l e m e n t 目录下的 s t r i n g . j s o n 文件中读取内容。例如： T e x t ( r()函数从entry/src/main/resources/zh_CN/element目录下的string.json文件中读取内容。例如：Text( r()函数从entry/src/main/resources/zhCN/element目录下的string.json文件中读取内容。例如：Text(r('app.string.资源名'))

当不传递参数时，可以在Text组件中嵌套Span组件和ImageSpan组件。若嵌套Span组件，则显示Span组件的内容且Text组件的样式不生效

Text组件嵌套Span组件的语法格式如下：

//Text组件的小括号后面添加了大括号"{}"，在大括号中使用了Span组件
Text(){
  Span()
}

Text组件除了设置文本内容外，还可以通过设置各种属性来自定义文本的外观和行为

Text组件的常用属性如下表所示：

属性	说明
textAlign	用于设置文本段落在水平方向的对齐方式
textOverflow	用于设置文本超长时的显示方式
lineHeight	用于设置文本的行高
fontSize	用于设置文本的字号
fontColor	用于设置文本的字体颜色
fongWeight	用于设置文本的字体粗细
letterSpacing	用于设置文本字符间距
textCase	用于设置文本大小写
decoration	用于设置文本装饰线样式及其颜色

textAlign属性的常用取值如下：

1. TextAlign.Start：默认值，表示文本左对齐
2. TextAlign.Center：表示文本居中对齐
3. TextAlign.End：表示文本右对齐

textOverflow属性的常用取值如下：

1. TextOverflow.Clip：默认值，表示文本超长时进行裁剪
2. TextOverflow.Ellipsis：表示文本超长时显示不下的文本用省略号代替
3. TextOverflow.None：表示文本超长时不进行裁剪

textCase属性的常用取值如下：

1. TextCase.Normal：默认值，表示保持文本原有大小写
2. TextCase.LowerCase：表示文本采用全小写
3. TextCase.UpperCase：表示文本采用全大写

decoration属性的文本装饰线样式取值如下：

1. TextDecorationType.None：默认值，表示不使用文本装饰线
2. TextDecorationType.Overline：表示在文本上方添加上划线
3. TextDecorationType.Underline：表示在文本下方添加下划线
4. TextDecorationType.LineThrough：表示为文本添加删除线

文本装饰线的默认颜色为Color.Black，即黑色

2. Image 图片组件

官网介绍地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image

Image是图像组件，常用于在应用程序中显示图像，它支持多种图像格式，例如PNG、JPEG、BMP、SVG、WebP和GIF

Image组件的语法格式如下：

Image(src)

在上述语法格式中，src参数 用于指定要显示的图像源

图像源可以是string、PixelMap和Resource类型，具体介绍如下：

1. string类型常用于加载网络图像，需要先申请网络访问权限才能使用。当使用相对路径（相对ets目录）引用本地图像时，不支持跨包和跨模块访问图像，例如Image('images/test.jpg')
2. PixelMap类型用于加载像素图像，常用于图像编辑场景
3. Resource类型用于加载本地图像，支持跨包和跨模块访问图像。可以将图像放到entry/src/main/resources/base/media目录下，通过$r()函数读取并转换为Resource格式。例如，访问media目录下的icon.png文件，示例代码如下：

Image($r('app.media.icon'));

此外，还可以将图像放到entry/src/main/resources/rawfile目录下，通过$rawfile()函数读取并转换为Resource格式。例如，访问rawfile目录下的icon.png文件，示例代码如下：

Image($rawfile('icon.png'));

总结如下：

Image组件的常用属性如下表所示：

属性	说明
alt	用于设置图像加载时显示的占位图
objectFit	用于设置图像的填充效果
interpolation	用于设置图像的插值效果，可缓解图像在缩放时的锯齿问题。SVG格式的图像不支持使用该属性
objectRepeat	用于设置图像的重复样式，从中心点向两边重复，剩余空间不足放下一张图像时图像会被截断。SVG格式的图像不支持使用该属性
renderMode	用于设置图像的渲染模式为原色或黑白。SVG格式的图像不支持使用该属性
fillColor	用于设置填充颜色，设置后填充颜色会覆盖在图像上。该属性仅对SVG格式的图像生效，设置后会替换图像的填充颜色

objectFit属性的常用取值如下：

1. ImageFit.Cover：默认值，表示在保持宽高比的情况下进行缩小或者放大，使图像完全覆盖显示区域，如果图像的宽高比与显示区域的宽高比不同，则图像会被裁剪
2. ImageFit.Contain：表示在保持宽高比的情况下进行缩小或者放大，使图像完全显示在显示边界内
3. ImageFit.Auto：表示自适应显示
4. ImageFit.Fill：表示在不保持宽高比的情况下进行放大或者缩小，使图像充满显示边界
5. ImageFit.ScaleDown：表示保持宽高比显示，图像需缩小或者保持不变
6. ImageFit.None：表示保持图像原有尺寸显示

interpolation属性的常用取值如下：

1. ImageInterpolation.Low：默认值，表示在图像缩放时使用较低质量的插值算法
2. ImageInterpolation.None：表示在图像缩放时不使用插值算法，这可能导致图像显示锯齿或像素化
3. ImageInterpolation.Medium：表示在图像缩放时使用中等质量的插值算法
4. ImageInterpolation.High：表示在图像缩放时使用较高质量的插值算法，尽可能减少锯齿效应和失真

objectRepeat属性的常用取值如下：

1. ImageRepeat.NoRepeat：默认值，表示不重复绘制图像
2. ImageRepeat.X：表示只在水平方向上重复绘制图像
3. ImageRepeat.Y：表示只在垂直方向上重复绘制图像
4. ImageRepeat.XY：表示在水平方向上和垂直方向上重复绘制图像

renderMode属性的常用取值如下：

1. ImageRenderMode.Original：默认值，表示图像的渲染模式为原色
2. ImageRenderMode.Template：表示图像的渲染模式为黑白

3. TextInput组件

官网介绍地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput

TextInput组件是单行文本输入框组件，其语法格式如下：

TextInput(value)

value参数是一个TextInputOptions类型的对象，该对象包含以下属性：

1. placeholder属性：用于设置单行文本输入框无输入时的提示文本
2. text属性：用于设置单行文本输入框当前的文本内容

下面通过代码演示如何设置单行文本输入框当前的文本内容，示例代码如下：

TextInput({ text: '123', placeholder: '请输入账号或手机号' })

TextInput组件的常用属性如下表所示：

属性	说明
type	用于设置单行文本输入框的类型
caretColor	用于设置单行文本输入框的光标字体颜色
placeholderColor	用于设置placeholder属性对应的文本字体颜色
placeholderFont	用于设置placeholder属性对应的文本样式，包括size属性、weight属性、family属性和style属性，分别用于设置文本字号、字体粗细、字体列表、字体样式

type属性的常用取值如下：

1. InputType.Normal：默认值，表示基本输入模式，支持输入数字、字母、下划线、空格和特殊字符
2. InputType.Password：表示密码输入模式，支持输入数字、字母、下划线、空格和特殊字符。
3. InputType.Email：表示邮箱地址输入模式，支持输入数字、字母、下划线和@字符，只能输入一个@字符
4. InputType.Number：表示纯数字输入模式，支持输入数字
5. InputType.PhoneNumber：表示电话号码输入模式，支持输入数字、+、-、*、#，长度不限

TextInput组件的常用事件如下表所示：

事件	说明
onChange	输入内容发生变化时触发，例如键盘输入、粘贴或剪切内容时触发
onSubmit	按下键盘中的"Enter"键时触发
onCopy	当长按单行文本输入框内部区域弹出剪贴板后，点击剪切板"复制"按钮时触发
onCut	当长按单行文本输入框内部区域弹出剪贴板后，点击剪切板"剪切"按钮时触发
onPaste	当长按单行文本输入框内部区域弹出剪贴板后，点击剪切板"粘贴"按钮时触发

4. Button组件

官网介绍地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button

Button组件是按钮组件，可快速创建不同样式的按钮，其语法格式如下：

Button(label, options)

• label参数用于设置按钮的文本内容
• options参数为一个对象，包含type属性和stateEffect属性

当不传递label参数时，可以在Button组件内嵌套其他组件，语法格式如下：

Button() {
  // 其他组件
}

Button组件的常用属性如下表所示：

属性	说明
type	用于设置按钮显示样式
stateEffect	用于设置按钮按下时是否开启按压效果，默认值为true，表示开启按压效果；当设置为false时，表示关闭按压效果

type属性的常用可选值如下

1. ButtonType.Capsule：默认值，表示为胶囊型按钮，圆角半径默认为高度的一半
2. ButtonType.Circle：表示为圆形按钮
3. ButtonType.Normal：表示为普通按钮，不带圆角

5. 小作业

独立开发出如下页面：

6. Column 列组件

为了做出上面登录页面的按钮在同一行的效果，我们需要先学习Column 列组件

官网参考地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column

1. 概念

Column组件是用于沿垂直方向布局其子组件的容器组件，可以实现纵向布局效果

Column容器（Column组件创建的容器）内的子组件会按照代码中的顺序依次在垂直方向上排列

如果Column容器中的子组件的内容超出了父容器组件的宽度或高度，超出部分不会换行也不会出现滚动条

Column组件的语法格式如下：

Column(value){...}

在上述语法格式中，value参数为一个对象 ，该对象包含space属性 ，用于设置垂直方向上子组件之间的间距

Column组件的常用属性如下表所示：

属性	说明
alignItems	用于设置子组件在交叉轴（水平）方向上的对齐方式
justifyContent	用于设置子组件在主轴（垂直）方向上的对齐方式

2. 案例代码

@Entry
@Component
struct ColumnTest {
  build() {
    Column({ space: 50 }) {
      Text('华为')
      Text('鸿蒙')
      Text('核心科技')
    }
    .height('80%')
    .width('80%')
    .backgroundColor('#ff99aafd')
  }
}

核心知识点：Column组件的所有子组件，都会从上往下依次排列

3. justifyContent

含义：设置子组件在垂直方向上的对齐格式

justifyContent属性的常用取值如下:

• FlexAlign.Start：默认值，表示子组件在垂直方向上首端对齐，第一个子组件与首端边沿对齐，同时后续的子组件与前一个子组件对齐
• FlexAlign.Center：表示子组件在垂直方向上中心对齐，第一个子组件与首端边沿的距离与最后一个子组件与尾部边沿的距离相同
• FlexAlign.End：表示子组件在垂直方向上尾部对齐，最后一个子组件与尾部边沿对齐，其他子组件与后一个子组件对齐
• FlexAlign.SpaceBetween：表示在垂直方向上均匀分布子组件，相邻子组件之间距离相同。第一个子组件与首端边沿对齐，最后一个子组件与尾部边沿对齐
• FlexAlign.SpaceAround：表示在垂直方向上均匀分布子组件，相邻子组件之间距离相同。第一个子组件到首端边沿的距离和最后一个子组件到尾部边沿的距离是相邻子组件之间距离的一半
• FlexAlign.SpaceEvenly：表示在垂直方向上均匀分布子组件，相邻子组件之间距离、第一个子组件与首端边沿的距离、最后一个子组件与尾部边沿的间距相同

看下面案例代码：

@Entry
@Component
struct ColumnTest {
  build() {
    Column() {
      Text('华为').fontSize(30)
      Text('鸿蒙').fontSize(30)
      Text('核心科技').fontSize(30)
    }
    .height('80%')
    .width('80%')
    .backgroundColor('#ff99aafd')
    .justifyContent(FlexAlign.Center) //设置子组件在垂直方向上的对齐格式
  }
}

页面效果：

justifyContent括号中选项值对比如下图所示：

4. alignItems

含义：设置子组件在水平方向上的对齐格式

alignItems属性的常用取值如下:

• HorizontalAlign.Start：表示子组件在水平方向上左对齐
• HorizontalAlign.Center：默认值，表示子组件在水平方向上居中对齐
• HorizontalAlign.End，表示子组件在水平方向上右对齐

看下面案例代码：

@Entry
@Component
struct ColumnTest {
  build() {
    Column() {
      Text('华为').fontSize(30)
      Text('鸿蒙').fontSize(30)
      Text('核心科技').fontSize(30)
    }
    .height('80%')
    .width('80%')
    .backgroundColor('#ff99aafd')
    .alignItems(HorizontalAlign.Start)//设置子组件在水平方向上的对齐格式
  }
}

页面效果：

7. Row 行组件

为了实现作业登录中，登录注册按钮在同一行中，我们现在需要学习Row 行组件

1. 概念

官网参考地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row

Row容器（Row组件创建的容器）内的子组件会按照代码中的顺序依次在水平方向上排列

如果Row容器中的子组件的内容超出了父容器组件的宽度或高度，超出部分不会换行也不会出现滚动条

Row组件的语法格式如下：

Row(value){...}

在上述语法格式中，value参数为一个对象，该对象包含space属性 ，用于设置水平方向上子组件的间距。

2. 案例

@Entry
@Component
struct RowTest {
  build() {
    Row() {
      Text('华为').fontSize(16)
      Text('鸿蒙').fontSize(16)
      Text('核心科技').fontSize(16)
    }
    .height('30%')
    .width('100%')
    .backgroundColor('#ff99aafd')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

页面效果：

3. justifyContent

含义：设置子组件在水平方向上的对齐格式

看下面案例代码：

@Entry
@Component
struct RowTest {
  build() {
    Row() {
      Text('华为').fontSize(16)
      Text('鸿蒙').fontSize(16)
      Text('核心科技').fontSize(16)
    }
    .height('30%')
    .width('100%')
    .backgroundColor('#ff99aafd')
    .justifyContent(FlexAlign.SpaceBetween)//设置子组件在水平方向上的对齐格式
  }
}

页面效果：

Row的justifyContent属性中的值含义与上面Column含义是一致的，只不过方向刚好相反而已

4. alignItems

含义：设置子组件在垂直方向上的对齐格式

看下面案例代码：

@Entry
@Component
struct RowTest {
  build() {
    Row() {
      Text('华为').fontSize(16)
      Text('鸿蒙').fontSize(16)
      Text('核心科技').fontSize(16)
    }
    .height('30%')
    .width('100%')
    .backgroundColor('#ff99aafd')
    .alignItems(VerticalAlign.Bottom)
  }
}

页面效果：

小结一下：

5. 小作业代码

import { router } from '@kit.ArkUI';

/**
 * 登录页面
 */
@Entry
@Component
struct Login {
  @State message: string = '宠物之家';

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(100)
      Text(this.message)
        .fontSize(38)
        .fontWeight(600)
      TextInput({ placeholder: '请输入登录账号' })
        .backgroundColor('#ffe0e0e0')
        .width('85%')
        .height(50)
      TextInput({ placeholder: '请输入登录密码' })
        .backgroundColor('#ffe0e0e0')
        .width('85%')
        .height(50)
      Row() {
        Button('登录')
          .width(90)
          .fontSize(20)
        Button('注册')
          .width(90)
          .fontSize(20)
      }
    }
    .height('100%')
    .width('100%')
  }
}

页面效果如下：

1. 作业代码优化

我们发现上面页面比较丑，很大一部分原因是因为间距没有设置好，想要以后做出来页面更美观，我们要学会如何设置间距

2. 边距

1. 内边距

案例代码：

@Entry
@Component
struct PaddingTest {
  build() {
    Column() {
      Row() {
        Text('边距测试')
          .fontSize(25)
      }
      .padding(20) //设置内边距
      .width('80%')
      .backgroundColor('#ff66fcbb')
      .justifyContent(FlexAlign.Center)//水平居中
    }
    .height('80%')
    .width('100%')
    .backgroundColor('#fffda8a8')
  }
}

页面效果：

2. 外边距

案例代码：

@Entry
@Component
struct PaddingTest {
  build() {
    Column() {
      Row() {
        Text('边距测试')
          .fontSize(25)
      }
      .width('60%')
      // .margin(10)//四周外边距都设置为10
      .margin({ top: 80 })
      .backgroundColor('#ff66fcbb')
      .justifyContent(FlexAlign.Center) //水平居中
    }
    .height('80%')
    .width('100%')
    .backgroundColor('#fffda8a8')
  }
}

3. 优化后代码

设置好边距然后加上对齐方式的设置，优化后的代码如下：

import { router } from '@kit.ArkUI';

/**
 * 登录页面
 */
@Entry
@Component
struct Login {
  @State message: string = '宠物之家';

  build() {
    Column({ space: 20 }) {
      Image($r('app.media.cat'))
        .width(100)
        .borderRadius(20)
        .margin({ top: 100 })
      Text(this.message)
        .fontSize(38)
        .fontWeight(600)
      TextInput({ placeholder: '请输入登录账号' })
        .backgroundColor('#ffe0e0e0')
        .borderRadius(8)
        .width('85%')
        .height(50)
      TextInput({ placeholder: '请输入登录密码' })
        .backgroundColor('#ffe0e0e0')
        .borderRadius(8)
        .width('85%')
        .height(50)
      Row() {
        Button('登录')
          .width(90)
          .fontSize(20)
          .borderRadius(5)
        Button('注册')
          .width(90)
          .fontSize(20)
          .borderRadius(5)
      }
      .margin({ top: 80 })
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .height('100%')
    .width('100%')
  }
}