项目3 乐购圈应用

项目3乐购圈应用目录1项目描述2学习目标3知识图谱4技术准备5项目实施6项目小结7AI赋能1项目描述

创建一个乐购圈应用，主要包含3个核心界面，登录界面：提供账号密码登录、忘记密码和第三方登录（微信、QQ、微博）选项。主界面：展示轮播商品和好物推荐。我的界面：显示用户账号信息，提供我的订单、我的资讯、关注的人、好物收藏、我的优惠券和关于我们等设置选项。应用运行效果如图3-1、图3-2、图3-3所示。图3-1登录效果图图3-3我的界面效果图图3-2首页界面效果图2学习目标知识目标1.熟悉ArkUI基础组件的类型和使用方法2.掌握容器组件的布局方式3.理解路由的基本原理技能目标1.能够使用基础组件构建简单界面2.能够灵活使用容器组件进行布局素质目标1.具有良好的软件编码规范素养2.提升问题解决能力3知识图谱本项目所涉及的知识图谱，以“乐购圈APP”为核心，系统梳理了构建该项目的核心知识体系。图谱采用中心辐射式结构，在核心主题节点下延伸出三大模块，直观呈现了从ArkUI基础组件、ArkUI容器到ArkUI路由的完整学习路径。项目知识图谱如图3-4所示。图3-4

项目知识图谱4技术准备3.4.1ArkUI基础组件1.Text（文本组件）组件简介：Text组件是ArkUI中最基础、最常用的组件之一，用于在界面上展示各种文本信息。无论是页面标题、商品名称、价格标签，还是提示语、按钮文字，都离不开Text组件的支持。Text组件支持丰富的样式定制，包括字体、颜色、大小、粗细、对齐方式等，能够满足不同场景下的文本展示需求。其常见使用场景如下：•标题区：页面主标题/副标题•商品区：名称、价格、描述•交互区：按钮文字、标签、提示语•列表区：列表项内容、统计数字Text常用属性/事件说明如表3-1所示。4技术准备3.4.1ArkUI基础组件1.Text（文本组件）代码参见教材以下代码展示了Text组件的使用。它设置了文本内容“欢迎来到乐购圈”，并配置了字体大小（24）、加粗（Bold）、字体颜色（黑色）、最大显示行数（1行）和居中对齐，其运行效果图如图3-5所示。图3-5Text组件示例运行效果4技术准备2.Image（图片组件）组件简介：Image组件用于在界面上展示图片资源，是实现丰富视觉效果的关键。支持本地图片、网络图片、资源图片等多种来源。通过设置宽高、圆角、适应方式等属性，可以灵活适配各种UI需求。其常见使用场景如下：•品牌展示：AppLogo、闪屏页•内容呈现：商品主图、轮播图•用户互动：头像、图标按钮•视觉装饰：背景图、分割线、占位图Image组件常用属性/事件说明如表3-2所示。4技术准备3.4.1ArkUI基础组件2.Image（图片组件）代码参见教材以下代码展示了Image组件的使用。Image组件通过$r接口加载本地资源图片startIcon，位于resources/base/media目录下。其运行效果图如图3-6所示。图3-6

