申小豹-优快云博客

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之组件复用最佳实践

列表滚动（本例中的场景）：当应用需要展示大量数据的列表，并且用户进行滚动操作时，频繁创建和销毁列表项的视图可能导致卡顿和性能问题。在这种情况下，使用列表组件的组件复用机制可以重用已经创建的列表项视图，提高滚动的流畅度。动态布局更新：如果应用中的界面需要频繁地进行布局更新，例如根据用户的操作或数据变化动态改变视图结构和样式，重复创建和销毁视图可能导致频繁的布局计算，影响帧率。在这种情况下，使用组件复用可以避免不必要的视图创建和布局计算，提高性能。

2025-04-02 17:31:23 560

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之组件复用场景与方法详解

组件复用是优化用户界面性能，提升应用流畅度的一种重要手段，通过复用已存在的组件节点而非创建新的节点，从而确保UI线程的流畅性与响应速度。组件复用针对的是自定义组件，只要发生了相同自定义组件销毁和再创建的场景，都可以使用组件复用，例如滑动列表场景，会出现大量重复布局的创建，使用组件复用可以大幅度降低了因频繁创建与销毁组件带来的性能损耗。然而，面对复杂的业务场景或者布局嵌套的场景下，组件复用使用不当，可能会导致复用失效或者性能提升不能最大化。例如列表中存在多种布局形态的列表项，无法直接复用。

2025-04-02 15:37:32 698

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之页面间转场

页面间转场是用户从一个页面切换到另一个页面时的过程，一个无缝流畅的转场动效可以提升用户的交互体验。从主页到详情页、从列表页到结果页都需要去设置一些转场动效使得用户体验更加流畅。基于用户行为和应用设计模式，我们总结出了一些常见的转场场景，包括层级转场、搜索转场、新建转场、编辑转场、通用转场、跨应用转场。针对这些转场场景，根据“人因研究”（在 HarmonyOS 中，通过大量的人因研究为UX设计提供了系统性的科学指导），给各位开发者推荐一些适合本场景下转场动效，常见的转场动效有左右位移遮罩动效、一镜到底动效等。

2025-04-02 13:37:07 234

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之ArkUI动画

动画是应用开发中必不可少的部分，它可以使应用程序更加生动和易于互动，一方面可以提升用户体验、增强视觉吸引力，另一方面可以引导用户操作、提高信息传达效率。应用程序中，页面层级间的转场、点击交互、手势操控都可以添加动画。提升动画感知流畅度：使用合适的动画能力将UX设计视角转换为开发实现视角，并将设计师提供的动效转化为具体的代码实现。这样可以确保应用在实际使用中达到设计的预期效果，提升动画感知流畅度并提供良好的用户体验。提升动画运行流畅度：优化动画资源的加载和释放，避免内存泄漏和资源浪费；

2025-04-01 22:24:17 655

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之状态管理最佳实践

在声明式UI编程范式中，UI是应用程序状态的函数，应用程序状态的修改会更新相应的UI界面。ArkUI采用了 MVVM 模式，其中ViewModel将数据与视图绑定在一起，更新数据的时候直接更新视图。图1ArkUI的MVVM模式ArkUI提供了一系列装饰器实现ViewModel的能力，如 @Prop 、 @Link 、 @Provide 、 LocalStorage 等。当自定义组件内变量被装饰器装饰时变为状态变量，状态变量的改变会引起UI的渲染刷新。

2025-04-01 20:28:09 662

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之UI组件嵌套优化

本章节将从原理角度分析，通过ArkUI框架的执行流程，以及自定义组件的生命周期两个角度，来分析组件过度嵌套对性能的影响。如上图所示，自定义组件创建完成之后，在build函数执行之前，将先执行aboutToAppear()生命周期回调函数。执行完build函数后，还会有一些事件监听函数，例如可以使用onPageShow监听页面显示事件，onPageHide函数可以监听页面隐藏事件。最终在自定义组件析构销毁前执行aboutToDisappear函数。

2025-04-01 16:57:42 809

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之UI布局优化

