鸿蒙(HarmonyOS)应用开发实战：从零构建登录页UI

1. 环境准备与项目创建迈出第一步嘿朋友们我是老张一个在移动开发领域摸爬滚打了十来年的老码农。最近几年我花了大量时间在鸿蒙生态上看着它从无到有感觉就像当年看着安卓和iOS成长一样充满了机遇。今天咱们不聊那些高深莫测的分布式软总线或者原子化服务就从一个最接地气、每个应用都绕不开的环节开始——动手从零搭建一个登录页面UI。这不仅是学习鸿蒙应用开发的绝佳起点也是检验你对ArkUI这套声明式UI框架理解程度的试金石。别担心哪怕你之前只接触过一点点前端或者移动开发的概念跟着我的步骤走保准你能在半小时内看到一个像模像样的登录界面跑起来。首先咱们得把“厨房”收拾好也就是搭建开发环境。这事儿听起来可能有点枯燥但磨刀不误砍柴工一个顺畅的环境能让你后续的编码体验飞起。你需要准备一台Windows或者macOS的电脑然后去华为开发者联盟官网找到并下载最新版的DevEco Studio。这个IDE是鸿蒙应用开发的“官方指定武器”集成了代码编辑、预览、调试、打包发布等一系列功能用起来非常顺手。安装过程基本就是一路“下一步”但有几个关键点我得提醒你安装路径最好别带中文和空格避免一些潜在的玄学问题安装器会提示你同时安装Node.js和Ohpm鸿蒙的包管理器务必勾选上它们是项目构建和依赖管理的基石。安装完成后首次启动DevEco Studio它会引导你下载必要的SDK软件开发工具包。这里我建议你至少选择最新的API 9版本因为它包含了最稳定和丰富的ArkUI组件库。下载过程取决于你的网速泡杯茶的功夫应该就够了。环境就绪后咱们来创建新项目。打开DevEco Studio点击“Create Project”你会看到各种项目模板。对于咱们的登录页实战选择最基础的“Empty Ability”模板就足够了它提供了一个最纯净的起点。在项目配置页面注意几个地方“Project Name”可以起个直观的名字比如“HarmonyLoginDemo”“Bundle Name”是应用的唯一标识通常采用反向域名格式比如“com.example.harmonylogin”“Compile SDK”就选刚才下载的API 9“Model”选择“Stage”模型这是鸿蒙推荐的应用开发模型能力更现代。点击“Finish”你的第一个鸿蒙项目就诞生了项目创建成功后你会看到一个标准的目录结构。先别被那些文件夹吓到咱们今天只关注两个核心位置一个是entry/src/main/ets/pages/目录这里存放我们的页面代码另一个是entry/src/main/resources/base/media/或rawfile/目录这里存放图片等资源文件。我习惯先在rawfile/下创建一个images文件夹把咱们登录页要用到的Logo图标、社交登录的小图标比如微信、QQ、微博的图标都放进去。资源准备好舞台就搭好了接下来咱们正式进入编码环节。2. 理解ArkTS与声明式UI思维的转变在开始写代码之前我觉得有必要花点时间聊聊ArkTS和声明式UI这个核心概念。这对于从命令式UI比如Android的Java/KotlinXML或iOS的Swift/Objective-CStoryboard转过来的朋友尤其重要它代表了一种完全不同的构建用户界面的思维方式。简单来说声明式UI就是“你告诉我你想要什么样的界面我来负责把它画出来并保持同步”。你不再需要手动调用类似setText()、findViewById()这样的方法来更新UI状态。相反你通过一套描述性的语言ArkTS来定义UI应该长什么样并且将UI的形态与你的数据状态State绑定。当数据状态发生变化时UI会自动、高效地更新到对应的形态。这就像你用Markdown写文档你只需要声明“这是一级标题”、“这是一个列表”至于标题最终渲染成多大的字体、列表用什么符号由渲染引擎负责你无需操心。ArkTS是鸿蒙生态的主力应用开发语言它基于TypeScript带来了静态类型检查、更好的工程化支持和现代语法特性。在UI描述部分它看起来很像React的JSX或者Flutter的Widget树但语法更简洁。一个最基本的UI组件结构是这样的// 这是一个名为Index的页面组件 struct Index { // 组件内部的状态数据当它改变时UI会重新渲染 State message: string Hello World // build方法描述了UI的结构 build() { // Column是一个垂直排列的容器组件 Column() { // Text是一个文本显示组件其内容绑定到message状态 Text(this.message) .fontSize(30) .fontWeight(FontWeight.Bold) // Button是一个按钮组件点击时会改变message的状态 Button(Click me) .onClick(() { this.message Hello HarmonyOS! }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }你瞧代码非常直观。State装饰器标记了message是一个响应式状态。在build()方法里我们用Column、Text、Button这些组件像搭积木一样描述界面。当按钮被点击onClick事件处理函数更新了message的值由于Text组件的内容绑定了this.message鸿蒙的UI框架会自动检测到这个状态变化并只更新对应的Text组件将其显示内容刷新为“Hello HarmonyOS!”。整个过程我们完全没有手动操作任何UI元素实例。这种模式的巨大优势在于极高的开发效率和可维护性。UI逻辑和业务逻辑可以更清晰地分离代码更像是在声明“在什么数据下界面应该是什么样子”而不是冗长地一步步指挥界面该如何变化。对于咱们要做的登录页我们将大量运用这种思想将用户名、密码输入框的值、按钮的可用状态等都定义为状态然后让UI自动响应这些状态的变化。3. 登录页整体布局与结构搭建好了理论铺垫得差不多了咱们撸起袖子开始干首先在pages目录下我们新建一个文件就叫LoginPage.ets.ets是ArkTS文件的扩展名。这个文件将承载我们整个登录页面的所有代码。第一步定义页面的根组件。我们创建一个名为LoginPage的结构体struct它就是一个自定义组件。// LoginPage.ets struct LoginPage { // 我们暂时先不定义状态专注于布局 build() { // 页面的根布局容器我们使用Column实现垂直排列 Column() { // 这里将依次放入Logo区域、表单区域、其他登录方式区域 } .width(100%) // 宽度撑满父容器屏幕 .height(100%) // 高度撑满父容器屏幕 .backgroundColor(#F5F5F5) // 给整个页面设置一个浅灰色的背景 .justifyContent(FlexAlign.SpaceEvenly) // 主轴垂直方向子项均匀分布头尾留有空间 } }这里用到的Column是鸿蒙ArkUI中最常用的容器组件之一它将其所有子组件在垂直方向主轴上依次排列。我们通过链式调用.width(100%)和.height(100%)让它占据整个屏幕空间。.backgroundColor()设置了背景色。最关键的是.justifyContent(FlexAlign.SpaceEvenly)它定义了子组件在主轴垂直方向上的对齐方式。SpaceEvenly意味着所有子项均匀分布每个子项周围的空间相等这样我们的Logo、表单和底部区域就能在屏幕上获得舒适的间距。接下来我们把登录页拆解成三个主要的垂直区块分别对应三个Column作为根Column的子项。顶部Logo/标题区包含应用Logo和名称。中间表单区包含用户名/密码输入框、“记住密码”选项、登录按钮等。底部其他登录方式区包含分割线、提示文字和第三方登录图标。这种“从上到下”的垂直布局是Column的典型应用场景。在表单区内部我们可能会用到Row水平排列容器来布局“记住密码”和“快速注册”这样的并排元素。现在我们先搭建好这个骨架把三个占位区域放进去。struct LoginPage { build() { Column() { // 1. 顶部Logo/标题区 Column() { // 这里放Logo图片和App名称 } .width(80%) // 宽度设为屏幕的80%让两边有些留白 // 2. 中间表单区 Column() { // 这里放输入框、按钮等 } .width(90%) // 表单区稍宽一些 .padding(20) // 给表单区内部增加内边距让内容不紧贴边缘 .backgroundColor(Color.White) // 给表单区一个白色背景形成卡片效果 .borderRadius(16) // 设置圆角让白色背景看起来像一张卡片 // 3. 底部其他登录方式区 Column() { // 这里放“其他登录方式”提示和图标 } .width(80%) } .width(100%) .height(100%) .backgroundColor(#F5F5F5) .justifyContent(FlexAlign.SpaceEvenly) } }看通过嵌套Column并设置不同的宽度、背景色和圆角页面的层次感立刻就出来了。中间的表单区域有了一个白色的圆角卡片背景这在现代UI设计中非常常见能有效聚焦用户的视线。我们使用了.padding(20)来设置内边距这意味着这个Column内部的内容距离其边框会有20像素的空白避免内容挤在边上。borderRadius(16)则赋予了卡片圆润的边角视觉上更友好。这些样式属性的链式调用是ArkUI声明式语法的一大特色非常简洁明了。4. 填充内容图片、文本与输入框骨架有了现在开始“填充血肉”。我们先从最简单的顶部区域开始。4.1 Logo与标题假设我们已经把Logo图片比如logo.png放到了resources/base/media或entry/src/main/resources/rawfile/images/目录下。在鸿蒙中我们使用Image组件来加载图片通过$r或$rawfile来引用资源。// 顶部Logo/标题区 Column() { // 加载图片资源$r(app.media.logo) 是引用media目录资源的推荐方式 // 如果放在rawfile可以使用 $rawfile(images/logo.png) Image($r(app.media.logo)) .width(100) // 设置图片宽度 .height(100) // 设置图片高度 .objectFit(ImageFit.Contain) // 设置图片缩放模式保持比例完整显示在框内 // 应用名称文本 Text(智慧社区) .fontSize(28) .fontWeight(FontWeight.Medium) // 字体粗细 .margin({ top: 20 }) // 上边距与图片拉开距离 .fontColor(#333333) // 设置深灰色字体 } .alignItems(HorizontalAlign.Center) // 子组件在交叉轴水平方向居中对齐 .width(100%)这里有几个细节值得一说.objectFit(ImageFit.Contain)确保了图片在给定的100x100框内等比例缩放并完整显示不会变形。.margin({ top: 20 })是设置外边距的语法可以分别指定上、右、下、左四个方向的值例如{ top: 10, bottom: 10 }。最外层Column的.alignItems(HorizontalAlign.Center)属性非常重要它让这个Column里面的所有子组件图片和文本在水平方向上都居中对齐。这是实现区块内容居中的常用手法。4.2 表单输入框接下来是重头戏——表单区。我们需要两个输入框一个用于用户名/手机/邮箱一个用于密码。// 中间表单区 Column() { // 用户名输入框 TextInput({ placeholder: 请输入用户名/手机号/邮箱 }) .width(100%) // 宽度撑满父容器这个内层Column .height(48) .padding({ left: 16, right: 16 }) // 输入框内部文字与边框的间距 .borderRadius(24) // 设置很大的圆角形成胶囊形状 .backgroundColor(#FFFFFF) .border({ // 添加边框 width: 1, color: #E5E5E5, // 浅灰色边框 radius: 24 // 边框也需要圆角 }) .margin({ bottom: 20 }) // 下边距与下一个输入框分开 .type(InputType.Normal) .fontSize(16) // 密码输入框 TextInput({ placeholder: 请输入密码 }) .width(100%) .height(48) .padding({ left: 16, right: 16 }) .borderRadius(24) .backgroundColor(#FFFFFF) .border({ width: 1, color: #E5E5E5, radius: 24 }) .margin({ bottom: 25 }) .type(InputType.Password) // 关键设置为密码类型输入内容会显示为圆点 .fontSize(16) // 后续会在这里添加“记住密码”行和登录按钮 } .width(90%) .padding(20) .backgroundColor(Color.White) .borderRadius(16)代码看起来有点长但结构很清晰。两个TextInput组件除了placeholder提示文字和type类型不同其他样式几乎一样。这里我特意把样式写得详细一些是为了展示ArkUI强大的样式定制能力。我们创建了具有“胶囊”形状的输入框通过.borderRadius(24)并将半径设置为高度48的一半来实现。添加了淡淡的边框border来明确输入框的边界。密码输入框的.type(InputType.Password)是安全必备项它能自动将明文转换为掩码通常是圆点。在实际项目中我们肯定不希望重复编写这么多相同的样式代码。这时候ArkTS的Styles装饰器就派上用场了。我们可以把通用的输入框样式提取成一个可复用的样式函数// 在struct外部或内部定义可复用样式 Styles function capsuleInputStyle() { .width(100%) .height(48) .padding({ left: 16, right: 16 }) .borderRadius(24) .backgroundColor(#FFFFFF) .border({ width: 1, color: #E5E5E5, radius: 24 }) .margin({ bottom: 20 }) .fontSize(16) } // 在build方法中使用 struct LoginPage { build() { Column() { TextInput({ placeholder: 请输入用户名/手机号/邮箱 }) .capsuleInputStyle() // 直接应用样式 .type(InputType.Normal) TextInput({ placeholder: 请输入密码 }) .capsuleInputStyle() .margin({ bottom: 25 }) // 可以覆盖样式中的特定属性 .type(InputType.Password) } } }使用Styles能极大提升代码的整洁度和可维护性这是构建大型项目时必须掌握的特性。5. 交互元素按钮、状态与点击事件表单不能只有输入还得有交互。接下来我们在两个输入框下面添加“记住密码/快速注册”行和最重要的登录按钮。5.1 “记住密码”与“快速注册”这两个功能通常是并排显示的水平排列所以这里我们使用Row容器。// 在密码输入框下方添加 Row() { // 左侧记住密码通常是个复选框文字这里先用文字模拟 Text(记住密码) .fontSize(14) .fontColor(#666666) // 使用Blank()占位组件将两侧内容推到两端 Blank() // 右侧快速注册 Text(快速注册) .fontSize(14) .fontColor(#317AFF) // 品牌蓝色表示可点击 } .width(100%) .margin({ bottom: 30 }) // 与下面的按钮拉开距离Row默认是水平排列。Blank()是一个特殊的弹性占位组件它会占据所有剩余的空间从而把两端的Text推到最左边和最右边实现了“两端对齐”的效果。这是一种非常简洁的实现方式。当然更完善的“记住密码”应该是一个Toggle开关组件加上文字但为了聚焦核心流程我们这里先用Text代替。5.2 登录按钮与状态管理登录按钮是页面的视觉和交互焦点。我们需要考虑它的不同状态正常状态、禁用状态比如输入框为空时、点击效果。首先我们需要定义一些状态变量来驱动UI。struct LoginPage { // 使用State装饰器声明响应式状态变量 State username: string // 用户名输入框内容 State password: string // 密码输入框内容 State isAgree: boolean false // 假设有个“同意协议”的复选框默认未选中 // 计算属性登录按钮是否可用 get isLoginButtonDisabled(): boolean { // 当用户名、密码不为空且同意协议时按钮才可用 return this.username.trim() || this.password.trim() || !this.isAgree; } build() { Column() { // ... 之前的Logo和输入框代码 ... // “记住密码/快速注册”行 Row() { ... } // 登录按钮 Button(登录, { type: ButtonType.Capsule, stateEffect: true }) .width(100%) .height(48) .fontSize(18) .fontWeight(FontWeight.Medium) // 根据状态动态设置背景色和透明度 .backgroundColor(this.isLoginButtonDisabled ? #CCCCCC : #317AFF) .opacity(this.isLoginButtonDisabled ? 0.6 : 1) // 根据状态决定是否响应点击 .enabled(!this.isLoginButtonDisabled) // 点击事件处理 .onClick(() { // 这里执行登录的网络请求等业务逻辑 console.info(尝试登录用户名${this.username}); // 例如this.loginRequest(); }) .margin({ bottom: 20 }) // 可以再加一个“忘记密码”的链接 Text(忘记密码) .fontSize(14) .fontColor(#317AFF) .textAlign(TextAlign.Center) .width(100%) } } }这段代码包含了几个关键点状态驱动UIState装饰的username和password会与输入框的值双向绑定稍后修改输入框部分。isLoginButtonDisabled是一个根据其他状态计算得出的属性它决定了按钮的样式和可用性。动态样式按钮的.backgroundColor()和.opacity()属性值不再是固定的而是根据isLoginButtonDisabled这个布尔值动态变化。当禁用时显示灰色且半透明当可用时显示品牌蓝色且不透明。这是声明式UI的精髓——UI是状态的函数。交互反馈.enabled()方法直接控制了按钮是否可点击。.onClick()设置了点击事件回调函数在这里我们可以发起网络请求进行登录验证。按钮样式ButtonType.Capsule直接创建了一个胶囊形状的按钮与我们的输入框风格保持一致。stateEffect: true启用了按钮的按压态视觉反馈用户体验更好。现在我们需要回头修改输入框将它们与状态变量绑定起来。TextInput({ placeholder: 请输入用户名/手机号/邮箱, text: this.username }) .capsuleInputStyle() .type(InputType.Normal) .onChange((value: string) { // 当输入内容变化时更新状态 this.username value; }) TextInput({ placeholder: 请输入密码, text: this.password }) .capsuleInputStyle() .margin({ bottom: 25 }) .type(InputType.Password) .onChange((value: string) { this.password value; })通过text: this.username将输入框的显示值绑定到状态变量再通过.onChange事件监听输入变化并更新状态就完成了数据的双向绑定。现在当你在这两个输入框里打字时username和password状态会实时更新进而触发isLoginButtonDisabled重新计算最终导致登录按钮的样式和状态自动更新。整个过程是自动的、响应式的你不需要写任何更新UI的代码。6. 完善细节与其他登录方式主体功能完成后我们来打磨一下细节并添加“其他登录方式”区域让页面更完整。6.1 添加分割线与第三方登录图标在登录按钮和“其他登录方式”之间通常有一条美观的分割线上面有文字提示。// 在登录按钮和“忘记密码”之后底部其他登录方式区之前添加 Column() { // 使用Row实现“线-文字-线”的效果 Row() { // 左侧分割线 Divider() .vertical(false) // 水平分割线 .strokeWidth(1) .color(#E5E5E5) .width(30%) // 宽度占父容器30% // 中间文字 Text(其他方式登录) .fontSize(12) .fontColor(#999999) .margin({ left: 10, right: 10 }) // 文字与左右分割线有点间距 // 右侧分割线 Divider() .vertical(false) .strokeWidth(1) .color(#E5E5E5) .width(30%) } .width(100%) .alignItems(VerticalAlign.Center) // 垂直居中对齐 .justifyContent(FlexAlign.Center) // 水平居中对齐 // 第三方登录图标行 Row() { Image($rawfile(images/icon_wechat.png)) .width(40) .height(40) .borderRadius(20) // 圆形图标 .onClick(() { console.info(微信登录); }) Image($rawfile(images/icon_qq.png)) .width(40) .height(40) .borderRadius(20) .margin({ left: 30, right: 30 }) // 图标之间的间距 .onClick(() { console.info(QQ登录); }) Image($rawfile(images/icon_weibo.png)) .width(40) .height(40) .borderRadius(20) .onClick(() { console.info(微博登录); }) } .width(100%) .margin({ top: 20 }) .justifyContent(FlexAlign.Center) // 图标水平居中 } .width(80%) .margin({ top: 40 })这里用了一个小技巧用一个Row包裹两个Divider和一个Text并通过设置Divider的宽度为百分比配合justifyContent(FlexAlign.Center)和文字的左右边距实现了经典的“两侧分割线中间文字”的视觉效果。下方的图标行同样使用Row并设置justifyContent(FlexAlign.Center)来水平居中。每个Image都添加了.onClick事件为后续集成第三方登录SDK预留了入口。.borderRadius(20)将方形图片裁剪成了圆形这是社交图标常见的样式。6.2 添加用户协议复选框在实际的登录页中用户协议复选框几乎是标配。我们把它加在登录按钮上方。// 在登录按钮上方添加 Row() { // 复选框可以使用Toggle组件这里用Text模拟一个简单的 // 实际开发中建议使用 Toggle({ type: ToggleType.Checkbox }) Text(this.isAgree ? ☑ : ☐) .fontSize(16) .fontColor(#317AFF) .onClick(() { this.isAgree !this.isAgree; // 点击切换状态 }) Text( 我已阅读并同意《用户协议》和《隐私政策》) .fontSize(12) .fontColor(#666666) .onClick(() { // 点击文字也可以勾选并跳转到协议页面 this.isAgree !this.isAgree; }) } .width(100%) .alignItems(VerticalAlign.Center) // 垂直方向居中对齐 .margin({ bottom: 15 })这里我们用了一个简单的Text来模拟复选框通过点击切换isAgree状态并显示不同的字符☑ 或 ☐。isAgree状态之前我们已经定义并用于控制登录按钮的可用性。整个Row的.alignItems(VerticalAlign.Center)确保了左侧的“复选框”和右侧的文字在垂直方向上是居中对齐的看起来更协调。将协议文字也设置为可点击是提升用户体验的一个小细节。7. 预览、调试与样式优化代码写完了怎么看到效果呢DevEco Studio 提供了强大的实时预览Previewer功能。你可以在LoginPage.ets文件右上角点击预览图标或者直接运行应用到模拟器/真机上。在预览器中你可以实时查看UI效果修改代码并保存后预览器会热更新几乎立刻看到变化。交互测试可以直接在预览的界面上点击按钮、输入文字测试交互逻辑。多设备预览可以切换不同的手机、平板等设备型号查看UI在不同屏幕尺寸下的适配情况。调试时console.info()或console.log()输出的日志可以在 DevEco Studio 的“Log”窗口查看这对于追踪按钮点击、网络请求等事件非常有用。如果发现UI在某些小屏手机上布局错乱我们就需要用到Flex布局的更多属性或者媒体查询来进行响应式调整。例如我们可以通过设置根Column的.padding()来确保在非常宽的屏幕上内容也不会贴边。Column() { // ... 所有子内容 ... } .width(100%) .height(100%) .backgroundColor(#F5F5F5) .justifyContent(FlexAlign.SpaceEvenly) .padding({ left: 24, right: 24 }) // 增加左右内边距作为安全区域对于更复杂的响应式需求可以使用ohos.mediaquery模块来获取屏幕信息并动态应用不同的样式。不过对于这个登录页简单的百分比宽度和弹性布局已经足够应对大部分场景。最后关于样式代码的组织我强烈建议将颜色值、字体大小、圆角尺寸等设计令牌Design Tokens提取成常量。这不仅能保持整个应用风格统一也便于后期主题切换或暗色模式适配。// 在文件顶部或一个单独的样式常量文件中定义 const COLOR_PRIMARY #317AFF; const COLOR_TEXT_PRIMARY #333333; const COLOR_TEXT_SECONDARY #666666; const COLOR_BORDER #E5E5E5; const RADIUS_LARGE 24; const FONT_SIZE_TITLE 28; // 在组件中使用 Text(智慧社区) .fontSize(FONT_SIZE_TITLE) .fontColor(COLOR_TEXT_PRIMARY) Button(登录) .backgroundColor(COLOR_PRIMARY)把这些零散的点都做好一个美观、交互完整、代码结构清晰的鸿蒙登录页面就真正完成了。从环境搭建到布局思想从基础组件到状态管理再到细节打磨这个过程几乎涵盖了鸿蒙UI开发最核心的基础知识。多练习几遍你就能举一反三用类似的思路去构建更复杂的应用界面了。