Etichetă: Next

在鸿蒙Next开发中，ArkTS对自定义组件的成员变量使用的访问限定符private/public/protected有特定的校验规则，当不按规范使用时会产生相应的日志信息。 一、使用限制概述 （一）private修饰相关限制 对于@State/@prop/@Provide/@BuilderParam/常规成员变量（不涉及更新的普通变量），使用private修饰时，在自定义组件构造时不允许进行赋值传参，否则会有编译告警日志提示。 ### （二）public修饰相关限制 对于@StorageLink/@StorageProp/@LocalStorageLink/@LocalStorageProp/@Consume变量，使用public修饰时，会有编译告警日志提示。 ### （三）private与特定装饰器同时修饰限制 对于@Link/@ObjectLink变量，使用private修饰时，会有编译告警日志提示。 ### （四）protected修饰限制 由于struct没有继承能力，所有上述变量使用protected修饰时，会有编译告警日志提示。 ### （五）@Require与private同时修饰限制 当@Require和private同时修饰自定义组件struct的@State/@prop/@Provide/@BuilderParam/常规成员变量（不涉及更新的普通变量）时，会有编译告警日志提示。 二、错误使用场景示例 （一）private与@State/@prop/@Provide/@BuilderParam同时修饰 代码示例 @Entry @Component struct AccessRestrictions { @Builder buildTest() { Text(“Parent builder”) } build() { Column() { ComponentsChild({ state_value: “Hello”, prop_value: “Hello”, provide_value: “Hello”, builder_value: this.buildTest, regular_value: “Hello” }) } .width(‘100%’) } } @Component struct ComponentsChild { @State…

一、引言 在鸿蒙Next开发中，当需要通过精确测算的方式来布局自定义组件内子组件的位置时，可以使用特定的接口来实现。本文将详细介绍如何使用onMeasureSize和onPlaceChildren接口来完成自定义组件的布局，包括接口的功能、使用示例以及实现效果等方面的内容。 二、布局接口介绍 onMeasureSize接口 功能：组件每次布局时触发，用于计算子组件的尺寸。其执行时间先于onPlaceChildren接口。 参数： selfLayoutInfo：类型为GeometryInfo，提供组件自身的布局信息。 children：类型为Array<Measurable>，是可测量的子组件数组。 constraint：类型为ConstraintSizeOptions，用于约束子组件的尺寸。 onPlaceChildren接口 功能：组件每次布局时触发，用于设置子组件的起始位置。 参数： selfLayoutInfo：同onMeasureSize接口中的selfLayoutInfo。 children：类型为Array<Layoutable>，是可布局的子组件数组。 constraint：同onMeasureSize接口中的constraint。 三、使用示例 （一）整体结构 Index.ets文件 包含@Entry装饰的Index组件，在其build方法中使用Column组件包裹了一个自定义布局组件CustomLayout，并通过builder方式传入子组件。 自定义组件相关代码 CustomLayout组件实现了自定义布局功能，包括onMeasureSize和onPlaceChildren方法的定义，以及build方法来构建组件。 （二）具体实现步骤 计算子组件大小（onMeasureSize方法） 在CustomLayout组件的onMeasureSize方法中，首先初始化一个size变量为100。然后遍历传入的子组件数组children，对于每个子组件，使用measure方法测量其尺寸，并将测量结果的宽度的一半累加到size变量上。最后设置this.result.width为100，this.result.height为400，并返回this.result，从而实现组件大小递增的效果。例如，第一个子组件大小为100，第二个子组件大小为100加上第一个子组件宽度100的一半（即50），以此类推。 放置子组件位置（onPlaceChildren方法） 在onPlaceChildren方法中，定义startPos为300。然后遍历子组件数组children，对于每个子组件，计算其位置pos为startPos减去子组件自身的高度。最后使用layout方法将子组件布局到计算得到的位置(pos, pos)，使得所有子组件的右下角在顶点位置(300, 300)，实现了一个从右下角开始展示组件的类似Stack组件的效果。 （三）子组件传递方式 在Index组件中，通过@Builder装饰的ColumnChildren函数来构建子组件。使用ForEach循环遍历一个数组[1, 2, 3]，对于每个元素创建一个Text组件，并设置其样式（如字体大小、宽度、高度、边框宽度、偏移量等）。然后将这个ColumnChildren函数作为builder参数传递给CustomLayout组件。 四、总结 通过使用onMeasureSize和onPlaceChildren接口，开发者可以根据自己的需求精确计算和设置自定义组件内子组件的大小和位置，实现各种复杂的布局效果。这种方式提供了更大的灵活性和控制力，有助于打造出更加美观、高效的用户界面。在实际开发中，可以根据具体的布局需求灵活运用这些接口，实现个性化的组件布局设计。