而当触发按钮修改外层Column的宽度时，也就是触发重新绘制的情况下，给定容器宽高为固定值的性能远远优于未设置宽高和设置百分比宽高，这是由于对于未设置宽高以及设置百分比宽高的情况下，在外层容器宽高发生变化时，组件本身也会触发重新进行Measure的过程，对组件的宽高进行重新测算，导致其布局时间很长，而设置了固定宽高的组件，则不会经过这一过程，而是直接使用初次绘制时保留的节点大小数据，减少了测算的时间，这对于性能的提升是尤为明显的，尤其是当组件内的内容十分复杂的情况下。

2025-04-01 15:21:23 1006

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP性能优化之UI组件优化

图2自定义组件生命周期流程图如上图所示，自定义组件创建完成之后，在build函数执行之前，将先执行aboutToAppear()生命周期回调函数。此时若在该函数中执行耗时操作，将阻塞UI渲染，增加UI主线程负担。因此，应尽量避免在自定义组件的生命周期内执行高耗时操作。对于复杂计算的耗时场景，可以将计算结果进行缓存处理。对于不需要等待结果的高耗时任务，可以采用多线程处理该任务，通过并发的方式避免主线程阻塞。

2025-04-01 13:27:35 790

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP开发之应用架构设计(AOP应用切面编程设计)

切面编程（AOP）是一种通过预编译方式和运行期间动态代理实现程序功能的统一维护的技术。AOP的核心思想是将程序的关注点（concern）分离，通过在程序中插入代码来实现横切关注点（cross-cutting concerns），从而实现对业务逻辑的各个部分进行隔离，降低它们之间的耦合度，提高程序的可维护性和可重用性，同时提高了开发的效率。在AOP中，开发者可以通过定义切面（aspect）来封装横切关注点，而不需要直接修改业务逻辑代码。

2025-03-31 22:22:31 811

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP开发之应用架构设计(线程间通信)

线程间通信指的是并发多线程间存在的数据交换行为，目前已支持ArkTS、C++等开发语言，因此存在不同语言、不同线程的通信场景，接下来详细展开介绍。

2025-03-31 20:28:08 871

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP开发之应用架构设计(应用并发设计)

ArkTS是HarmonyOS APP的开发语言，它在保持TypeScript（简称TS）基本语法风格的基础上，一方面规范强化静态检查提升开发者代码的规范性；另一方面基于TypeScript增强了一些特性提升开发体验和执行效率，尤其是在并发能力上的提升。本文档主要面向HarmonyOS APP的设计人员或开发人员，介绍应用在并行任务方案设计过程中，可能会遇到的典型场景以及对应的推荐设计方案，同时给出了方案的关键点及参考案例。

2025-03-31 17:34:41 307

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP开发之应用架构设计(应用导航设计)

大型应用开发中，应用可能包含不同的业务模块，每个模块由不同的业务团队负责开发。该场景采用一个 Navigation 下多个 har/hsp 的架构，其中一个模块对应一个har/hsp。当多个har/hsp的UI组件存在相互跳转的业务需求时，将出现模块间相互依赖的问题。图1多har包间路由跳转耦合针对该场景，本文提供了一套基于Navigation的路由设计方案实现多模块路由管理和模块间解耦。并在该基础上，通过动态注册路由的方式，解决页面加载多个UI组件时启动速度变慢问题。

2025-03-31 15:53:52 537

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP开发之应用架构设计(模块化设计)

应用开发者需要根据自身技术架构选择适合的工程模块化模型，工程模块化模型也不是一成不变的，需要根据业务和技术架构的演进而演进。根据诉求在HAP、HAR和HSP三种类型中进行选择使用。对于具备独立运行和安装的模块只能选择HAP包，并将其作为Feature类型的HAP存在于App中；对于不具备独立特性部分，用户使用频率较少的模块，将其做成HSP按需加载模块存在于App中。对于需要共享的模块，只能采用HAR包，将其通过OHPM仓共享给其他工程使用。

2025-03-31 13:38:03 1045

原创【鸿蒙 5.0 实战开发】鸿蒙原生APP开发之应用架构设计(分层架构设计)

