引言实际开发页面时需要先设定页面布局结构再分析页面元素构成然后选择合适组件配置属性控制各个元素的位置、大小和展示效果。本节课将以登录页面为例系统讲解 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渲染展示图片Text展示一段文本信息TextInput输入单行文本响应输入事件Button响应用户点击操作Image 组件基础使用Image组件用于渲染展示图片支持加载本地资源图片和网络图片。图片数据源设置Image组件入参src为图片数据源支持三种数据类型ResourceStr可加载网络图片、本地资源图片PixelMap加载像素地图对象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属性支持三种参数类型参数类型说明示例number默认单位为vp直接写数值即可.width(78)string需要显式指定单位.width(78vp)Resource从resources资源文件中读取配置值.width($r(app.float.logo_image_size))推荐优先使用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 种类型取值说明Contain保持宽高比缩放保证图片完整显示在显示边界内Cover保持宽高比缩放图片宽高都大于等于显示边界Auto根据图片原尺寸和组件尺寸自动缩放保持比例填充Fill拉伸图片充满整个显示边界ScaleDown保持宽高比缩小或保持原尺寸显示None按照图片原有尺寸原始显示Text 组件基础使用Text组件用于在界面展示一段文本信息是开发中最常用的基础组件。添加子组件 SpanText支持添加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))文本样式设置属性说明示例fontSize字体大小number默认单位为fp.fontSize(24)fontWeight字体粗细支持数值100~900步长100默认400和枚举.fontWeight(FontWeight.Medium)fontColor字体颜色支持Color枚举、十六进制、RGB/RGBA、Resource.fontColor(#182431)decoration文本装饰线无/删除线/下划线/上划线.decoration({ type: TextDecorationType.LineThrough })登录标题示例Text(登录界面) .fontSize(24) .fontWeight(FontWeight.Medium) .fontColor(#182431)超长文本处理textOverflow属性需要配合maxLines属性一起使用才会生效单独设置不会生效可实现超长文本省略号折叠效果。Text(这是一段很长的文本内容) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis })TextInput 组件基础使用TextInput组件用于实现单行文本输入可响应用户输入事件获取用户输入内容。核心属性属性说明placeholder设置输入框占位提示文字引导用户输入maxLength限制用户输入的最大字符数type指定输入框类型onChange输入事件回调获取用户输入内容输入类型取值说明InputType.Number仅允许输入数字适用于手机号输入InputType.Password密码类型输入内容会被遮挡账号输入框示例TextInput({ placeholder: 账号 }) .maxLength(11) .type(InputType.Number) .onChange((value: string) { // 处理用户输入内容 this.account value; })Button 组件基础使用Button组件用于响应用户点击操作处理用户交互逻辑常用于登录、提交等操作按钮。按钮类型通过type属性设置按钮类型取值说明ButtonType.Capsule胶囊按钮圆角自动等于按钮高度的一半ButtonType.Circle圆形按钮ButtonType.Normal普通按钮ButtonType.RoundedRectangle圆角矩形按钮胶囊按钮和圆形按钮也可以通过borderRadius属性自定义修改圆角大小。按钮样式定制Button(登录) .type(ButtonType.Capsule) .borderRadius(20) // 自定义圆角 .borderWidth(1) // 边框宽度 .borderColor(#007dff) // 边框颜色 .backgroundColor(#007dff) // 背景色 .fontSize(16) // 文本大小 .fontColor(Color.White) // 文本颜色 .onClick(() { // 执行登录逻辑 this.login(); })完整登录页面开发流程顶部区域在根Column容器内首先添加Image组件放置 App Logo设置对应宽高和外边距然后添加Text组件作为页面标题设置字体粗细和大小再添加小号Text作为描述文字设置字体大小、颜色和外边距。账号密码输入区域添加两个TextInput组件分别实现账号和密码输入对应设置placeholder提示文字、maxLength长度限制、输入类型添加onChange输入回调获取输入内容。快捷链接区域嵌套Row容器放入两个Text组件分别对应“短信验证码登录”和“忘记密码”通过设置水平对齐方式让两个文本居左居右分散对齐。操作按钮区域添加Button组件实现登录按钮设置按钮类型、背景色、文本样式添加onClick点击事件绑定登录逻辑在按钮下方添加Text组件实现注册账号入口。其他登录方式区域使用Row容器放置三个第三方登录按钮对于重复样式的按钮可以封装为公共方法批量调用简化代码。总结本节课讲解了登录页面中用到的四个基础 UI 组件Image 组件用于渲染展示图片支持本地资源和网络图片加载。src支持ResourceStr、PixelMap、DrawableDescriptor三种类型加载网络图片需在module.json5中添加网络访问权限width/height支持number、string、Resource三种参数类型objectFit提供 6 种缩放模式。Text 组件用于展示文本信息。支持嵌套Span实现富文本Span必须写在Text内部textOverflow必须与maxLines配合使用fontSize、fontWeight、fontColor、decoration等属性控制文本样式。TextInput 组件用于单行文本输入。placeholder设置提示文字maxLength限制输入长度type设置输入类型Number/Password等onChange获取输入内容。Button 组件用于响应用户点击。支持Capsule、Circle、Normal、RoundedRectangle四种类型通过borderRadius、backgroundColor、fontSize等自定义样式onClick绑定点击事件。