学习 ArkUI 核心组件构建徒步迹的用户界面基础一、前言ArkUI 是鸿蒙原生应用的声明式 UI 框架采用类似 SwiftUI 和 Jetpack Compose 的声明式编程范式。开发者只需描述 UI 的最终状态框架自动处理状态变化时的界面更新。本文将系统介绍 ArkUI 的基础组件包括布局容器、文本、图片、按钮、输入框等并结合徒步迹的实际场景演示用法。二、组件基础结构2.1 组件树ArkUI 中每个页面由组件树构成组件通过链式调用设置属性EntryComponentstruct ExamplePage{build(){Column(){// 父组件列布局Text(Hello)// 子组件1文本.fontSize(20)// 链式属性设置.fontColor(#333);Button(点击)// 子组件2按钮.onClick((){});}.width(100%)// 父组件属性.padding(16);}}2.2 组件分类ArkUI 组件按功能可分为布局组件Column、Row、Stack、Flex、Grid、List基础组件Text、Image、Button、TextInput、Slider展示组件Progress、LoadingProgress、Badge、Panel交互组件Dialog、Menu、Picker、DatePicker导航组件Navigation、Tab、NavRouter三、布局容器3.1 Column - 垂直布局Column 是最常用的垂直排列布局子组件从上到下排列// 徒步迹 - 个人中心头部布局Column(){// 头像Image($r(app.media.avatar)).width(80).height(80).borderRadius(40);// 用户名Text(徒步爱好者).fontSize(20).fontWeight(FontWeight.Bold).fontColor($r(app.color.text_primary));// 统计信息Text(累计徒步 86km).fontSize(14).fontColor($r(app.color.text_secondary));}.width(100%).alignItems(HorizontalAlign.Center)// 居中对齐.padding(24);3.2 Row - 水平布局Row 用于水平排列子组件// 徒步迹 - 今日概览统计行Row(){this.StatItem(,8,642,步数);this.StatItem(,5.2,距离);this.StatItem(,320,卡路里);}.width(100%).justifyContent(FlexAlign.SpaceAround);// 均匀分布3.3 Stack - 层叠布局Stack 用于组件叠加类似 CSS 的 position: absolute// 徒步迹 - 路线卡片顶部区域Stack(){// 背景图片Image($r(app.media.route_bg)).width(100%).height(140).objectFit(ImageFit.Cover);// 难度标签叠加在图片上Text(中等).fontSize(12).fontColor(Color.White).backgroundColor($r(app.color.warning_color)).padding({left:10,right:10,top:4,bottom:4}).borderRadius(10).position({top:8,right:8});// 绝对定位}.width(100%).height(140);3.4 Flex - 弹性布局Flex 提供了更灵活的布局控制Flex({direction:FlexDirection.Row,// 主轴方向wrap:FlexWrap.Wrap,// 是否换行justifyContent:FlexAlign.Center,// 主轴对齐alignItems:ItemAlign.Center,// 交叉轴对齐}){Text(标签1).padding(8).backgroundColor(#E8F5E9).borderRadius(4);Text(标签2).padding(8).backgroundColor(#E3F2FD).borderRadius(4);Text(标签3).padding(8).backgroundColor(#FFF3E0).borderRadius(4);}四、基础组件4.1 Text - 文本ArkUI 中最常用的文本组件// 基本用法Text(徒步迹).fontSize(24)// 字号.fontWeight(FontWeight.Bold)// 加粗.fontColor($r(app.color.primary_color));// 取色// 多行文本Text(这是一条风景优美的徒步路线沿途经过森林和溪流).fontSize(14).fontColor($r(app.color.text_secondary)).maxLines(2)// 最多2行.textOverflow({overflow:TextOverflow.Ellipsis});// 溢出省略// 富文本部分样式Text(){Span(徒步)// 内联片段.fontSize(16).fontColor($r(app.color.primary_color));Span(迹).fontSize(20).fontColor($r(app.color.accent_color));}4.2 Image - 图片// 加载资源图片Image($r(app.media.app_icon)).width(100).height(100).borderRadius(16).objectFit(ImageFit.Cover);// 裁剪模式// 加载网络图片需申请网络权限Image(https://example.com/photo.jpg).width(100%).height(200).objectFit(ImageFit.Cover);4.3 Button - 按钮// 文本按钮Button(开始徒步).width(200).height(48).backgroundColor($r(app.color.primary_color)).borderRadius(24).fontColor(Color.White).fontSize(16).onClick((){console.log(开始记录轨迹);});// 自定义内容按钮Button(){Row(){Image($r(app.media.app_icon)).width(18).height(18);Text(创建团队).fontSize(14).fontColor(Color.White);}.alignItems(HorizontalAlign.Center);}.width(90%).height(44).backgroundColor($r(app.color.primary_color)).borderRadius(22);4.4 TextInput - 文本输入框// 普通输入TextInput({placeholder:请输入手机号}).width(100%).height(48).backgroundColor(#F5F5F5).borderRadius(12).padding({left:16}).type(InputType.PhoneNumber)// 输入类型.maxLength(11)// 最大长度.onChange((value:string){console.log(输入:${value});});// 密码输入TextInput({placeholder:请输入密码}).width(100%).height(48).backgroundColor(#F5F5F5).borderRadius(12).padding({left:16}).type(InputType.Password)// 密码类型.showPasswordIcon(true);// 显示密码切换五、列表组件5.1 ForEach - 循环渲染Stateroutes:HikingRoute[][{id:1,name:香山徒步},{id:2,name:奥森公园},{id:3,name:百望山},];build(){Column(){ForEach(this.routes,(route:HikingRoute){Text(route.name).fontSize(16).padding(12).width(100%);},(route:HikingRoute)route.id.toString());}}5.2 List - 高效长列表List(){ForEach(this.routes,(route:HikingRoute){ListItem(){RouteCard({route:route});}},(route:HikingRoute)route.id.toString());}.divider({strokeWidth:1,color:#EEE})// 分割线.edgeEffect(EdgeEffect.Spring);// 弹性效果六、修饰符与链式调用ArkUI 采用链式调用来设置组件属性这是最常用的编程模式// 单行链式Text(徒步迹).fontSize(20).fontColor(#4CAF50).fontWeight(FontWeight.Bold);// 多行链式推荐可读性更好Text(徒步迹).fontSize(20).fontColor($r(app.color.primary_color)).fontWeight(FontWeight.Bold).margin({top:12,bottom:12}).padding({left:16,right:16}).backgroundColor(#F5F5F5).borderRadius(8).textAlign(TextAlign.Center).width(100%);七、实战徒步迹首页概览卡片综合运用所学组件实现徒步迹首页的今日概览卡片Componentstruct TodayOverview{Propsteps:number0;Propdistance:number0;Propcalories:number0;build(){Column(){Text(今日概览).fontSize(16).fontWeight(FontWeight.Medium).width(100%);Row(){// 步数Column(){Text().fontSize(28);Text(${this.steps}).fontSize(22).fontWeight(FontWeight.Bold);Text(步).fontSize(12).fontColor(#999);}.alignItems(HorizontalAlign.Center).layoutWeight(1);// 距离Column(){Text().fontSize(28);Text(${this.distance.toFixed(1)}).fontSize(22).fontWeight(FontWeight.Bold);Text(km).fontSize(12).fontColor(#999);}.alignItems(HorizontalAlign.Center).layoutWeight(1);// 卡路里Column(){Text().fontSize(28);Text(${this.calories}).fontSize(22).fontWeight(FontWeight.Bold);Text(kcal).fontSize(12).fontColor(#999);}.alignItems(HorizontalAlign.Center).layoutWeight(1);}.width(100%).margin({top:16}).padding(12);}.width(100%).padding(16).backgroundColor(Color.White).borderRadius(16);}}// 使用EntryComponentstruct HomePage{build(){Column(){TodayOverview({steps:8642,distance:5.2,calories:320});}.width(100%).height(100%).backgroundColor(#F5F5F5).padding(16);}}这段代码在 App 中的实际效果可以参考项目截图八、总结本文介绍了 ArkUI 的核心基础组件包括 Column、Row、Stack 布局容器Text、Image、Button、TextInput 等基础组件以及 ForEach、List 等列表组件。掌握这些组件后你已经可以构建大部分应用界面。下一篇文章我们将学习 Stage 模型和 UIAbility 的深入应用理解鸿蒙应用的运行机制。下一篇预告鸿蒙原生开发手机徒步迹 - Stage 模型与UIAbility详解有问题欢迎在评论区交流探讨。