对于需要通过Ability承载的功能，可以设计为 Feature类型的HAP ，而对于不需要通过Ability承载的功能，根据是否需要实现按需加载，可以选择设计为 HAR 模块或者 HSP 模块，编译后对应HAR包或者HSP包。在产品定制层，开发者可以从不同设备对应的应用UX设计和功能两个维度，结合具体的业务场景，选择一次编译生成相同或者不同的HAP（或其组合）。当Entry类型的HAP和Feature类型的HAP被分发并部署到相应的设备时，他们所依赖的HSP也会一同被分发并部署到相应的设备上。

2025-03-30 21:49:18 906

原创【鸿蒙 5.0 实战开发】鸿蒙（设备场景适配）——折叠屏应用指南(二)

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（ NavDestination 的子组件），首页和非首页通过路由进行切换。新闻阅读、社交资讯、生活服务、电商、办公等类型的内容，在详情页浏览内容时，可以通过上滑隐藏标题栏、工具栏，下滑或停留超过一定时长恢复显示标题栏、工具栏的方式，提供更沉浸的浏览体验。此类场景下，建议通过页面内的“分屏”按钮触发任务分屏。

2025-03-30 20:21:03 339

原创【鸿蒙 5.0 实战开发】折叠屏应用指南(一)

应用使用沉浸广告时，建议沉浸广告的背景和广告内容元素分为多个图层，且为宽屏设备提供更长的背景图，或通过智能裁剪为不同宽度的设备裁剪出合适高度的背景图。应用内的页签、搜索、入口图标、广告图、列表、卡片、图片、内容模块等可以灵活地通过形变、延伸布局、重复布局、挪移布局、宫格布局、瀑布流布局等进行宽屏设备上的响应式适配，以达到较好的信息量和舒适的浏览体验。平板及更宽的设备上，应用需要适配自由窗口 (即可任意拖大、拖小、拖宽、拖窄) ，横屏时支持左右分屏，竖屏时支持上下分屏，且支持分屏比例的自由调节。

2025-03-30 19:12:09 919

原创【鸿蒙 5.0 实战开发】鸿蒙（设备场景适配）——折叠屏体验设计实践

折叠屏形态展开态：折叠屏设备完全展开后的形态。有更大的屏幕尺寸，可充分显示应用内容。折叠态：折叠屏设备折叠后的形态。折叠后屏幕尺寸变小。悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。体验设计点折叠屏相对于普通手机有两个明显的特点：可随时折叠展开、展开后屏幕变大。折叠态或悬停态下，屏幕被划分为2个显示区域，一个主要显示屏幕，一个次要显示屏幕。为了能够充分利用折叠屏的特点，提供良好的使用体验，折叠屏UX设计中需考虑如下体验诉求：体验连续。

2025-03-28 21:54:40 617

原创【鸿蒙 5.0 实战开发】鸿蒙（影音娱乐类）APP开发——在线短视频流畅切换

为了帮助开发者解决在应用中在线短视频快速切换时容易出现快速切换播放时延过长的问题，将提供对应场景的解决方案。视频播放框架AVPlayer和滑块视图容器Swiper进行短视频滑动轮播切换。绘制组件XComponent的Surface类型动态渲染视频流。

2025-03-28 20:46:37 768

原创【鸿蒙 5.0 实战开发】鸿蒙（出行导航类）APP开发——快捷触达的骑行体验

本场景解决方案主要面向涉及共享租赁、即时配送等场景的应用，以共享单车为案例，使用实况窗、地图导航、原生扫码等技术，为消费者的整个骑行流程带来更好的体验。当前用户想要完成骑行的整个流程，需要先找到应用，再找到功能入口，骑行完成后又需要再重复一遍步骤，对于用户来说操作多，流程繁琐。如果能从首页直接扫码直到解锁界面，换车也只需一步操作即可支付将大大提升用户体验。

2025-03-28 17:30:53 831

原创【鸿蒙 5.0 实战开发】鸿蒙（社交通讯类）APP开发——AI辅助图文内容高效编创

本场景主要实现社交通讯类应用的图文内容编创流程，在该过程中接入自由流转、服务互动等HarmonyOS特性能力。图文编创流程主要通过Photo Picker选取本地图片，然后对图片进行智能处理，同时也可使用自定义相机拍摄动图，最后进行文字编创时可进行自由流转接续编辑和跨端获取相册或者相机拍摄内容。