Image组件示例运行效果4技术准备3.Button（按钮组件）组件简介：Button组件用于触发用户操作，是交互设计的核心。支持多种样式和类型，如Circle（圆形按钮）、Normal（普通按钮）、Capsule（胶囊按钮）等。可自定义颜色、圆角、图标等，满足不同业务场景，ArkUI提供三种内置类型与完全自定义样式，可在登录、购买、弹窗确认等高频场景中快速落地。常见场景：•核心流程：登录、注册、提交、支付 •导航操作：页面跳转、返回、刷新 •列表交互：单项操作、批量处理 •弹窗确认：保存、删除、取消Button组件常用属性/事件说明如表3-3所示。4技术准备3.4.1ArkUI基础组件3.Button（按钮组件）代码参见教材以下代码展示了Button组件的使用。Button组件显示为“登录”，设置了胶囊形状（ButtonType.Capsule），宽度为100%，高度为48，字体颜色为白色，背景颜色为#0052D9。点击按钮时调用login方法，模拟异步登录操作，并在登录过程中禁用按钮（enabled属性设置为false）。其运行效果图如图3-7所示。图3-7Button组件示例运行效果4技术准备4.TextInput（输入框组件）组件简介：TextInput组件用于接收用户输入，是表单、搜索、登录等场景的基础。支持多种输入类型（文本、数字、密码等），可设置占位符、最大长度、校验规则等。常见场景：•身份认证：登录、注册、找回密码 •信息检索：顶部搜索栏、筛选条件 •资料编辑：昵称、手机号、收货地址 •内容互动：留言、评论、即时聊天TextInput组件常用属性/事件说明如表3-4所示。4技术准备3.4.1ArkUI基础组件4.TextInput（输入框组件）代码参见教材以下代码展示了TextInput组件的使用，主要用于输入用户名和密码。用户名输入框设置了普通输入类型（InputType.Normal），最大长度为20，宽度为100%，高度为48，占满整个容器宽度。密码输入框根据showPwd状态动态切换输入类型为普通或密码（InputType.Password），最大长度为16，同样设置宽度为100%，高度为48，并且支持一键切换密码可见性（showPasswordIcon(true)）。两个输入框均绑定了onChange事件，分别用于实时打印用户名和更新密码状态，实现动态交互功能。其运行效果图如图3-8所示。图3-8TextInput组件示例运行效果4技术准备3.4.2ArkUI容器组件1.Column、Row容器组件简介：Column和Row是ArkUI中最基础的布局容器，分别用于垂直和水平方向排列子组件。二者API完全一致，支持间距、对齐、边距等属性，是页面结构设计的基石。常见场景:•页面整体：登录页、设置页•卡片内部：头像、标题、按钮•表单：标签、输入框、提示•工具栏：图标、文字Column、Row组件常用属性/事件说明如表3-5所示。4技术准备1.Column、Row容器(代码参见教材)以下代码展示了如何通过Row和Column组件构建了一个用户资料卡片。Column作为主体布局，垂直堆叠卡片的头部、详细信息和操作按钮，整体宽度设为100%，并为Column设置了内边距和圆角背景。头部区域使用Row水平排列用户名和等级，通过space设置间距，alignItems实现垂直居中。详细信息通过嵌套的Column垂直排列文本，展示积分、注册时间和简介。操作按钮区域再次使用Row，通过layoutWeight等分按钮宽度，并设置间距，实现紧凑布局。其运行效果图如图3-9所示。图3-9Column、Row组件示例运行效果4技术准备2.Grid布局组件组件简介：Grid组件是ArkUI中用于实现二维网格布局的核心组件，可将一块矩形区域按行列切割成若干等大的“豆腐块”，每个块内可自由放置任意子组件。相比传统嵌套Row+Column，Grid仅需一次声明即可实现二维布局，Grid组件用于实现多行多列的网格布局，适合展示商品、快捷入口、功能分区等。支持自定义行列数、间距、边距等。常见场景：•「发现」页快捷入口：2列×N行，图标+文字；•功能分区：3×2宫格，每个格子放按钮+描述文字。Grid组件常用属性/事件说明如表3-6所示。4技术准备2.Grid布局组件

(代码参见教材)以下代码展示了Grid组件的两种布局方式：基础布局和不规则布局。基础布局通过columnsTemplate和rowsTemplate将网格划分为3列3行等宽等高，使用columnsGap和rowsGap设置行列间距。ForEach循环生成9个GridItem，每个GridItem包含一个居中的文本，背景色为蓝色。不规则布局则通过columnStart、columnEnd、rowStart和rowEnd属性，手动指定每个GridItem的行列范围，实现不同大小的格子，背景色分别为绿、橙、红。整个页面由Column包裹，设置了宽度和内边距。其运行效果图如图3-10所示。图3-10Grid组件布局示例运行效果4技术准备3.List组件List组件是ArkUI中用于展示纵向或横向可滚动数据列表的核心组件，广泛应用于商品列表、消息列表、订单列表等场景。它支持分割线、懒加载、下拉刷新等功能，能够满足不同业务需求，提供流畅的滚动体验。常见场景：•商品列表：展示商品信息，支持点击查看详情。•订单列表：展示用户订单，支持分页加载。•消息通知：展示系统消息或好友动态，支持懒加载。List组件常用属性/事件说明如表3-7所示。4技术准备3.List组件

(代码参见教材)以下代码展示了List组件的使用，构建了一个设置菜单列表。List组件通过ForEach循环渲染itemList数组中的每一项为一个ListItem。每个列表项由一个Row布局组成，包含一个圆形图标（显示序号）、文本（显示设置项名称）和一个右侧箭头。列表项设置了宽度、内边距、背景色、圆角和阴影，通过margin实现了分隔效果。其运行效果图如图3-11所示。图3-11List组件布局示例运行效果4技术准备4.Tabs组件组件简介：Tabs组件用于实现多页面切换，常见于底部导航栏或顶部分类切换，仅可包含子组件TabContent，以及渲染控制类型if/else和ForEach，并且if/else和ForEach下也仅支持TabContent，不支持自定义组件。每个Tab可自定义文字、图标、样式，并支持动态切换和事件监听功能。常见场景：•App底部主导航：如“发现”、“我的”•分类页：如电商分类导航•功能分区：如设置页的功能分区Tabs组件常用属性/事件说明表3-8所示。4技术准备4.Tabs组件续表4技术准备4.Tabs组件

