企业官网建设流程全解析

引言

实际开发页面时，需要先设定页面布局结构，再分析页面元素构成，然后选择合适组件配置属性，控制各个元素的位置、大小和展示效果。本节课将以登录页面为例，系统讲解 HarmonyOS 中Image、Text、TextInput、Button四个基础 UI 组件的使用方法。

核心内容

登录页面布局分析

登录页面整体使用垂直Column容器布局，水平排列的组合组件需要嵌套Row容器实现，从上到下依次排布各类 UI 元素。

布局结构代码框架：

build() { Column() { Image(...) Text(...) Text(...) TextInput(...) TextInput(...) ... Row() { Text(...) Text(...) } ... Button(...) ... Row(...) { Button(...) Button(...) Button(...) } } }

核心基础组件：

Image 组件基础使用

Image组件用于渲染展示图片，支持加载本地资源图片和网络图片。

图片数据源设置

Image组件入参src为图片数据源，支持三种数据类型：

1. ResourceStr：可加载网络图片、本地资源图片

2. PixelMap：加载像素地图对象

3. DrawableDescriptor：加载可绘制对象描述符

加载网络图片需要在module.json5配置文件中添加网络访问权限；本地资源图片需要提前放置到项目resources目录下再引用。

// 加载网络图片 Image('https://xxxxxx') // 加载本地资源图片 Image($r('app.media.logo')) // PixelMap 方式加载 Image(pixelMapObject) // DrawableDescriptor 方式加载 Image((getContext().resourceManager.getDrawableDescriptor($r('app.media.icon').id)))

图片大小设置

width和height属性支持三种参数类型：

推荐优先使用Resource类型，便于统一维护。

// number 类型 Image($r('app.media.logo')) .width(78) .height(78) // string 类型 Image($r('app.media.logo')) .width('78vp') .height('78vp') // Resource 类型 Image($r('app.media.logo')) .width($r('app.float.logo_image_size')) .height($r('app.float.logo_image_size'))// number 类型 Image($r('app.media.logo')) .width(78) .height(78) // string 类型 Image($r('app.media.logo')) .width('78vp') .height('78vp') // Resource 类型 Image($r('app.media.logo')) .width($r('app.float.logo_image_size')) .height($r('app.float.logo_image_size'))

图片外边距设置

使用margin属性设置图片外间距，支持Margin、Length、LocalizedMargin三种参数类型：

// 四个方向外边距均为 20 Image($r('app.media.logo')) .width(78) .height(78) .margin(20) // 仅设置底部外边距为 20 Image($r('app.media.logo')) .width(78) .height(78) .margin({ bottom: 20 })

图片缩放类型

使用objectFit属性设置图片在指定宽高框内的缩放模式，共 6 种类型：

Text 组件基础使用

Text组件用于在界面展示一段文本信息，是开发中最常用的基础组件。

添加子组件 Span

Text支持添加Span作为子组件，实现同一文本块内不同样式的分段文本。

Span必须写在Text组件内才会显示，单独使用不会生效；如果同时给Text和Span配置文本内容，Span内容会覆盖Text的内容。

Text('我是Text') { Span('我是Span') } .padding(10) .borderWidth(1)

文本内容设置

入参content为要显示的文本内容，支持两种数据类型：

// string 类型 Text('登录界面') // Resource 类型 Text($r('app.string.login_page'))

文本样式设置

登录标题示例：

Text('登录界面') .fontSize(24) .fontWeight(FontWeight.Medium) .fontColor('#182431')

超长文本处理

textOverflow属性需要配合maxLines属性一起使用才会生效，单独设置不会生效，可实现超长文本省略号折叠效果。

Text('这是一段很长的文本内容') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis })

TextInput 组件基础使用

TextInput组件用于实现单行文本输入，可响应用户输入事件，获取用户输入内容。

核心属性

输入类型

账号输入框示例：

TextInput({ placeholder: '账号' }) .maxLength(11) .type(InputType.Number) .onChange((value: string) => { // 处理用户输入内容 this.account = value; })

Button 组件基础使用

Button组件用于响应用户点击操作，处理用户交互逻辑，常用于登录、提交等操作按钮。

按钮类型

通过type属性设置按钮类型：

胶囊按钮和圆形按钮也可以通过borderRadius属性自定义修改圆角大小。

按钮样式定制

Button('登录') .type(ButtonType.Capsule) .borderRadius(20) // 自定义圆角 .borderWidth(1) // 边框宽度 .borderColor('#007dff') // 边框颜色 .backgroundColor('#007dff') // 背景色 .fontSize(16) // 文本大小 .fontColor(Color.White) // 文本颜色 .onClick(() => { // 执行登录逻辑 this.login(); })

完整登录页面开发流程

1. 顶部区域：在根Column容器内，首先添加Image组件放置 App Logo，设置对应宽高和外边距；然后添加Text组件作为页面标题，设置字体粗细和大小，再添加小号Text作为描述文字，设置字体大小、颜色和外边距。

2. 账号密码输入区域：添加两个TextInput组件，分别实现账号和密码输入，对应设置placeholder提示文字、maxLength长度限制、输入类型，添加onChange输入回调获取输入内容。

3. 快捷链接区域：嵌套Row容器，放入两个Text组件分别对应“短信验证码登录”和“忘记密码”，通过设置水平对齐方式让两个文本居左居右分散对齐。

4. 操作按钮区域：添加Button组件实现登录按钮，设置按钮类型、背景色、文本样式，添加onClick点击事件绑定登录逻辑；在按钮下方添加Text组件实现注册账号入口。

5. 其他登录方式区域：使用Row容器放置三个第三方登录按钮，对于重复样式的按钮可以封装为公共方法批量调用，简化代码。

总结

本节课讲解了登录页面中用到的四个基础 UI 组件：

1. Image 组件：用于渲染展示图片，支持本地资源和网络图片加载。src支持ResourceStr、PixelMap、DrawableDescriptor三种类型；加载网络图片需在module.json5中添加网络访问权限；width/height支持number、string、Resource三种参数类型；objectFit提供 6 种缩放模式。

2. Text 组件：用于展示文本信息。支持嵌套Span实现富文本（Span必须写在Text内部）；textOverflow必须与maxLines配合使用；fontSize、fontWeight、fontColor、decoration等属性控制文本样式。

3. TextInput 组件：用于单行文本输入。placeholder设置提示文字，maxLength限制输入长度，type设置输入类型（Number/Password等），onChange获取输入内容。

4. Button 组件：用于响应用户点击。支持Capsule、Circle、Normal、RoundedRectangle四种类型；通过borderRadius、backgroundColor、fontSize等自定义样式；onClick绑定点击事件。