2025-03-28 15:09:03 563

原创【鸿蒙 5.0 实战开发】鸿蒙（新闻阅读类）APP开发——阅读器翻页效果实现

本文档主要面向小说应用的开发人员，指导开发者使用推荐的解决方案快速推进小说类应用的HarmonyOS适配工作。本文档立足于解决伙伴需求，提供了完整的小说类应用HarmonyOS实现方案，实现方案包括阅读器排版渲染、翻页动效实现（覆盖翻页、左右滑动翻页、上下滑动翻页）。本文档包括效果展示、场景说明、场景优化方案介绍等内容，关键能力的接入附带有详细的流程介绍和关键代码示例，力求为开发者的顺利接入提供最大程度的便捷。文字页面实现。

2025-03-28 13:46:23 955

原创【鸿蒙 5.0 实战开发】（新闻阅读类）APP开发——体验流畅的首页信息流

本场景解决方案主要面向于新闻类页面开发人员，指导开发者从零开始构建一个新闻类的首页面。主要包含地址选择、tabs和tabContent切换的动态图标和流畅动效、下拉刷新上拉加载、首页feed流等常见功能的实现及流畅体验。主要介绍了用户操作应用的主要流程，展示了用户进入首页通过页签切换页面内容，上拉加载和下拉刷新页面，从首页地址进入地址选择页更换地址等功能效果。实现应用的主要流程图运行效果图操作流程1. 获取地理位置的权限；2. 点击位置信息，跳转地址页，可修改当前位置信息；

2025-03-27 22:11:00 730

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（商务办公）

本文从目前流行的垂类市场中，选择商务办公类应用作为典型案例，详细介绍 “一多” 在实际开发中的应用。主要包含入口、备忘录、笔记汇总、笔记、日历等典型页面。核心功能：侧边栏显隐：监听断点变化，设置 SideBarContainer组件的SideBarContainerType属性或改变showSideBar属性参数，实现侧边栏根据不同断点显示隐藏及显示类型的变化。

2025-03-27 20:26:19 942 2

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（便捷生活）

本文从目前流行的垂类市场中，选择便捷生活类应用作为典型案例详细介绍“一多”在实际开发中的应用。一多便捷生活应用包含首页展示、商品展示、图文详情、视频浏览等功能。根据这些核心功能，本文选择美食列表页、店铺页、商品详情页、图文详情页、视频页等作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现便捷生活应用的相关功能。店铺页，多端适配不同形态的弹窗用以进行商品规格的选择，贴合用户交互习惯。

2025-03-27 17:27:48 619

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（地图导航）

本文从目前流行的垂类市场中，选择地图行业应用作为典型案例详细介绍 “一多” 在实际开发中的应用。地图行业核心功能为定位、导航和打车等。根据这些核心功能，本文选择首页、路线规划页、服务卡片页、实况窗页等作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现地图导航应用的相关功能。首页为了减少面板对地图的遮挡，采用手机端使用底部面板，而折叠屏展开态使用侧边面板的方式展示功能入口。

2025-03-27 15:11:28 253

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（旅行订票）

本文从目前流行的垂类市场中，选择旅行订票垂类作为典型案例详细介绍 “一多” 在实际开发中的应用。本文选择首页、时间选择页、查询车票页、填写购票信息页、提交订单页等11个典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现地图导航应用的相关功能。首页支持沉浸式浏览，将整个界面设置背景图，同时设置全屏显示，使用户阅读时有更加沉浸的体验。时间选择及低价日历页根据设备不同有更好的体验效果，手机支持页面跳转，其他大屏设备支持日历弹窗。

2025-03-27 13:34:32 763

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（音乐）

本文将介绍如何将“一次开发，多端部署”应用到音乐播放器的实际开发过程中。音乐播放器是现在较为流行的大众娱乐应用，本文用作示例的音乐应用主要展示播放页在手机、折叠屏、平板和2in1四种产品形态上的“一次开发，多端部署”，在保障基本用户体验的同时，根据不同产品形态特性，适配相应的浏览和交互功能。下文将以架构设计、UX设计和页面开发三个章节来介绍“一多”音乐播放器在开发过程中的最佳实践。