一、引言 在鸿蒙Next应用开发中，理解页面和自定义组件的生命周期至关重要。它有助于开发者精确控制组件和页面在不同阶段的行为，优化应用性能，提升用户体验。本文将深入探讨鸿蒙Next中页面和自定义组件的生命周期，包括创建、渲染、重新渲染、删除以及监听页面生命周期等方面的内容。 二、自定义组件和页面的关系 自定义组件 由@Component装饰的UI单元，可组合多个系统组件实现UI复用，并能调用组件的生命周期。 页面 应用的UI页面，可由一个或多个自定义组件组成。其中，@Entry装饰的自定义组件是页面的入口组件（根节点），一个页面只能有一个@Entry。只有被@Entry装饰的组件才能调用页面的生命周期。 三、生命周期接口 页面生命周期接口（被@Entry装饰的组件） onPageShow：页面每次显示时触发，如路由过程、应用进入前台等场景。 onPageHide：页面每次隐藏时触发，如路由过程、应用进入后台等场景。 onBackPress：用户点击返回按钮时触发。 组件生命周期接口（一般@Component装饰的自定义组件） aboutToAppear：组件即将出现时回调，在创建实例后、执行build()函数前执行。 onDidBuild：组件build()函数执行完成后回调，不建议在此函数中更改状态变量或使用某些功能（如animateTo），以免导致UI表现不稳定。 aboutToDisappear：组件析构销毁前执行，不允许在此函数中改变状态变量（特别是@Link变量修改可能导致应用不稳定）。 四、生命周期流程 （一）自定义组件的创建和渲染流程 实例创建 由ArkUI框架创建自定义组件实例。 成员变量初始化 通过本地默认值或构造方法传递参数初始化成员变量，顺序按定义顺序。 aboutToAppear执行（若定义） 若开发者定义了aboutToAppear方法，则执行该方法。 首次渲染 执行build方法渲染系统组件，若子组件为自定义组件，则创建其实例。首次渲染时框架记录状态变量与组件映射关系，以便状态变量改变时驱动相关组件刷新。 onDidBuild执行（若定义） 若开发者定义了onDidBuild方法，则执行该方法。 （二）自定义组件重新渲染 当以下情况发生时触发重新渲染： 事件句柄触发（如点击事件）改变状态变量。 LocalStorage / AppStorage中的属性更改导致绑定的状态变量值改变。 框架观察到变化后启动重新渲染，根据记录的映射关系找到相关UI组件及其更新函数，执行更新函数实现最小化更新。 （三）自定义组件的删除 触发条件 if组件分支改变或ForEach循环渲染中数组个数改变时，组件将被删除。 删除过程 调用aboutToDisappear生命周期函数标记节点将要销毁。ArkUI节点删除机制为后端节点从组件树摘下并销毁，对前端节点解引用，前端节点无引用时被JS虚拟机垃圾回收。 自定义组件及其变量被删除，同步变量（如@Link、@Prop、@StorageLink）从同步源取消注册。 （四）注意事项 不建议在aboutToDisappear生命周期内使用async await，因为若使用异步操作，自定义组件将保留在Promise闭包中，直到回调方法执行完，这会阻止组件的垃圾回收。 五、生命周期调用时机示例 （一）示例代码结构 Index.ets 包含@Entry装饰的MyComponent（页面入口组件）和Child（MyComponent的子组件）。 MyComponent中声明页面生命周期函数（onPageShow、onPageHide、onBackPress）和组件生命周期函数（aboutToAppear、onDidBuild、aboutToDisappear）。 通过按钮操作控制Child组件的显示与隐藏、页面跳转等。 page.ets 新页面的定义，包含页面生命周期函数（onPageShow、onPageHide、onBackPress）和组件初始化逻辑。 （二）不同操作下的生命周期调用 应用冷启动 初始化流程：MyComponent…

