ArkUI实战：打造极简登录页面-CSDN博客

在鸿蒙应用开发的广袤天地里，ArkUI 就如同一位技艺精湛的工匠，为开发者们打造出通往用户界面的神奇桥梁。作为鸿蒙系统应用界面的核心 UI 开发框架，ArkUI 以其简洁的 UI 语法、丰富多样的 UI 组件、强大而灵动的动画机制以及灵活自如的事件交互等基础能力，成为开发者们实现创意的得力助手，满足了大家对 UI 界面开发的多样化需求，让无数精彩的应用界面得以诞生。

在日常使用的各类鸿蒙应用中，从简洁高效的办公应用，到绚丽多彩的娱乐应用，再到便捷实用的生活服务应用，ArkUI 的身影无处不在。它就像一个万能的魔法师，赋予每个应用独特的魅力和出色的用户体验。比如，在某款热门的音乐播放应用中，ArkUI 通过其强大的布局能力，将歌曲列表、播放控制按钮、歌词展示等元素巧妙地组合在一起，呈现出简洁而美观的界面，让用户能够轻松愉悦地享受音乐；又比如，在一款地图导航应用里，ArkUI 运用其丰富的组件和灵活的交互能力，实现了地图的流畅缩放、地点搜索、路线规划等功能，为用户的出行提供了极大的便利。

今天，我们就一起踏上探索之旅，通过使用 ArkUI 的布局容器和常用组件，构建一个简单却实用的登录页面。这个过程不仅能让我们深入了解 ArkUI 的强大功能，还能为我们日后开发更复杂、更精彩的鸿蒙应用奠定坚实的基础。

二、开发前准备

正所谓 “工欲善其事，必先利其器” ，在正式开启构建登录页面的奇妙之旅前，我们得先把开发工具 DevEco Studio 准备好。它就像是我们打造应用世界的魔法工坊，为我们提供了一系列强大的功能和便捷的操作，让我们能够高效地进行鸿蒙应用开发。

（一）DevEco Studio 的安装

下载安装包：首先，打开你常用的浏览器，前往华为开发者官网，在那找到 DevEco Studio 的下载专区，根据你电脑的操作系统（Windows 或者 Mac），下载对应的安装包。这个过程就像是在知识的宝库中挑选一件珍贵的工具，虽然简单，但却至关重要。

安装过程：下载完成后，找到下载的安装包，双击运行它。接下来，就会弹出安装向导，它会一步一步引导你完成安装。在选择安装路径时，你可以选择默认路径，如果你对电脑磁盘空间有特殊规划，也可以点击 “Browse...” 按钮，指定其他你喜欢的路径，但要注意路径中不要出现中文或特殊字符，以免在后续开发过程中出现不必要的麻烦。接着，在安装选项界面，按照推荐的勾选方式进行勾选，然后一路点击 “Next”，直到安装完成。最后，点击 “Finish”，完成安装。这个过程就像是按照地图的指引，一步步走向目的地，只要你跟着向导的指示走，就能顺利完成安装。

（二）DevEco Studio 的配置

启动与协议同意：安装完成后，双击桌面上的 DevEco Studio 图标，启动这个魔法工坊。首次运行时，它会弹出一个配置向导页面，在这里，你需要点击 “Agree”，同意相关的条款和协议，就像是你在开启一场冒险前，要签署一份冒险契约，表明你愿意遵守规则，开启这段奇妙的开发之旅。

Node.js 与 Ohpm 配置：接下来，进入基础配置环节，你需要设置 Node.js 与 Ohpm 的安装路径。Ohpm 是 Open Harmony Package Management 的缩写，它就像是一个高效的管家，帮助我们管理项目中的各种包。如果你的电脑上已经安装了 Node.js，并且版本符合要求，可以选择 “Local”，指定 node 目录即可；要是电脑上已经有 Node.js，但版本不一致，建议选择让工具重新安装，以确保开发环境的稳定性；如果电脑上对 Node.js 做了一些特殊的 options 配置，为了避免冲突，建议先移除配置。另外，安装目录中不要出现中文、特殊字符，建议使用默认路径，这样可以减少很多潜在的问题。