2025-03-26 21:55:24 481

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（移动支付）

本文从目前流行的垂类市场中，选择移动支付应用作为典型案例详细介绍 “一多” 在实际开发中的应用，同时提供该垂类应用在多设备上的界面设计与实现参考。本文选择移动支付首页作为典型页面进行开发，涉及的核心功能包括支付、收款、扫码等。扫一扫功能实现。收付款功能实现。下面的章节将分别从 UX设计、架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”移动支付应用在开发过程中的最佳实践。

2025-03-26 20:25:00 881

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（股票类）

本文从目前流行的垂类市场中，选择股票类应用作为典型案例，详细介绍 “一多在实际开发中的应用。主要包含首页、资讯、自选股、个股详情、行情等9个典型页面。核心功能：分栏布局：分栏布局通过 Navigation 实现，在断点为lg时设置mode属性为NavigationMode.Stack，实现单栏效果，在其他断点下设置mode属性为NavigationMode.Split，实现分栏效果。宫格卡片的多股同列：用网格布局 Grid组件，在不同断点下将父组件分为不同列数，来实现自适应布局的占比能力。

2025-03-26 17:04:45 618

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（图片美化）

本文从目前流行的垂类市场中，选择图片美化应用作为典型案例详细介绍 “一多” 在实际开发中的应用。一多图片美化应用包含相册，大图预览，图片编辑功能。根据宽度自适应相册列数双指缩放控制图片缩放当前系统的产品形态主要有手机、折叠屏、tablet和2in1四种，本文分别从UX设计、页面开发两个角度给出符合“一多”的参考样例，介绍“一多”图片美化应用在开发过程中的最佳实践。UX设计章节介绍图片美化应用的交互逻辑，对于类似的设计要点，开发者可以直接拿来使用。

2025-03-26 15:24:25 961

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（新闻阅读）

本文以新闻阅读应用作为典型案例详细介绍 “一多” 在实际开发中的应用。新闻阅读应用在大屏幕设备的使用过程中，不仅要保障用户在界面浏览中的正常使用，也要尽可能提升屏幕的交互效率。该实例主要界面包含首页推荐、热门新闻、新闻详情、刷新闻、精选发现等。挪移布局延伸布局重复布局列表变瀑布流列表变宫格全屏新闻变瀑布流边看边评沉浸浏览文字大小调节下面的章节将分别从 UX设计、架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”新闻阅读应用在开发过程中的最佳实践。

2025-03-26 13:38:46 940

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（购物比价）

本文从目前流行的垂类市场中，选择购物行业应用作为典型案例详细介绍 “一多” 在实际开发中的应用。购物行业应用的核心功能为浏览商品、商品比价和直播购等。根据这些核心功能，本文选择首页、商品分类页、商品详情页、商品支付页、咨询客服页、直播间页等作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”，能够让开发者快速高效地掌握“一多”能力并实现购物比价应用的相关功能。

2025-03-25 22:09:23 725

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（银行理财）

本文以银行理财应用作为作为典型案例详细介绍 “一多” 在实际开发中的应用。银行理财行业应用在大屏幕设备的使用过程中，不仅要保障用户在办理金融业务过程中的正常使用，底部/侧边页签也要尽可能提升屏幕的交互效率。具体功能主要包含首页推荐、产品专题、产品详情、产品对比、收益明细等。下面的章节将分别从架构设计、UX设计、页面开发三个角度给出推荐的参考样例，介绍“一多”银行理财应用在开发过程中的最佳实践。

2025-03-25 20:33:05 608

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（社区评论）

本文选择社区评论行业应用作为典型案例介绍 “一多” 在实际开发中的应用。社区评论行业应用的核心功能为社区新闻浏览以及热搜榜单查看。根据这些核心功能，案例实现推荐热搜、热搜榜单、卡片详情、图片查看、输入评论等典型页面。文章主要介绍关键布局能力的功能及实现。

2025-03-25 16:21:48 614

原创【鸿蒙 5.0 实战开发】一次开发多端部署开发实例（即时通讯）