一、功能概述 鸿蒙Next的自定义组件冻结功能专为优化复杂UI页面性能而设计，在包含多页面栈、长列表或宫格布局等场景中作用显著。当状态变量绑定多个UI组件时，其变化可能引发大量UI组件刷新，导致界面卡顿和响应延迟。此功能通过设置freezeWhenInactive属性激活组件冻结机制，仅更新处于激活状态的自定义组件，缩小更新范围，提高复杂UI场景下的刷新效率。当inactive状态的组件重新变为active时，状态管理框架会执行必要刷新操作以确保UI正确展示，实现按需刷新，如多页面栈、长列表或宫格布局中仅刷新当前可见组件，延迟不可见组件的刷新。 适用场景 页面路由：当前栈顶页面为active，非栈顶不可见页面为inactive。 TabContent：当前显示的TabContent中的自定义组件处于active状态，其余为inactive（首次渲染时，Tab只创建当前显示的TabContent，切换全部TabContent后才全部创建）。 LazyForEach：仅当前显示的LazyForEach中的自定义组件为active，缓存节点的组件为inactive。 Navigation：当前显示的NavDestination中的自定义组件为active，其他未显示的NavDestination组件为inactive。 注意事项 组件active / inactive不等同于可见性，如堆叠布局（Stack）下被遮罩的组件虽不可见，但不视为inactive状态，不在组件冻结适用范围内。从API version 11开始支持该功能。 二、功能示例 （一）页面路由 页面A跳转到页面B 点击页面A中的“first page storageLink + 1”按钮，storageLink状态变量改变，@Watch中注册的first方法被调用。 通过router.pushUrl({url: ‘pages/second’})跳转到页面B后，页面A隐藏，状态变为inactive。此时点击页面B中的“this.storageLink2 += 2”按钮，仅回调页面B中@Watch注册的second方法，因为页面A的状态变量已被冻结。 点击“back”返回页面A，页面A状态由inactive变为active，重新刷新之前被冻结的状态变量，@Watch中注册的first方法再次被调用。 相关代码示例 // 页面A import { router } from ‘@kit.ArkUI’; @Entry @Component({ freezeWhenInactive: true }) struct FirstTest { @StorageLink(‘PropA’) @Watch(“first”) storageLink: number = 47; first() { console.info(“first page ” +…

在鸿蒙Next应用开发中，合理的状态管理是确保应用性能和响应性的关键。以下是基于最佳实践的详细阐述，每个实践都包含反例分析和正例改进，并提供了相应的代码示例。 一、使用@ObjectLink代替@Prop减少不必要的深拷贝 （一）问题场景 在父子组件数据传递时，如果子组件不需要改变传递过来的数据，使用@Prop装饰器会带来不必要的深拷贝开销，影响性能。 （二）反例分析 以下代码展示了一个父组件Parent和子组件PropChild之间的数据传递。父组件中有一个@State修饰的testClass数组，包含MyClass的实例。子组件使用@Prop接收testClass。 // 反例 @Observed class MyClass { public num: number = 0; constructor(num: number) { this.num = num; } } @Component struct PropChild { @Prop testClass: MyClass; // @Prop会深拷贝数据 build() { Text(`PropChild testNum ${this.testClass.num}`) } } @Entry @Component struct Parent { @State testClass: MyClass[] = [new MyClass(1)]; build() { Column()…