(代码参见教材)以下代码展示了Tabs组件的使用，通过该组件构建了一个包含三个标签页（首页、分类、我的）的横向导航栏。Tabs组件通过tabBar属性定义了每个标签页的标题，并通过TabContent定义了每个标签页的内容区域。每个TabContent包含一个Column布局，用于显示标题和详细内容。Tabs组件设置了固定模式的导航栏（BarMode.Fixed），其宽度为100%，高度为56，并设置了300毫秒的动画时长。通过onChange事件，Tabs组件可以动态更新当前激活的标签页索引（currentIndex）。Tabs组件占满整个屏幕，整个页面背景色为浅灰色。其运行效果图如图3-12所示。图3-12Tabs组件布局示例运行效果4技术准备5.Swiper轮播图组件组件介绍：Swiper是一个用于展示轮播图或卡片切换的组件，支持自动播放、手动滑动、分页器显示等功能。它广泛应用于首页轮播广告、产品推荐、图片展示等场景，能够提供流畅的滑动体验和丰富的视觉效果。常见场景：首页轮播广告：展示多个广告图片，支持自动播放和手动切换。产品推荐：展示多个产品卡片，支持分页器指示当前页。图片展示：展示多个图片，支持循环播放和分页器。Swiper组件常用属性/事件说明如表3-9所示。4技术准备5.Swiper轮播图组件

(代码参见教材)以下代码展示了Swiper组件的使用，用于实现图片轮播功能。Swiper组件通过ForEach循环渲染images数组中的每张图片，每张图片使用Image组件显示，并设置了圆角（borderRadius）。Swiper组件配置了自动播放（autoPlay）、播放间隔（interval）、循环播放（loop）和指示器（indicator），并绑定了onChange事件来记录当前轮播的索引。整个Swiper组件被包裹在一个Column布局中，占满整个屏幕宽度和高度，顶部有10的外边距。其运行效果图如图3-13所示。图3-13Swiper组件布局示例运行效果4技术准备3.4.3ArkUI路由1.ArkUI路由机制简介在ArkU开发中，路由用于管理页面的跳转与导航。每个页面都可以通过路由API进行跳转、返回、替换等操作，实现App的多页面流程控制。ArkUI的路由机制本质上是对页面栈的管理，开发者可以灵活控制页面的入栈、出栈、参数传递等操作。2.路由配置文件说明在鸿蒙应用中，路由配置是通过JSON文件来定义的。路由配置文件指定了应用中所有页面的路径信息，是页面跳转的基础。main_pages.json文件定义了应用中所有页面的路径，src数组中的每个元素代表一个页面的相对路径，系统会根据这个配置自动建立路由映射关系。{"src":["pages/Index",//首页路径"pages/Detail",//详情页路径"pages/Profile",//个人资料页路径"pages/Settings"//设置页路径] }4技术准备3.页面跳转实现//1.pushUrl-最基本的页面跳转方法//会将新页面压入路由栈，保留当前页面router.pushUrl({url:'pages/Detail',params:{id:123}//可选参数})//2.replaceUrl-替换当前页面//会替换路由栈顶的页面，常用于登录页等场景router.replaceUrl({url:'pages/Login'})//3.back-返回上一页//可以返回到指定页面，或简单的返回上一页router.back()//简单返回router.back({url:'pages/Home'})//返回到指定页面//4.clear-清空路由栈//清空所有页面，常用于退出登录等场景router.clear()//5.getLength-获取路由栈深度//返回当前路由栈中的页面数量conststackLength=router.getLength()//6.getState-获取路由状态//返回包含路由栈信息的对象conststate=router.getState()4技术准备4.路由参数与页面通信（代码参见教材）ArkUI支持通过路由传递参数，实现页面间的数据通信。第一页(Index)包含文本输入框，用户输入内容后点击按钮跳转到第二页(Index2)，并将输入的文字作为参数传递；第二页接收并显示用户输入的消息，并提供返回按钮。效果如图3-14所示图3-14通过路由传递参数示例运行效果5项目实施3.5.1项目目录结构项目目录结构如图3-15所示。5项目实施3.5.2准备项目资源（代码实现参见教材）项目实施过程中，需要用到各种图片、颜色、尺寸、字符串资源，为了提高项目的可维护性和用户体验，本项目提前将这些资源准备并定义好，主要涉及以下1个文件夹和3个文件。1.图片资源将提供的图片文件复制到本项目的entry/src/main/resources/base/media文件夹下。2.颜色资源其所在文件为entry/src/main/resources/base/element/color.json。3.尺寸资源其所在文件为entry/src/main/resources/base/element/float.json。4.字符串资源其所在文件为entry/src/main/resources/base/element/string.json。5项目实施3.5.3创建常量和数据模型（代码实现参见教材）1.常量entry/src/main/ets/common/constants/CommonConstants.ets——常量2．数据模型（1）entry/src/main/ets/viewmodel/ItemData.ets——数据类型定义（2）entry/src/main/ets/viewmodel/MainViewModel.ets——获取数据5项目实施3.5.4构建自定义组件（代码实现参见教材）1.src/main/ets/view/Home.ets——主界面组件其效果如图3-16中的红框处所示。2.src/main/ets/view/Setting.ets——“我的”页面组件其效果图对应关系如图3-17中的红框处所示。图3-16主界面组件效果

图3-17我的界面组件效果5项目实施3.5.5项目实现1．登录界面实现entry/src/main/ets/pages/LoginPage.ets——实现乐购圈应