HarmonyOS应用开发基础（中篇共上中下3篇）

项目4UIAbility应用组件AbilityKit程序框架服务详解——从Stage模型到组件导航的完整学习路径导学概述AbilityKit（程序框架服务）提供了应用程序开发和运行的应用模型，是系统为开发者提供的应用程序所需能力的抽象提炼。它提供了应用程序必备的组件和运行机制，使开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。UIAbility组件是一种包含UI的应用组件，主要用于和用户交互。本项目将详解UIAbility的相关内容，涵盖Stage应用模型、生命周期、启动模式、信息传递、页面跳转等核心知识。知识目标学习目标总览📚知识目标了解Stage应用模型理解UIAbility组件的概念理解UIAbility组件的生命周期理解UIAbility组件的启动模式掌握信息传递载体Want理解启动应用内的UIAbility组件理解UIAbility组件与UI的数据同步掌握组件导航实现页面跳转掌握页面路由实现页面跳转🎯能力目标根据UIAbility生命周期合理编写资源加载、释放及界面更新代码根据业务需求为UIAbility选择合适的启动模式使用继承提高面向对象中的程序扩展性和可维护性熟练运用Want在不同UIAbility间传递数据熟练使用组件导航实现复杂页面跳转效果准确配置和使用页面路由实现页面间跳转素质目标宏观分析素养培养从宏观角度分析和解决应用开发问题的素养，建立系统性思维能力数据安全意识培养数据管理和信息安全意识，在开发中注重数据保护与隐私合规探索实践精神培养对新技术的探索精神和勇于实践的能力，持续学习前沿技术任务1🎮摘菜小游戏任务描述：通过开发一款具有趣味性和交互性的摘菜小游戏，展示HarmonyOS应用开发中UIAbility组件的实际运用。通过startAbilityForResult()接口启动应用内的UIAbility并获取返回结果。用户能够从主界面进入菜园场景进行摘菜操作，完成摘菜后退出菜园（可再次进入菜园摘菜），并在主界面显示总共摘得的蔬菜数量。第一章必备知识4.1Stage应用模型4.1.1AbilityKit概述AbilityKit（程序框架服务）构建了应用开发与运行的核心应用模型，该模型是系统对开发者所需应用能力的抽象与提炼。AbilityKit向开发者提供了开发应用程序必不可少的组件以及运行机制。多Module开发通过HAP、HAR、HSP实现功能；HAP负责具体功能；HAR与HSP用于代码和资源共享。组件交互组件可相互跳转，实现功能模块切换；应用运行中可启动其他应用完成任务。跨设备流转借助跨端迁移和多端协同，实现设备间无缝衔接。AbilityKit能力范围与关系能力范围管理应用进程（创建、销毁）及调度生命周期提供应用组件运行入口，调度其生命周期并支持组件交互提供运行上下文，监听系统环境变化以适配调整支持应用跨设备/场景平滑流转提供多包、共享包及应用信息配置等能力具备程序访问控制及安全的密码自动填充能力与相关Kit的关系ArkUI在UIAbility组件中运用ArkUI的组件使用、事件处理、动画设置及状态管理等能力ArkTSArkTS的能力主要集中在语言运行时方面，为相关操作提供支持应用模型的构成要素应用模型是系统对应用能力的抽象提炼，涵盖必要组件及运行机制，助力开发者按统一标准开发，简化流程、提升效率。1应用组件作为应用基础单元和运行起点，有生命周期（状态转换）及回调函数。开发者需创建组件，编写回调函数并配置相关信息，系统依配置创建组件实例，调度回调以执行代码。2应用进程模型规定应用进程的创建、销毁及进程间通信方式。3应用线程模型定义进程内线程（含主线程、UI线程）的创建、销毁及线程间通信方式。4应用任务管理模型仅系统应用，定义任务的创建、销毁及与组件的关联；用户启动新组件实例时生成新任务，可在"最近任务"界面显示和切换。5应用配置文件含应用、组件、权限等信息，用于编译构建、分发及运行阶段。FA模型与Stage模型对比随着系统的演进发展，先后提供了两种应用模型。FA（FeatureAbility）模型从API7开始支持，已不再主推。Stage模型从API9开始新增，是目前主推且会长期演进的模型。核心区别：Stage模型中多个应用组件共享一个ArkTS引擎实例；FA模型中每个应用组件独立占有一个ArkTS引擎实例。这使Stage模型组件间共享对象和状态更简便，降低复杂应用运行时的内存占用。项目FA模型Stage模型应用组件分类PageAbility（含UI）、ServiceAbility（后台服务，无UI）、DataAbility（数据分享，无UI）UIAbility（含UI，用户交互）、ExtensionAbility（特定场景扩展能力）开发方式导出匿名对象，固定入口文件，不可派生，不利于扩展面向对象，类接口形式，可派生，利于扩展进程模型主进程、渲染进程主进程、ExtensionAbility进程、渲染进程ArkTS引擎实例每个组件独立引擎实例，不支持进程内对象共享所有组件共享一个引擎实例，支持进程内对象共享配置文件config.jsonapp.json5+module.json5Stage模型基本概念图4-1Stage模型概念图，展示了运行期概念（Context、UIAbility、WindowStage、Window、ArkUIPage等）和编译期概念（Application、HAP、App等）之间的继承、持有、对应关系。Stage模型核心组件详解1AbilityStageEntry/Feature类型HAP均拥有一个AbilityStage实例。HAP内代码初次加载时，系统优先创建AbilityStage实例，开发者可进行Module初始化操作。2UIAbility组件带UI的应用组件，核心功能是实现用户交互。生命周期包括创建、销毁、前台、后台等状态；界面相关状态通过WindowStage触发的事件反馈。3ExtensionAbility组件特定场景的应用组件，需使用派生类开发（如FormExtensionAbility、InputMethodExtensionAbility等），不可直接派生。4WindowStage每个UIAbility实例绑定一个WindowStage实例，作为窗口管理器负责管理多个Window的生命周期及布局，提供窗口大小调整、焦点管理等功能。5Context为开发者提供运行期间可调用的资源与能力。UIAbility和各类ExtensionAbility派生类都有对应的独特Context类，继承于基类Context。6Window和PageWindow是可视化窗口，承载Page，管理窗口状态和事件；Page是UI具体实现，渲染UI元素并处理用户交互。一个Window可承载多个Page。4.1.2Stage应用模型配置在进行应用开发的过程中，有必要对应用的某些标签加以配置，如应用的包名、图标等标识应用特征的属性。应用包名配置在AppScope/app.json5中配置bundleName标签，唯一标识应用。推荐反域名形式，如com.example.demo。图标和标签配置对应app.json5和module.json5中的icon和label标签。DevEcoStudio00起不再强制校验module.json5，两者选其一配置即可。版本声明配置在app.json5中配置versionCode（32位非负整数，数值越大越新）和versionName（版本号文字描述）。设备类型与权限在module.json5中配置deviceTypes和requestPermissions，声明支持的设备类型和所需权限。图标和标签的生成机制HAP中包含UIAbility时若在module.json5的abilities标签下配置了icon和label，且对应ability的skills标签中entities包含"entity.system.home"，actions包含"ohos.want.action.home"，系统优先返回module.json5中的配置。若存在多个满足条件的ability，系统优先返回mainElement对应ability的配置。若未配置上述条件，系统采用app.json5中的icon和label。HAP中不包含UIAbility系统将返回app.json5中的icon和label。管控规则：系统严格管控无图标应用，防止恶意应用隐藏桌面图标。预置应用需配置AllowAppDesktopIconHide特权；其他应用不支持隐藏桌面图标。图4-2应用场景效果图：桌面图标、应用列表、通知栏展示4.1.3应用上下文ContextContext是应用对象的上下文，提供resourceManager、applicationInfo等基础信息，以及createBundleContext、getApplicationContext等基本方法。图4-3各类Context的继承关系图4-4各类Context的持有关系Context的获取方式01UIAbilityContext在UIAbility中通过this.context获取，具备操作应用组件及获取配置信息等功能。02ExtensionContext如ServiceExtensionContext，从ExtensionContext继承，提供后台服务相关接口功能。03AbilityStageContextModule级别Context，额外提供HapModuleInfo、Configuration等信息。04ApplicationContext应用级Context，可在UIAbility、ExtensionAbility、AbilityStage中获取。新增订阅生命周期、环境变化、设置语言/颜色模式、清除数据、撤销权限等能力。Context典型使用场景：获取文件路径基类Context及各派生类均能获取文件路径，但路径级别不同。ApplicationContext获取应用级路径（应用卸载时删除）；AbilityStageContext、UIAbilityContext、ExtensionContext获取Module级路径（HAP/HSP卸载时删除）。属性说明ApplicationContext路径Module级Context路径bundleCodeDir安装包目录<路径前缀>/el1/bundle<路径前缀>/el1/bundlecacheDir缓存目录.../base/cache.../base/haps/<module>/cachefilesDir文件目录.../base/files.../base/haps/<module>/filespreferencesDirpreferences目录.../base/preferences.../base/haps/<module>/preferencestempDir临时目录.../base/temp.../base/haps/<module>/tempdatabaseDir数据库目录.../database.../database/<module>表4-2不同级别Context获取的应用文件路径说明【例4-1】获取文件路径创建项目FilesDir，在src/main/ets/pages/Index.ets文件中编写代码，通过上下文获取文件目录路径信息。编译运行后，查看日志可显示通过上下文获取的文件目录路径信息。import{UIAbility,AbilityConstant,Want}from'@kit.AbilityKit';exportdefaultclassEntryAbilityextendsUIAbility{onCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{letuiAbilityContext=this.context;//获取文件路径...}}图4-5运行结果日志信息4.1.4AbilityStage组件AbilityStage是承载Module层级组件的容器，当应用的HAP初次加载时，系统会自动创建一个对应的AbilityStage实例。AbilityStage与Module一一对应。新建目录在ets目录右击，选择New→Directory，新建myabilitystage目录新建文件在目录中选择New→ArkTSFile，新建MyAbilityStage.ets编写代码导入AbilityStage依赖包，自定义类继承AbilityStage并添加onCreate()回调配置入口在module.json5中配置srcEntry参数，指定HAP加载入口AbilityStage具备onCreate()生命周期回调函数，以及onAcceptWant()、onConfigurationUpdated()、onMemoryLevel()事件回调函数。第二章核心组件4.2UIAbility组件4.2.1UIAbility组件概述UIAbility组件内部集成了用户界面（UI），主要作用是实现与用户的交互功能。设计理念原生支持应用组件级的跨端迁移和多端协同支持多设备和多窗口形态划分原则UIAbility是系统调度基础单元，提供界面窗口，应用可包含一个或多个UIAbility。每个UIAbility实例在最近任务列表中对应一个任务。划分建议一个任务视图：推荐"一个UIAbility+多个页面"，减少资源加载，提升性能。多个任务/多窗口：宜用多个UIAbility，如即时通信应用将消息列表与音视频通话分设，支持任务切换和分屏。UIAbility声明配置在module.json5配置文件的abilities标签中声明UIAbility的名称、入口、标签等相关信息：{"module":{"abilities":[{"name":"EntryAbility","srcEntry":"./ets/entryability/EntryAbility.ets","description":"$r:string:EntryAbility_desc","icon":"$r:media:icon","label":"$r:string:EntryAbility_label","startWindowIcon":"$r:media:icon","startWindowBackground":"$r:color:start_window_background"}]}}4.2.2UIAbility组件生命周期UIAbility的生命周期由Create（创建）、Foreground（前台）、Background（后台）、Destroy（销毁）四个状态构成。图4-6UIAbility生命周期状态：Start→Create→Foreground↔Background→Destroy→End生命周期状态详解（上）1Create状态应用加载时，UIAbility实例创建完成触发，系统执行onCreate()回调。可在此执行页面初始化（定义变量、加载资源等），为后续UI展示做准备。2WindowStageCreate状态UIAbility创建后、进入Foreground前系统创建WindowStage，执行onWindowStageCreate()回调。可在此用loadContent()指定加载页面，调用on('windowStageEvent')订阅窗口事件。3WindowStageDestroy状态UIAbility销毁前先执行onWindowStageDestroy()回调，可在此释放UI资源。4WindowStageWillDestroy状态对应onWindowStageWillDestroy()回调，在WindowStage销毁前执行，此时WindowStage仍可使用。生命周期状态详解（下）Foreground状态UIAbility切换到前台触发，执行onForeground()回调。可申请资源或恢复onBackground()释放的资源。若为singleton模式且已创建，再次启动仅触发onNewWant()。Background状态UIAbility切换到后台触发，执行onBackground()回调。可释放无用资源或执行状态保存等耗时操作。例如定位功能可在此终止以节省资源。Destroy状态UIAbility实例销毁时触发，在onDestroy()回调中释放系统资源、保存数据。自API13起，用户通过最近任务一键清理关闭UIAbility时，不执行onDestroy()，直接终止进程。图4-7WindowStageCreate和WindowStageDestroy状态流程4.2.3UIAbility组件启动模式UIAbility的启动模式决定了实例在启动瞬间所展现的不同状态。系统提供了三种启动模式：singleton单实例模式系统默认模式。调用startAbility()时，若已存在该类型实例则复用。整个系统中该类型UIAbility仅有一个实例。配置：launchType:"singleton"multiton多实例模式每次调用startAbility()都创建新实例，最近任务列表显示多个同类型实例。配置：launchType:"multiton"specified指定实例模式为特定场景定制。如文档应用中新建文档创建新实例，重复打开已保存文档则用同一实例。配置：launchType:"specified"4.2.4UIAbility组件基本用法1.指定启动页面在onWindowStageCreate()回调中，利用WindowStage的loadContent()方法指定启动页面。若不指定，应用启动后将出现白屏。windowStage.loadContent('pages/Index',(err,data)=>{...});DevEcoStudio创建UIAbility时默认加载Index页面，可替换为自定义路径。2.获取上下文信息UIAbilityContext包含abilityInfo、currentHapModuleInfo等属性，可获取包代码路径、Bundle名称等信息，以及startAbility()、terminateSelf()等方法。在UIAbility中：letcontext=this.context;在页面中：privatecontext=getContext(this)ascommon.UIAbilityContext;终止实例：调用terminateSelf()方法。4.2.5Window及WindowStage窗口模块支持多个应用界面在同一屏幕同时展示并交互。对开发者提供界面展示与交互工具；对用户是操作应用的通道；对系统负责界面布局与管理。实例名接口名描述WindowStagegetMainWindow(callback)获取WindowStage实例下的主窗口（仅Stage模型）WindowStageloadContent(path,callback)为当前WindowStage的主窗口加载具体页面，path需添加到main_pages.json（仅Stage模型）WindowStagecreateSubWindow(name,callback)创建子窗口（仅Stage模型）表4-3窗口模块的常用接口说明4.2.6信息传递载体WantWant是应用组件间传递信息的对象，常作为startAbility()方法的参数。UIAbilityA启动UIAbilityB并传递数据时，可通过Want作为媒介。Want的类型：显式与隐式显式Want明确指定abilityName和bundleName。常用于启动应用内部组件，简便高效。letwantInfo:Want={deviceId:'',bundleName:'com.example.myapplication',abilityName:'FuncAbility',}隐式Want未指定abilityName。适用于处理对象不明确的场景，通过skills标签界定所需能力，由系统匹配支持的应用。letwantInfo:Want={action:'ohos.want.action.search',entities:['entity.system.browsable'],uri:':8080/query/student',type:'text/plain',};匹配结果：无匹配→提示无可用应用；一个匹配→直接启动；多个匹配→列表供用户选择。显式Want匹配规则名称类型匹配项必选规则deviceIdstring是否留空将仅匹配本设备内的应用组件bundleNamestring是是如果指定abilityName而不指定bundleName，则匹配失败moduleNamestring是否留空时同一应用内存在重名组件，默认匹配第一个abilityNamestring是是该字段必须设置表示显式匹配uri/type/actionstring否否系统匹配时忽略，但可作为参数传递给目标组件parametersObject否否不参与匹配，应用自定义数据直接传递给目标组件表4-3显式Want匹配原理表隐式Want匹配规则隐式Want匹配时，系统比对Want的action、entities、uri、type、parameters与组件skills的对应属性。图4-9Want参数的action匹配规则：Wantaction为空且skillsactions非空时匹配成功；action值需在skillsactions数组中存在。匹配核心逻辑action匹配：Wantaction为空且skillsactions非空→成功；action值在skillsactions中→成功entities匹配：Wantentities为空→成功；Wantentities必须是skillsentities的子集uri/type匹配：skills的uris数组中任一元素与Want的uri和type相符即成功linkFeature优先：parameters中linkFeature非空时优先匹配4.2.7启动应用内的UIAbility组件当应用内部涵盖多个UIAbility时，就会出现应用内启动UIAbility的情况。例如从入口UIAbility启动收付款功能的UIAbility。BuildWantCreateWantwithbundleNameandabilityName.CallstartAbility()InvokestartAbility()fromtheentryUIAbility.ReceiveinonCreate()TargetUIAbilityreadsparametersinonCreate().CallterminateSelf()FinishtheUIAbilitybycallingterminateSelf().在EntryAbility中调用startAbility()方法，Want包含bundleName、abilityName、moduleName（跨Module时）和parameters。在FuncAbility的onCreate()或onNewWant()中获取传递的参数。完成业务后调用terminateSelf()终止实例，或调用ApplicationContext.killAllProcesses()关闭所有进程。【例4-2】启动应用内的UIAbility新建项目StartAbility，创建两个页面和两个Ability：Page_UIAbilityComponentsInteractive.ets：包含一个按钮，点击时构造wantInfo对象并调用startAbility()启动FuncAbilityPage_FromStageModel.ets：包含文本和"结束UIAbility"按钮，点击后调用terminateSelf()终止自身在EntryAbility.ets中通过windowStage.loadContent()加载Page_UIAbilityComponentsInteractive；在FuncAbility.ets中加载Page_FromStageModel。图4-11点击左图按钮启动UIAbility跳转到右图启动UIAbility并获取返回结果当通过EntryAbility启动FuncAbility时，往往期望FuncAbility执行完业务后能把结果反馈给EntryAbility。例如帐号登录完成后回传登录结果。1EntryAbility调用startAbilityForResult()异步回调中的data用于接收FuncAbility返回的信息。通过data.want?.parameters?.info解析返回数据。2FuncAbility调用terminateSelfWithResult()传入abilityResult参数，包含需要反馈给EntryAbility的信息。RESULT_CODE必须与预设值一致。3EntryAbility接收返回信息通过startAbilityForResult()的回调机制接收返回信息，根据resultCode判断并处理结果。启动UIAbility的指定页面一个UIAbility能够关联多个页面，在不同场景下启动时要求展示不同页面。UIAbility的启动分为两种情况：UIAbility冷启动UIAbility实例处于彻底关闭状态下启动，必须全面加载并初始化代码、资源及其他相关内容。需要完整经历Create→WindowStageCreate→Foreground的生命周期流程。UIAbility热启动UIAbility实例先前已启动并处于前台运行，后切换至后台。再次启动时能够迅速恢复到之前的运行状态，无需重新加载资源。4.2.8UIAbility组件与UI的数据同步实现UIAbility组件与UI之间数据同步，可借助以下途径：EventHub数据通信在基类Context中设有EventHub对象，采用发布订阅模式实现事件传输。订阅者先完成订阅，发布者发布事件后，订阅者收到事件并做出处理。AppStorage/LocalStorage数据同步ArkUI推出的两种应用层面状态管理方式。AppStorage用于应用层面数据同步，LocalStorage用于UIAbility层面数据同步。任务1实施摘菜小游戏—实施思路与代码实施思路创建项目Resource2，在pages目录创建ToGreens.ets，在EntryAbility.ets中加载ToGreens页面。创建Greensability.ets和Greens.ets页面。ToGreens.ets定义页面组件，用户点击按钮启动GreensAbility，返回结果后更新计数信息。Greens.ets定义页面组件，用户点击图片模拟摘菜操作，每次点击隐藏图片并增加计数。点击"离开菜园"按钮返回ToGreens页面并传递摘菜数量。图4-12摘菜小游戏效果图拓展提升与思考感悟🔍拓展提升：在跨Ability数据传递时，可能会发生序列化，导致number类型被转换为字符串。因此，在接收端显式地进行类型转换（如使用Number()方法）是为了确保数据类型的正确性和操作的安全性。通过terminateSelfWithResult()实现跨Ability的数据传递和页面跳转。严谨，是编程的核心准则，也是通往成功的必由之路。运用UIAbility、Want等进行复杂交互功能的实现，每一处代码都如同精密仪器中的零件，必须严丝合缝。它锻炼了我们的逻辑思维，培养了我们一丝不苟的工作态度。兴趣则赋予我们前进的动力和创造力。任务2基于系统路由表实现页面跳转任务描述：应用软件经常需要实现页面跳转，甚至要跳转到不同模块（HSP/HAR）的页面。要求：不用配置不同跳转模块间的依赖。当发生页面跳转时，未跳转页面不会加载，已经加载过的页面不会再次加载。解决不同模块依赖耦合以及首页加载时间长的问题。第三章页面跳转4.3页面跳转4.3.1组件导航和页面路由概述应用内页面跳转可通过组件导航（Navigation）和页面路由（@ohos.router）实现。组件导航优势突出，能在组件内跳转，更灵活；跨端开发中多端部署能力强，可自如操作页面栈、运用多样动效，且生命周期支持更全面。因此，实现页面或组件内跳转建议优先选用组件导航。图4-13导航和路由架构差异：Router管理page处于stage下级；Navigation可挂载于page节点下，支持叠加与嵌套。Navigation架构优势灵活管理接口设计区分标题栏、内容区和工具栏，提升管理灵活性与UX动效实现能力路由容器开发者可自定义位置，支持全模态、半模态等场景，增强界面展示灵活性一多能力默认提供统一标题显示、页面切换及单双栏适配，减少基础功能搭建工作量丰富动效通过组件属性及共享元素动效实现页面切换，提供更灵活的选择，提升用户体验组件导航与页面路由能力对比业务场景NavigationRouter一多能力支持，Auto模式自适应单栏/双栏不支持跳转HSP/HAR页面支持支持跳转传参支持（对象形式）支持（对象中暂不支持方法变量）页面返回弹窗支持（路由拦截实现）showAlertBeforeBackPage清理指定路由removeByIndexes/removeByName不支持共享元素动画支持不支持路由拦截支持setInterception不支持沉浸式页面支持不支持，需通过window配置模态嵌套路由支持不支持表4-5组件导航和页面路由的能力对比（部分）4.3.2组件导航Navigation—显示模式Navigation是路由核心容器，有单栏、分栏、自适应三种显示模式，通过mode属性设置。单页面模式(Stack)NavigationMode.Stack，导航页与子页通过路由切换，一次只显示一个页面。分栏模式(Split)NavigationMode.Split，左侧导航页与右侧子页同时显示，适合大屏设备。自适应模式(Auto)NavigationMode.Auto（默认），宽度≥阈值用分栏，＜阈值用单栏。API10起阈值为600vp。标题栏、菜单栏与工具栏Mini模式标题栏普通型，适用于一级页面中对标题无须着重突出的场景。.titleMode(NavigationTitleMode.Mini)Full模式标题栏强调型，需要对标题进行重点突出。.titleMode(NavigationTitleMode.Full)工具栏底部工具栏，通过.toolbarConfiguration()属性设置。菜单栏竖屏最多3个图标，横屏最多5个。Navigation路由操作Navigation路由操作依赖页面栈NavPathStack，使用时需创建该对象传入以管理页面。API12起页面栈支持继承。1页面跳转(Push)普通跳转：pushPath/pushPathByName；带返回回调：添加onPop回调函数；带错误码：异步回调获取错误码。2页面返回(Pop)pop()返回上一页；popToName()返回指定页面；popToIndex()返回指定索引；clear()返回根首页。3页面替换(Replace)replacePath/replacePathByName将栈顶页面替换为目标页面；replaceDestination带错误码替换。4页面删除与移动删除：removeByName/removeByIndexes/removeByNavDestinationId；移动：moveToTop/moveIndexToTop将指定页面移至栈顶。5参数获取与路由拦截获取：getAllPathName/getParamByIndex/getParamByName；拦截：setInterception()设置willShow、didShow、modeChange回调。NavDestination子页面NavDestination是Navigation子页面的根容器，承载子页面特殊属性和生命周期。页面显示类型标准类型(STANDARD)默认类型，生命周期随在NavPathStack中的位置变动而改变。弹窗类型(DIALOG)以透明形式展示，不干扰下层标准类型NavDestination的显示效果与生命周期。图4-22NavDestination页面生命周期：aboutToAppear→onWillAppear→onAppear→onWillShow→onShown↔onHidden→onWillDisappear→onDisappear→aboutToDisappear跨包动态路由静态import页面后再执行路由跳转会引发不同模块间的依赖耦合，还会导致首页加载耗时较长。动态路由让多个模块（HAR/HSP）能够复用相同业务逻辑，达成各业务模块间的解耦。系统路由表API12起支持。各业务模块单独配置route_map.json；跳转时用NavPathStack传入页面配置名，系统自动完成模块动态加载、组件构建及跳转。使用简便。自定义路由表操作相对复杂，但能依据业务需求进行个性化定制。通过动态import加载目标模块，调用方法返回Builder函数实现跳转。两种方式支持混用。动态路由的优势：路由定义可添加扩展配置（横竖屏模式、鉴权等）；按页面名称而非文件路径跳转；页面可动态import按需加载，避免首屏卡顿。系统路由表配置步骤①添加路由表配置在跳转目标模块的module.json5中添加："routerMap":"$r:profile:route_map"②创建route_map.json在resources/base/profile目录下创建文件，配置name（页面名称）、pageSourceFile（页面路径）、buildFunction（入口函数名）、data（自定义字段）。③配置入口Builder函数在跳转目标页内配置@Builder修饰的入口函数，名称必须与route_map.json中的buildFunction完全一致。④实现页面跳转借助pushPathByName()等路由接口实现跳转。Navigation中无须配置navDestination属性。【例4-3】组件导航跳转新建项目Navigation，创建三个页面文件：Index.ets：首页组件，包含两个按钮。点击第一个跳转到EntryPageOne，点击第二个带参跳转到EntryPageTwo。通过NavPathStack实现。EntryPageOne.ets：显示"这是PageOne"文本和返回按钮，点击清空导航栈返回首页。EntryPageTwo.ets：显示"这是PageTwo"和从首页传递的参数（红色字体高亮），提供返回按钮。在module.json5中添加路由表配置，在route_map.json中定义pageOne和pageTwo的路由信息。图4-23点击左侧页面按钮导航转到中间和右侧页面4.3.3页面路由RouterRouter模块通过url实现页面路由。使用前需导入：import{router}from'@kit.ArkUI';router.pushUrl()目标页不替换当前页，添加到页面栈，当前页状态留存，可通过返回键或router.back返回。router.replaceUrl()目标页替换并销毁当前页，释放资源，无法返回当前页。Standard多实例模式默认模式，跳转目标页时均添加到页面栈顶，无论栈中是否已有相同URL页面。Single单实例模式若目标url在页面栈中，将离栈顶最近的同url页面移到栈顶；若不存在，按多实例模式跳转。【例4-4/4-5】页面路由跳转例4-4：基本跳转新建项目PageRouter，Index.ets包含按钮，点击调用router.pushUrl()跳转到DetailPage页面。图4-24点击按钮跳转到详情页例4-5：带参数跳转新建项目PageRouterWithParam，跳转时添加params属性传递参数。目标页通过router.getParams()获取参数。图4-25带参数跳转，红色信息为传递的参数数据页面返回用户在页面完成操作后，需返回上一页面或跳转至特定页面时，可借助页面返回功能。01方式一：返回上一页router.back();—返回页面栈中的上一个页面，上一页必须存在于页面栈中。02方式二：返回指定页面router.back({url:'pages/Home'});—返回指定路径页面。也可返回命名路由页面：router.back({url:'myPage'});03方式三：返回并传参router.back({url:'pages/Home',params:{info:'来自Home页'}});—目标页通过router.getParams()获取参数。页面返回前的询问框为避免用户误操作或丢失数据，有时需要在返回前弹出询问框让用户确认。系统默认询问框在调用router.back()前，通过router.showAlertBeforeBackPage()设置询问框信息。router.showAlertBeforeBackPage({message:'您还没有完成支付,确定要返回吗?'});router.back();用户点击"取消"停留当前页；点击"确认"触发router.back()执行跳转。自定义询问框通过调用promptAction.showDialog()方法或自行创建自定义弹窗来实现。这种方式能使询问框界面与系统默认不同，提升应用的用户体验，让用户获得更具个性化的交互感受。命名路由若期望跳转到共享包HAR或HSP内的页面，可借助router.pushNamedRoute()方法。为页面命名在共享包页面中，为@Entry修饰的组件设置routeName：@Entry({routeName:'myPage'})引入命名路由页面在跳转页面中导入：import'@ohos/library/src/main/ets/pages/Index';执行跳转调用router.pushNamedRoute({name:'myPage',params:{...}})实现跳转配置依赖在package.json5中配置："dependencies":{"@ohos/library":"file:../library"}任务2实施系统路由表跨模块跳转—实施思路创建entry、harA、harB、hspA、hspB五个模块，每个模块包含两个页面和独立的route_map.json路由配置。通过NavPathStack的pushPathByName()方法实现跨模块页面跳转，无需配置模块间依赖。运行结果与拓展图4-26通过按钮可以导航到各个模块页面（NavIndex→entryOne→harAOne→hspAOne）🔍拓展提升设计通用参数传递机制，允许页面间传递配置信息或用户输入数据对频繁访问的页面进行缓存，减少重新加载时间页面切换添加过渡动画（淡入淡出、滑动等），提升用户体验使用数组来明确列出各个页面的名称、源文件路径和构建函数。这种结构化的路由映射使得页面之间的导航逻辑更加清晰。清晰的学习目标，能赋予我们强大的动力，让学习之旅更有方向、更有意义。习题知识检测习题1选择题1关于Stage应用模型的描述，正确的是？A.旧版模型，兼容性支持B.通过UIAbility和WindowStage协同管理界面和窗口C.不支持多设备协同D.仅适用于单设备2选择题2Stage模型中，应用至少需包含哪个组件？A.ServiceAbilityB.UIAbilityC.DataAbilityD.FeatureAbility3选择题3UIAbility的生命周期包括？A.Create,Foreground,Background,DestroyB.Create,WindowStageCreate,WindowStageDestroy,DestroyC/D均不完整4选择题4在onCreate()回调中合理的操作？A.释放UI资源B.加载页面布局C.初始化变量和资源D.申请系统资源5选择题5关于WindowStage的描述，错误的是？A.窗口管理器B.loadContent()加载页面C.生命周期与UIAbility完全同步D.可订阅窗口事件6选择题6关于Navigation路由表配置的错误说法？A.routerMap指定B.buildFunction指定构建函数C.pageSourceFile必须指向@Entry组件D.name标识路由名称实训任务实训任务1实训一：UIAbility跳转与数据传递开发应用实现两个UIAbility间的跳转与数据传递。实现首页Index.ets和详情页Detail.ets；首页点击按钮调用startAbilityForResult()启动DetailAbility；通过Want携带参数跳转，详情页正确接收并显示；详情页提供输入框，用户输入后将内容返回首页显示。2实训二：组件导航实现登录跳转用Navigation实现从登录页跳转到信息页。首页开发登录界面（用户名/密码输入框+登录按钮），使用NavPathStack实现跳转并携带参数；信息页接收参数展示用户名、密码等内容，提供返回按钮。实训目的：理解UIAbility基本用法、掌握Want对象启动UIAbility、实现页面间数据传递和返回结果处理、配置页面路由表、使用Navigation和NavPathStack控制页面栈及跳转逻辑。项目5：ArkUI组件ArkUI（方舟UI框架）是应用UI开发的强大基石，提供简洁的UI语法、全面的功能（涵盖组件、布局、动画及交互事件）以及实时界面预览工具。从布局组件的多样选择（线性、弹性、层叠及栅格布局），到常用组件的丰富功能（文本显示、搜索框、单选框等），ArkUI为开发者提供了全面的设计工具，极大简化了开发流程，显著提升了开发效率。导学目标总览知识目标掌握不同布局组件的使用熟悉常用组件的功能及应用场景了解组件样式设置（标识、尺寸、位置、边框、文本、背景、透明度等）掌握像素单位及其转换方法理解弹窗组件类型（文本消息框、警告弹窗、自定义弹窗）学习空白填充与分隔器的使用掌握显隐控制与禁用控制了解Z序控制及浮层的使用能力目标根据需求选择合适布局组件，设计响应式界面熟练运用常用组件，构建功能丰富的用户界面对组件进行样式设置，达到预期视觉效果掌握像素单位转换，确保多设备适配性合理设计并实现弹窗组件，提升用户交互体验处理用户交互事件（显隐、禁用等）运用Z序控制和浮层技术解决堆叠顺序问题素质目标培养独立分析问题与实践动手能力培养独立思考、解决复杂问题与创新能力养成良好的职业素养任务3：社区党支部党建及事务处理App开发任务描述为提升社区党支部工作效率，本项目将围绕"社区党支部党建及事务处理App"的开发任务，分阶段、分步骤地讲解ArkUI组件的核心知识点与应用技巧。必备知识需具备扎实的ArkTS（方舟编程语言）编程基础，方可顺利完成本项目的各项开发任务。5.1布局组件概述在ArkUI中，布局的核心是使用特定的容器组件来管理UI元素的位置和尺寸，从而构建出完整的应用界面。一个高效的开发流程首先要明确整体的布局结构，然后根据需求选择合适的布局容器（如Column、Row等）来精确排列每个元素。ArkUI页面以Page为根节点，提供了Column、Row等多种布局组件来构建多样的界面结构。图5-1经典页面结构：页面以Page为根节点，Column作为主容器，内含Row、Text等子组件，Row下再嵌套Text、Image、List等，形成有序的分层结构。常见UI布局应用场景（表5-1）布局应用场景线性布局（Column、Row）适用于子元素沿单一垂直或水平方向线性排列的场景弹性布局（Flex）适用于需要子组件根据比例动态压缩或拉伸，以实现自适应空间分配的场景层叠布局（Stack）适用于需要将组件相互叠加显示的场景，如弹窗覆盖页面内容网格布局（GridRow、GridCol）实现响应式设计，通过模块化网格简化多设备适配流程相对布局（RelativeContainer）当页面元素分布复杂，需要通过锚点实现灵活对齐，以避免深层嵌套时使用网格布局（Grid、GridItem）需要精确控制子元素所占网格单元，以实现严格比例或均匀空间分配的场景，如相册、日历等5.1.1线性布局（Column/Row）图5-2线性布局元素排列示意图基本概念布局容器：承载并自动排列其内部子元素的容器组件主轴：Column的主轴是垂直方向；Row的主轴是水平方向交叉轴：与主轴垂直的轴线间距：子元素在主轴方向上的距离，通过space属性设置容器说明Column容器：纵向容器，主轴方向从上到下，交叉轴从左到右Row容器：横向容器，主轴方向从左到右，交叉轴从上到下线性布局常用属性（表5-2）容器属性/组件参数说明和例子space设置子元素在主轴方向上的间距。Column({space:20}){...}padding设置容器内边距。.padding({top:18,right:10,bottom:18,left:10})justifyContent设置子元素在主轴方向上的对齐方式，如居中、两端对齐等alignItems设置子元素在交叉轴方向上的对齐方式Blank组件自动填充主轴方向的剩余空间，常用于实现两端对齐布局。用法：Blank()layoutWeight按权重比例分配父容器在主轴方向上的剩余空间，设置后将忽略元素自身的尺寸Scroll组件当内容超出容器尺寸时，嵌套此组件可实现滚动查看效果。用法：Scroll(){Column(){...}}HorizontalAlignColumn容器子元素在水平方向（交叉轴方向）上的对齐方式VerticalAlignRow容器子元素在垂直方向（交叉轴方向）上的对齐方式【例5-1】社区党建及事务处理App登录界面图5-3社区党建及事务处理登录界面：通过垂直线性布局（Column）组合了标题、用户名输入行（Row+Text+TextInput）、密码输入行（Row+Text+TextInput）、登录按钮（Button）等功能入口，构建出典型的移动端登录流程。@Entry@ComponentstructIndex{build(){Column({space:20}){Text("社区党建及事务处理").fontSize(30).margin({Top:50})Row(){Text("用户名:").fontSize(26).width("35%")TextInput().width("65%").height(50).borderColor(Color.Grey).borderWidth(1).borderStyle(BorderStyle.Dotted).shadow(ShadowStyle.OUTER_DEFAULT_XS)}.margin({top:40,left:20,right:20})Row(){Text("密码:").fontSize(26).width("35%")TextInput().width("65%").height(50).type(InputType.Password).borderColor(Color.Grey).borderWidth(1).borderStyle(BorderStyle.Dotted).shadow(ShadowStyle.OUTER_DEFAULT_XS)}.margin({top:40,left:20,right:20})Button("登录").width("60%").height(50).fontSize(20).backgroundColor(Color.Red).backgroundBlurStyle(BlurStyle.Thin).margin({top:30})}.height('100%').width('100%')}}5.1.2弹性布局（Flex）图5-4Flex容器以水平方向为主轴的示意图弹性布局（FlexLayout）是一种高效的容器布局模型，其核心在于围绕主轴和交叉轴来对齐和分布容器内的项目。开发者可以灵活设定主轴的布局方向，使其成为水平（Row）或垂直（Column），所有项目将沿着设定的主轴方向进行排列，从而轻松实现对齐和空间分配效果，并能更好地适应不同尺寸的屏幕。FlexDirection.Row主轴为水平方向，子元素从起始端沿水平方向排布（默认值）FlexDirection.RowReverse子元素从终点端沿Row相反方向排布FlexDirection.Column主轴为垂直方向，子元素从上到下排布FlexDirection.ColumnReverse子元素从下到上沿Column相反方向排布弹性布局常用属性（表5-3）容器属性/组件参数说明和例子FlexDirection设置主轴是水平还是垂直排列。FlexDirection.Row（默认）：主轴为水平方向；FlexDirection.RowReverse：子元素从终点端沿Row相反方向排布FlexWrap定义当空间不足时，子组件是否需要换行显示FlexAlign控制子组件在主轴上的分布模式，如居中、两端对齐和均匀分布ItemAlign调整子组件在交叉轴上的对齐方式，如顶部对齐、居中或拉伸填充flexGrow设置父容器的剩余空间分配给此属性所在组件的比例，用于分配父组件的剩余空间flexShrink当父容器空间不足时，子元素的压缩比例【例5-3】社区党建App启动页面（Flex布局）图5-6社区党建及事务处理App启动页面：使用Flex布局（FlexDirection.Column+ItemAlign.Center）构建，包含志愿者艺术字图片、活动照片、活动时间地点文本及社区党支部落款。源代码放在Project05/Login01中。关键步骤在entry/src/main/ets/pages目录下新建GuidePage.ets页面（图5-7、图5-8）使用Flex布局编写界面，通过flexGrow属性分配各区域空间比例修改EntryAbility.ets中的windowStage.loadContent参数，将首页改为pages/GuidePage（图5-9）保存后重新构建项目（Shift+F9），重启App即可看到新启动页核心代码要点外层Flex容器：direction:FlexDirection.Column，alignItems:ItemAlign.Center内层Column容器：flexGrow(10)占据主要空间，放置两张图片活动信息Text：flexGrow(1)，marginbottom166党支部Text：letterSpacing(16)，flexGrow(1)新建页面操作步骤图5-7添加启动页面：在pages目录上右击，选择New→Page→EmptyPage图5-8新建页面：在Pagename输入框中输入"GuidePage"，语言选择ArkTS，点击Finish图5-9修改启动页面：将windowStage.loadContent的第一个参数改为'pages/GuidePage'5.1.3层叠布局（Stack）什么是层叠布局层叠布局（Stack）是一种特殊的容器布局方式，允许其子组件以相互重叠、层层叠加的形式进行展示。在Stack容器中，组件按照添加顺序依次入栈，后添加的子组件会覆盖在先添加的子组件之上。广泛应用于广告展示、卡片堆叠等需要丰富视觉层次的场景。9种对齐方式（alignContent）TopStart（左上）、Top（顶部居中）、TopEnd（右上）、Start（左侧居中）、Center（完全居中，默认值）、End（右侧居中）、BottomStart（左下）、Bottom（底部居中）、BottomEnd（右下）接口定义interfaceStackInterface{(value?:{alignContent?:Alignment}):StackAttribute;}注意事项两个子组件不能相互依赖作为锚点后声明的元素默认覆盖先声明的元素可通过zIndex属性精确控制层级顺序【例5-4】Stack布局优化启动页面图5-10应用Stack布局优化启动页面：原有启动页存在两个问题：一是"志愿者招募"文字与背景图片上下排列，缺乏美感；二是缺少"跳过"按钮。通过嵌套两层Stack布局解决：外层Stack（Alignment.BottomEnd）唯一目的是将"跳过"按钮精确固定在页面右下角。Button("跳过").margin({bottom:50,right:50})内层Stack（Alignment.TopEnd）用于美化布局，将"志愿者招募"艺术字图片叠加在主背景图的右上角，营造更具设计感的视觉效果。源代码及图片资源均放在Project05/Login02中。5.1.4栅格布局（GridRow/GridCol）什么是栅格布局栅格布局通过将页面划分为规律的列与行来辅助定位，能有效应对多尺寸、多设备的界面适配挑战，确保布局的规范性和一致性。由GridRow（栅格容器）和GridCol（栅格子组件）配合使用。核心：断点系统根据设备屏幕宽度（vp值）将设备分为xs、sm、md、lg、xl、xxl等不同尺寸类别。开发者可针对不同断点，为GridCol设置不同的span值（占据的列数），实现布局的自适应调整。例如，一个元素可以在小屏幕上占据3列，而在中等屏幕上占据4列。图5-11例5-5竖屏（3列）与横屏（4列）运行效果【例5-5】栅格布局动态渲染社区App工作内容使用栅格布局，动态渲染关于社区App工作内容名称和背景颜色的项目，根据设备屏幕宽度动态调整项目的显示大小，确保在不同设备上都有良好的演示效果。代码文件存放在Project05/GridRow中。GridRow({breakpoints:{value:['200vp','300vp','400vp','500vp','600vp'],reference:BreakpointsReference.WindowSize}}){ForEach(this.itemArray,(item:DataSource,index?)=>{GridCol({span:{xs:2,//最小宽度设备：占2列sm:3,//小宽度设备：占3列md:4,//中等宽度设备：占4列lg:6,//大宽度设备：占6列xl:8,//特大宽度设备：占8列xxl:12//超大宽度设备：占12列}}){Row(){Text(`${index}${item.itemName}`)}.width('100%').height('50vp')}.backgroundColor(item.bgColor)})}//自定义数据类classDataSource{publicitemNames:string=""//工作内容名称publicbgColor:ResourceColor=""//背景颜色}5.1.5网格布局（Grid/GridItem）什么是网格布局网格布局通过"行"与"列"划分出单元格来精确定位项目，适用于九宫格、日历等多样化设计。由Grid（容器）和GridItem（子项）构成，支持循环渲染和懒加载等高效处理方式。关键参数rowsTemplate/columnsTemplate：使用fr（分数单位）字符串（如'2fr1fr'）定义行列数量及大小比例rowStart/rowEnd/columnStart/columnEnd：GridItem精确指定起始和终止行列号，实现跨单元格布局rowsGap/columnsGap：设置网格的行列间距图5-12网格布局行列数量及占比示例Grid(){...}.rowsTemplate('2fr1fr1fr').columnsTemplate('2fr1fr1fr')思考感悟：数字华容道小游戏的设计是网格布局的绝佳实践案例。结构层面要求对网格布局原理有深入理解；体验层面需通过简洁色彩搭配、清晰视觉元素及平滑交互动画提升游戏可玩性。核心在于如何运用Grid构建N×N的可变棋盘，并与线性布局、层叠布局等巧妙嵌套，实现完整的游戏界面。5.1.6相对布局（RelativeContainer）什么是相对布局相对布局（RelativeContainer）允许其子组件根据相互之间的位置关系，或相对于父容器进行布局，通过减少组件的嵌套层级来优化复杂界面的性能。基本概念锚点：用于定位的参照基准，可以是父容器（默认ID为"container"）或其他兄弟组件。每个作为锚点的组件都必须通过id属性设置唯一的ID。注意：两个子组件不能相互依赖作为锚点。水平对齐：Start（起始）、Center（居中）、End（末端）垂直对齐：Top（顶部）、Center（居中）、Bottom（底部）图5-13相对布局示意图（数字华容道界面布局）图5-14相对布局对齐方式示意图【例5-6】数字华容道游戏界面（相对布局）图5-15数字华容道游戏界面：设置虚拟机宽度分辨率为1260px，高度分辨率为2720px，Density为520dpi，屏幕大小为6.82寸。源代码存放在Project05/NumberSliderPuzzle目录中。以组件按钮8的设计代码为例：Row(){Text('8',fontSize(30))}.justifyContent(FlexAlign.Center).backgroundColor('#a8b8b1').alignRules({top:{anchor:"Box7",align:VerticalAlign.Top},left:{anchor:"Box5",align:HorizontalAlign.Start}}).width(100).height(100).id("Box8").border({width:1,color:Color.White}).offset({x:10,y:20})按钮8的ID被设为"Box8"，通过alignRules属