本文从目前流行的垂类市场中，选择即时通讯应用作为典型案例详细介绍 “一多” 在实际开发中的应用。一多即时通讯应用的核心功能为用户交互，主要包含对话聊天、通讯录，社交圈等交互功能。开发者在开发"一多"应用时，经常会遇见多端适配上的问题，本文选择了即时通讯应用的一个常见问题，提供了推荐的解决方案，开发者在"一多"开发中遇见同类问题时可以快速解决。聊天场景如何进行布局设计。

2025-03-25 15:25:33 850

原创【鸿蒙 5.0 实战开发】一次开发，多端部署实例（短视频）页面开发

页面可以分为两个部分，一个是用于切换页面的页签栏，在平板等大屏设备上以侧边栏的形式呈现，而在手机、折叠屏上以底部栏的形式呈现；分享页同样以组件的形式在浏览/推荐页上呈现，在手机等小屏设备上以半模态的形式展示，而在折叠屏、平板上以自定义弹框的形式展示。评论页以组件的形式在浏览/推荐页上呈现，在手机等小屏设备上以半模态的形式展示，而在折叠屏、平板上以侧边栏的形式展示。个人作品页在手机设备上使用Grid的折行能力实现作品列表的展示，而在折叠屏、平板上嵌入到侧边栏中展示。

2025-03-25 13:50:20 559

原创【鸿蒙 5.0 实战开发】一次开发，多端部署实例(长视频)-全屏播放页

本文针对长视频应用沉浸式的核心场景，从UX设计、工程管理、页面开发和功能开发四个角度，结合“一多”各项具体的能力，给出了在开发中推荐的参考样例。同时对于开发者在长视频垂类应用的“一多”开发中经常遇到痛点难点问题，给出详细的解决方案，实现了同类别应用的最佳实践，帮助开发者快速适配多种类型的设备，减少了多端开发的工作量，高效构建应用。

2025-03-24 21:50:22 581

原创【鸿蒙 5.0 实战开发】一次开发，多端部署实例(长视频)-视频详情页

在lg断点下，下滑时等比缩小视频区域，最小时固定改为下滑全部评论区域；根据ux设计，全部评论在sm、md断点下显示在视频下方，在lg断点下显示在右侧边栏，实现侧边悬浮面板，使用SideBarContainer组件+断点控制组件显示的位置，同时侧边栏宽度可通过拖拽变宽。在实际开发中，sm和md断点下的设计中，区域1-3和区域4为并列的视频详情页内容，所以对应的开发顺序为区域4，区域1-3；lg断点下的设计中，区域1、2、5和区域3-4是并列的视频详情页内容，所以对应的开发顺序为区域3-4，区域1、2、5。

2025-03-24 20:23:10 601

原创【鸿蒙 5.0 实战开发】一次开发，多端部署开发实例(长视频)-搜索页

搜索发现区域中，标题栏中间的空白区域随父容器尺寸变化而伸缩，使用Blank组件实现自适应布局的拉伸能力；List组件的lanes属性在sm和md断点下为2，lg断点下为3，实现不同布局显示。搜索发现、热搜和“华智能提示”区域，均使用List组件，设置在不同断点下的lanes属性来实现。本章节以搜索发现区域作为示例，热搜和“华”智能提示区域的实现读者可以自行查看代码。在实际开发中，区域1为导航栏，区域2和3，区域4，区域5为并列的搜索页内容，所以对应的开发顺序为区域1和区域2-5。

2025-03-24 17:37:54 424

原创【鸿蒙 5.0 实战开发】一次开发，多端部署实例（长视频）首页

不同的是，因为Grid组件设置了rowsTemplate属性，子组件GridItem均分Grid组件的全部高度，所以Grid组件不能自适应为内容组件的高度，需要用getGridHeight方法先自行计算出Grid组件的高度，从而保证子组件中图片等比放大或缩小。子图部分中，使用Grid网格布局，通过2行+2列的布局均分给4张子图。另外，为了提升用户的使用体验，首页设计了额外的功能，包括首页社区页签的沉浸式设计，2in1首页Banner图的排版创新，首页推荐视频区域长按预览，首页推荐视频区域的缩放。

2025-03-24 15:17:09 894

空空如也

空空如也