SDK 配置：点击 “Next”，进入 SDK 配置页面。在这里，你要设置 SDK 的安装路径，同样要注意不要出现中文和特殊字符，建议走默认路径。设置好路径后，点击 “Next”，会显示 “SDK License Agreement”，仔细阅读相关协议后，勾选 “Accept”，表示你接受这些协议。然后，点击 “Next” 进入配置预览页，在这里你可以对之前的配置项进行确认，确保一切都符合你的预期。确认完成后，点击 “Next”，等待配置自动下载完成。完成后，点击 “Finish”，此时 IDE 会进入欢迎页，这就意味着你已经成功配置好了开发环境，是不是很有成就感呢？

环境错误处理：在安装和配置的过程中，可能会遇到一些小插曲。比如，如果出现类似 “Node.js 配置异常” 的错误，一般是因为你本地原本的 Node.js 配置有问题。这时，你可以清理环境变量中对于 Node.js 的配置，然后再次打开 DevEco Studio，点击界面左下方的 “?” 按钮，选择 “Diagnose Development Environment”，即诊断开发环境选项，进入诊断页面。这里会提示你安装出现问题的选项，点击异常项后面的 “set it up now” 即可重新安装。只要你耐心地按照提示进行操作，就能解决这些小问题，让开发环境顺利搭建起来。

（三）新建 ArkUI 项目

当 DevEco Studio 安装和配置完成后，就可以新建一个 ArkUI 项目啦。这就像是在一片空白的画布上，准备开始绘制一幅美丽的画卷。

创建项目：打开 DevEco Studio，在欢迎页面中，点击 “Create New Project”，就像你在打开一本新的笔记本，准备开始记录新的故事。

选择模板：在弹出的 “New Project” 窗口中，选择应用模板中的 “Empty Ability” 模板。这个模板就像是一个简单的素描底稿，为我们提供了一个最基础的项目结构，让我们可以在这个基础上自由发挥，添加各种功能和组件。选择好模板后，点击 “Next”。

填写项目信息：接下来，填写项目信息。其中 “Project name” 是你给项目取的名字，就像是给你的孩子取一个独特的名字，让它在众多项目中脱颖而出；“Bundle name” 是项目的包名，它就像是项目的身份证号码，用于唯一标识你的项目；“Save location” 是项目的保存路径，你可以选择一个你方便找到的地方来保存这个项目。填写好这些信息后，点击 “Finish”，完成创建。如果在创建过程中，你的电脑安装了杀毒软件，可能会弹出拦截提示，这时你只需点击允许程序的所有操作，就可以让项目顺利创建啦。

完成以上步骤后，一个全新的 ArkUI 项目就创建成功了，接下来，我们就可以在这个项目中大展身手，使用 ArkUI 的布局容器和常用组件，构建我们期待已久的登录页面了。

三、认识布局容器

在构建登录页面的过程中，布局容器就像是房屋的框架结构，决定了各个组件的摆放位置和排列方式，是打造美观、实用界面的关键所在。接下来，我们就来深入了解一下 ArkUI 中常用的布局容器。

（一）线性布局（Row/Column）

线性布局是 ArkUI 中最基础、最常用的布局方式之一，就像排列整齐的队列，它通过 Row 和 Column 这两个线性容器来实现，能让子元素在水平或垂直方向上依次排列，清晰又有条理。其中，Row 容器如同一条水平的轨道，使子元素从左到右横向排列，它的主轴是水平方向，交叉轴为垂直方向；而 Column 容器则像一个垂直的通道，让子元素从上到下纵向排列，它的主轴为垂直方向，交叉轴是水平方向。

