关于鸿蒙开发系统组件的摘抄及运用1

最新推荐文章于 2024-04-08 16:58:29 发布

Yang_liu_liu

最新推荐文章于 2024-04-08 16:58:29 发布

阅读量2.1k

点赞数

文章标签：华为鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/Yang_liu_liu/article/details/128167574

版权

组件装饰器

@component

只能装饰结构体,只有修饰之后才能可视化组件

必须定义build

@entry

程序的入口

@preview

单预览被装饰的结构体，试运行时不用从头来

@builder

装饰函数，自定义有序容纳其他组件与build的功能一样

组件

Blank

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。

button

属性

名称	参数类型	描述
type	ButtonType	设置Button样式。默认值：ButtonType.Capsule
stateEffect	boolean	按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true

ButtonType枚举说明

名称	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）。
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角）。

Text

子组件：可以包含Span子组件。

参数名	参数类型	必填	参数描述
content	string \| Resource	否	文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：' '

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
textAlign	TextAlign	设置文本在水平方向的对齐方式。默认值：TextAlign.Start
textOverflow	{overflow: TextOverflow}	设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}说明：文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。需配合maxLines使用，单独设置不生效。
maxLines	number	设置文本的最大行数。默认值：Infinity说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。
lineHeight	string \| number \| Resource	设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。
decoration	{type: TextDecorationType,color?: ResourceColor}	设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}
baselineOffset	number \| string	设置文本基线的偏移量，默认值0。
letterSpacing	number \| string	设置文本字符间距。
minFontSize	number \| string \| Resource	设置文本最小显示字号。
maxFontSize	number \| string \| Resource	设置文本最大显示字号。
textCase	TextCase	设置文本大小写。默认值：TextCase.Normal
copyOption9+	CopyOptions	组件支持设置文本是否可复制粘贴。默认值：CopyOptions.None

Column

沿垂直方向布局的容器。

参数名	参数类型	必填	参数描述
space	string \| number	否	纵向布局元素垂直方向间距。默认值：0

名称	参数类型	描述
alignItems	HorizontalAlign	设置子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center
justifyContent8+	FlexAlign	设置子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start

组件状态管理装饰器和@Builder装饰器：

组件状态管理装饰器用来管理组件中的状态，它们分别是：@State、@Prop、@Link。

@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。
@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。
@Link装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。
@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

@State、@Prop、@Link三者关系如图所示：

页面级变量的状态管理

装饰器	装饰内容	说明
@State	基本数据类型，类，数组	修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。
@Prop	基本数据类型	修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。
@Link	基本数据类型，类，数组	父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。
@Observed	类	@Observed应用于类，表示该类中的数据变更被UI页面管理。
@ObjectLink	被@Observed所装饰类的对象	装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。
@Consume	基本数据类型，类，数组	@Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。
@Provide	基本数据类型，类，数组	@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。

应用级变量的状态管理

AppStorage是整个UI应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例AppStorage对象，并提供相应的装饰器和接口供应用程序使用。

@StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。
@StorageProp：@StorageProp(name)将UI组件属性与AppStorage进行单向同步，AppStorage中值的更改会更新组件中的属性，但UI组件无法更改AppStorage中的属性值。
AppStorage还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。
PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。
Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。

@State

@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。

@State状态数据具有以下特征：

支持多种类型数据：支持class、number、boolean、string强类型数据的值类型和引用类型，以及这些强类型构成的数组，即Array<class>、Array<string>、Array<boolean>、Array<number>。不支持object和any。
支持多实例：组件不同实例的内部状态数据独立。
内部私有：标记为@State的属性是私有变量，只能在组件内访问。
需要本地初始化：必须为所有@State变量分配初始值，变量未初始化可能导致未定义的框架异常行为。
创建自定义组件时支持通过状态变量名设置初始值：在创建组件实例时，可以通过变量名显式指定@State状态变量的初始值。