##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** @Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。 其中@Provide装饰的变量是在祖先组件中，可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先组件提供的变量。 @Provide/@Consume是跨组件层级的双向同步。...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** @Prop装饰器：父子单向同步 @Link装饰器：父子双向同步 @Prop装饰的变量和父组件建立单向的同步关系：  @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。 当数据源更改时，@Prop装饰的变量都会更新，并且会覆盖本地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。  @Link装饰的变量与其父组件中的数据源共享相同的值。 总结  @Prop装饰的变量可以和父组件建立单向的同步关系。@Pro...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** ArkUI作为一种声明式UI，具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时，状态的变化会触发组件自动更新。所以在ArkUI中，我们只需要通过一个变量来记录状态。当改变状态的时候，ArkUI就会自动更新界面中受影响的部分。 概述 @State装饰的变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。 @State装饰的变量拥...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。 接口 constructor(value: CustomDialogControllerOptions)  CustomDialogControllerOptions对象说明  builder：自定义弹窗内容构造器。 cancel：返回、ESC键和点击遮障层弹窗退出时的回调。 autoC...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 显示警告弹窗组件，可设置文本内容与响应回调。 AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)  AlertDialogParam对象说明  title：弹窗标题。 subtitle：弹窗副标题。 message：弹窗内容。 autoCancel：点击遮障层时，是否关闭弹窗，tru...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。 自定义组件具有以下特点：  可组合：允许开发者组合使用系统组件、及其属性和方法。 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。 ...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。 可以理解为：一种可重复使用的组件集 装饰器使用说明 @Builder装饰器有两种使用方式，分别是定义在自定义组件内部的私有自定义构建函数和定义在全局的全局自定义构建函数。 定义： @Builder MyBuilderFunction() {}  使用： this.MyBu...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，推出了可以提炼公共样式进行复用的装饰器@Styles。 @Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。 @Styles装饰器：定义组件重用样式 @Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Style...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。 基本布局： Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。 ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。 接口 Grid(scroller...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。 使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem，为列表中的行或列提供单个视图，或使用循环渲染迭代一组行或列，或混合任意数量的单个视图和...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 介绍 线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。 基本概念  布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** Resource 资源引用类型，用于设置组件属性的值。 可以通过$r或者$rawfile创建Resource类型对象，不可以修改Resource中的各属性的值。 $r('belonging.type.name') //belonging：系统资源或者应用资源，相应的取值为'sys'和'app'； //type：资源类型，支持'string'、'color'、'boolean'、'float'、'intarray'、'integer'、'pattern'、...

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育## **************************** 尺寸设置 .width(value: Length) //设置组件宽度 .height(value: Length) //设置组件高度 .size(value: SizeOptions) //设置组件宽高尺寸 .padding(value: Padding | Length | LocalizedPadding) //设置内边距 .margin(value: Margin | Length | LocalizedMargin) //设置外边距  位置设置...