线性布局在各种界面场景中都有着广泛的应用，比如在登录页面中，我们可以使用 Column 容器将页面的各个部分，如标题、输入框、按钮等，从上到下依次排列，形成一个清晰的视觉层次结构，让用户能够一目了然地找到他们需要的信息和操作按钮；当我们需要在一行中展示一些相关的小元素，如登录页面中的验证码输入框和获取验证码按钮，就可以使用 Row 容器将它们横向排列在一起，既节省空间又方便用户操作。

下面，我们通过一段代码示例来看看线性布局在登录页面结构搭建中的实际作用：

@Entry

@Component

struct LoginPage {

build() {

Column() {

// 登录页面标题

Text('用户登录')

.fontSize(30)

.fontWeight(FontWeight.Bold)

.margin({ top: 50 })

// 账号输入框

Row() {

Text('账号:')

.width('25%')

.fontSize(18)

.textAlign(TextAlign.Right)

TextInput()

.width('70%')

.fontSize(18)

.placeholder('请输入账号')

}

.margin({ top: 30 })

// 密码输入框

Row() {

Text('密码:')

.width('25%')

.fontSize(18)

.textAlign(TextAlign.Right)

TextInput()

.width('70%')

.fontSize(18)

.placeholder('请输入密码')

.type(InputType.Password)

}

.margin({ top: 30 })

// 登录按钮

Button('登录')

.width('50%')

.height(50)

.fontSize(20)

.backgroundColor(Color.Blue)

.textColor(Color.White)

.margin({ top: 50 })

}

.width('100%')

.height('100%')

.alignItems(HorizontalAlign.Center)

}

在这段代码中，最外层使用 Column 容器，就像搭建了一个垂直的框架，将整个登录页面的元素都包含在其中。在 Column 容器内部，首先是一个显示 “用户登录” 的 Text 组件，它作为页面的标题，通过设置字体大小、粗细和上边距，使其在页面上方居中显示，非常醒目。接着，通过两个 Row 容器分别构建了账号和密码输入框的布局。在每个 Row 容器中，左边是显示 “账号:” 或 “密码:” 的 Text 组件，设置了宽度、字体大小和右对齐方式，使其整齐地排列在左侧；右边是 TextInput 组件，用于用户输入账号和密码，设置了宽度、字体大小、占位符等属性，方便用户操作。密码输入框还通过type(InputType.Password)设置为密码输入模式，保护用户密码安全。最后，是一个 “登录” 按钮，同样使用 Button 组件，并设置了按钮的宽度、高度、字体大小、背景颜色、文本颜色和上边距等属性，使其在页面下方居中显示，吸引用户点击。通过这种方式，利用线性布局的 Row 和 Column 容器，我们成功地搭建起了一个简单而清晰的登录页面结构。

（二）弹性布局（Flex）

弹性布局（Flex）就像是一个充满智慧的空间管理者，它为开发者提供了一种更加灵活、高效的方式来排列、对齐和分配容器中的子元素空间，能够轻松应对各种复杂的布局需求，尤其是在处理响应式设计和动态布局时，它的优势更加明显。

在弹性布局中，容器默认存在主轴与交叉轴。主轴是 Flex 组件布局方向的轴线，子元素默认沿着主轴排列；交叉轴则是垂直于主轴方向的轴线。我们可以通过设置参数direction来决定主轴的方向，从而灵活控制子组件的排列方向。例如，FlexDirection.Row表示主轴为水平方向，子组件从起始端沿着水平方向开始排布，就像一排整齐排列的士兵；FlexDirection.RowReverse则是主轴为水平方向，但子组件从终点端沿着相反的方向开始排布，顺序颠倒；FlexDirection.Column意味着主轴为垂直方向，子组件从起始端沿着垂直方向开始排布，如同瀑布般垂直落下；FlexDirection.ColumnReverse是主轴为垂直方向，子组件从终点端沿着相反方向开始排布。

弹性布局还支持单行布局和多行布局。默认情况下，Flex 容器中的子元素都排在一条线（又称 “轴线”）上，即单行布局。当子元素主轴尺寸之和大于容器主轴尺寸时，wrap属性就发挥作用了，它可以控制