《HarmonyOS应用开发基础》 课件 知识点 单元2　ArkTS声明式开发

认识ArkTS工程010203应用程序包结构相关的基本概念ArkTS工程目录结构ArkTS工程的配置文件04ArkTS工程的资源管理应用程序包结构相关的基本概念一个应用包含一个或者多个Module;Module分为“Ability”和“Library”两种类型;“Ability”类型的Module对应于编译后的HAP（HarmonyAbilityPackage）；“Library”类型的Module对应于HAR（HarmonyAbilityResources）包，即编译后的.tgz文件。“Ability”类型的Module的HAP包可分为Entry和Feature两种类型。Entry类型的HAP：是应用的主模块;Feature类型的HAP：是应用的动态特性模块每个HarmonyOS应用可以包含多个.hap文件，一个应用中的.hap文件合在一起称为一个Bundle，而bundleName就是应用的唯一标识（请参见app.json5配置文件中的bundleName标签）ArkTS工程目录结构ArkTS工程的配置文件在基于Stage模型开发的应用项目代码下，都存在app.json5及module.json5两个配置文件。app.json5应用的全局配置信息，包含应用的包名、开发厂商、版本号等基本信息。特定设备类型的配置信息。ArkTS工程的配置文件module.json5：Module的基本配置信息，例如Module名称、类型、描述、支持的设备类型等基本信息。应用组件信息，包含Ability组件和ExtensionAbility组件的描述信息。应用访问系统或其他应用受保护部分所需的权限信息。ArkTS工程的资源管理HarmonyOS资源分为两类：应用资源：借助资源文件能力，开发者在应用中自定义资源，自行管理这些资源在不同的设备或配置中的表现。系统资源：开发者直接使用系统预置的资源定义（即分层参数，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。ArkTS工程的资源管理应用资源目录应用开发中使用的各类资源文件，需要放入特定子目录中存储管理。在stage模型中，多模块module共有的资源文件放到AppScope下的resources目录。模块独有的资源可以放在该模块的resources目录下。resources目录包括三大类目录：base目录限定词目录rawfile目录ArkTS工程的资源管理创建应用资源文件应用已经提供了一些资源文件，例如用来存放字符串的资源文件string.json，若还想创建其他的资源文件，例如布尔资源文件，则需要开发者自己创建。在资源目录的右键菜单选择“New>XXXResourceFile”，即可创建对应资源组目录的资源文件。例如，在element目录下可新建ElementResourceFile。如右图在element目录下创建一个布尔资源文件，一般文件名命名与根元素同名为boolean。ArkTS工程的资源管理访问应用资源在工程中，通过"$r('')"的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表资源命名，由开发者定义资源时确定。例如：$r(‘app.string.string_hello’)表示引用字符串资源string_hello，具体是base还是相应限定词目录下的视当前设备的语言、设备类型等情况。另外：引用rawfile下资源时使用"$rawfile('filename')"的形式，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。例如$rawfile(‘test.png’)表示引用rawfile目录下图片。ArkTS工程的资源管理访问系统资源系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。开发者可以通过“$r('sys.type.resource_id')”的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。例如：$r('sys.color.ohos_id_color_emphasize')认识ArkTS声明式开发010203ArkTS简介ArkUI框架ArkTS声明式开发范式的基本组成04ArkTS中的尺寸单位05ArkTS中组件的公共样式ArkTS简介ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。ArkTS继承了TS的所有特征ArkTS在TS的基础上扩展了声明式UI能力，当前扩展的声明式UI能力包括如下特征：基本UI描述状态管理动态构建UI元素渲染控制使用限制与扩展ArkUI框架ArkUI是基于ArkTS的UI框架，基于ArkTS提供的扩展语法，如下图所示。ArkTS声明式开发范式的基本组成ArkTS声明式开发范式的基本组成：装饰器自定义组件UI描述内置组件属性方法事件方法ArkTS中的尺寸单位ArkTS提供了4种像素单位，分别是px、vp、fp和lpx，框架采用vp为基准数据单位。px：屏幕物理像素单位。vp：屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素fp：字体像素，与vp类似适用屏幕密度变化lpx：视窗逻辑像素单位在设置组件和容器宽高的字体大小使用固定值时，使用number值不需要用单位，ArkTS会默认给单位。例如：width(200)fontSize(50)ArkTS还可以使用百分比字符串来设置组件或布局的宽高。例如：width(‘100%’)表示宽度与父容器宽度相等。ArkTS中组件的公共样式公共样式：宽高（width/height/size）宽高比（aspectRatio）边距（padding/margin）权重（layoutWeight）...示例：组件的宽高设置Column()

{

Text('你好').width(100).height(120)

.fontSize("50px")

//设置Text文字显示组件的字体大小为50px

}.width('100%')

//设置Column的宽为100%，占满屏幕宽度ArkTS中组件的公共样式内外边距Text()…

.margin({bottom:30})//设置底部外边距，底部距离下一个组件30Text()…//.padding(20)

//设置相同的边距值

.padding({left:

20,

top:

30,

right:

40,

bottom:

50})//设置不同的边距值示例：设置组件的内外边距Row与Column组件的使用010203容器组件概述Column和Row组件介绍线性布局的权重设置容器组件概述容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面，例如使用Column和Row容器组件实现如下效果。Column和Row组件介绍线性布局容器概念Column和Row组件是ArkTS提供用来实现线性布局的容器组件。线性布局表示按照垂直方向或者水平方向排列子组件的容器。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。Column和Row组件介绍主轴与交叉轴的概念在线性布局容器中，存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。Column和Row组件介绍交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。Column和Row组件介绍主轴与交叉轴的对齐格式Column和Row容器默认都在主轴和交叉轴上居中显示子组件。同时，他们也提供属性justifyContent和alignItems用来设置子组件在主轴和交叉轴的对齐格式。主轴方向的对齐格式（justifyContent）子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign。FlexAlign定义了以下几种类型：StartCenterEndSpaceBetweenSpaceAroundSpaceEvenlyColumn和Row组件介绍Column在主轴上的对齐格式：Row在主轴上的对齐格式：Column和Row组件介绍交叉轴方向的对齐（alignItems）子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：Start：设置子组件在水平方向上按照起始端对齐。Center（默认值）：设置子组件在水平方向上居中对齐。End：设置子组件在水平方向上按照末端对齐。Column和Row组件介绍Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型：Top：设置子组件在垂直方向上居顶部对齐。Center（默认值）：设置子组件在竖直方向上居中对齐。Bottom：设置子组件在竖直方向上居底部对齐。线性布局的权重设置权重属性表示一行或一列中的尺寸按照权重比进行分配，仅适用于线性布局组件下的子组件，如果同时设置了某一个方向上的尺寸和权重，此时子组件设置的尺寸不起作用。基础组件1组件概述组件（Component）是界面搭建与显示的最小单位,

HarmonyOSArkUI声明式开发范式为开发者提供了丰富多样的UI组件。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。010203文本组件Text图片组件Image空白填充组件Blank04分割线组件Divider文本组件TextText组件用于显示文本信息。常用的属性有：fontSize：设置字体大小fontColor：设置字体颜色textAlign：设置文本对齐格式fontWeight：设置字体权重fontStyle：设置字体样式decoration：设置文本装饰线maxLines：设置文本最大行数textOverFlow：设置文本超长时的显示方式文本组件TextText('Hello,

HarmonyOS;

Hi

ArkUI')

.fontSize(20)

//大小

.fontColor('#ff0000')

//颜色

.textAlign(TextAlign.Center)

//文本的对齐方式(Start/Center/End)

.fontWeight(FontWeight.Bold)

//字重

.fontStyle(FontStyle.Italic)

//样式(正常：Normal

斜体：Italic)

//给文本添加装饰线，Unerline为下划线

.decoration({type:

TextDecorationType.Underline,

color:

Color.Black})

.maxLines(1)

//设置行数为1时可与下面的截断方式配合使用

.textOverflow({overflow:

TextOverflow.Ellipsis})//截断方式图片组件ImageImage组件用来渲染展示图片,只需要给Image组件设置图片地址、宽和高，图片就能显示出来。示例代码如下。Image($r("app.media.icon"))

.width(100)

.height(100)图片地址可以是本地图片也可以是网络图片。引用本地图片资源时，建议使用$r方式来管理需全局使用的图片资源。支持的图片格式包括png、jpg、bmp、svg和gif。图片组件Image图片缩放处理使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit。ImageFit.Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界；ImageFit.Fill：不保持宽高比进行放大缩小，使得图片充满显示边界，可以看到图片为了适应屏幕，改变了宽高比；ImageFit.Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内；ImageFit.None：保持原有尺寸显示；ImageFit.ScaleDown：保持宽高比显示，图片缩小或者保持不变。图片组件Image原图ImageFit.CoverImageFit.FillImageFit.ContainImageFit.NoneImageFit.ScaleDown空白填充组件BlankBlank表示空白填充组件，在线性布局容器组件内用来填充组件在主轴方向上的剩余尺寸。例如：在下图中，Blank在Row方向上的使用，除了子组件的本身宽度尺寸外，剩余尺寸用Blank占满，子组件可以很容易实现靠左或靠右摆放。分隔线组件Divider在UI开发中经常用到的分割线，可以用组件Divider实现。使用的示例代码如下。Divider()

//无参

.vertical(true)

//分割线的方向，默认是false水平，true代表垂直方向

.color(Color.Red)

//分割线的颜色

.strokeWidth(1)

//分割线的线宽

.lineCap(LineCapStyle.Round)//分割线的样式开发数据展示页010203弹性布局Flex层叠布局容器Stack进度条组件Progress04滑动条组件Slider弹性布局Flex弹性布局Flex可以灵活的实现线性布局Row和Column的设置效果，Flex的排列方向和对齐格式是在参数中设置的。参数direction的值决定Flex的排列方向。弹性布局Flex参数justfyContent的值决定主轴的对齐格式。参数alignItems的值决定交叉轴的对齐格式。层叠布局容器Stack层叠布局容器组件Stack，是把子组件按照设置的对齐格式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。子组件的对齐方式使用alignContent参数来设置。进度条组件ProgressProgress进度条，用于显示内容加载或操作处理等进度。不同类型的进度条Progress参数：value：指定当前进度值（必填）total：指定进度总长，默认值100.（选填）type：指定进度条类型，默认值ProgressType.Linear（选填）Progress常用属性color：进度条的颜色，默认为蓝色style：进度条的样式，样式内的可选设置有strokeWidth：设置进度条宽度scaleCount：设置环形进度条总刻度scaleWidth：设置环形进度条刻度粗细value：当前进度，会覆盖参数的当前进度进度条组件ProgressProgress({

value:

85,

//参数1：必选,当前进度

total:100,

//参数2：可选,最大进度,默认100

type:

ProgressType.ScaleRing

//参数3：可选,进度条类型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//属性1：进度条的颜色,默认为蓝色

.style({

//属性2：设置进度条的样式

strokeWidth:20,

//strokeWidth：设置进度条宽度

scaleCount:100,

//scaleCount：设置环形进度条总刻度数

scaleWidth:10

//scaleWidth：设置环形进度条刻度粗细

})

.value(22)

//属性3：当前进度,会覆盖参数的当前进度滑动条组件Slider滑动条组件Slider，用来快速调节音量、亮度等。Slider组件默认宽度为父容器宽度的100%。Slider常用的参数说明如下：Slider(value:{value?:

number,

//当前进度值,默认值0

min?:

number,

//设置最小值,默认值0max?:

number,

//设置最大值,默认值100step?:

number,

//设置Slider滑动跳动值,默认值1style?:

SliderStyle

//设置Slider的滑块样式,默认值Outset})滑动条组件SliderSliderStyle的取值有两种SliderStyle.OutSet：滑块在滑轨上SliderStyle.InSet：滑块在滑轨内Slider(){...

}

.blockColor(Color.Red)//设置滑块的颜色

.selectedColor(Color.Green)//设置滑轨的已滑动颜色

.showSteps(true)//默认值false,设置当前是否显示步长刻度值

.showTips(true)//默认值false,设置滑动时是否显示气泡提示百分比}SliderStyle常用的属性滑动条组件SliderSlider滑动时触发onChange的事件回调，value为当前进度值，mode为拖动状态。其中mode有4种：SliderChangeMode.Begin：开始拖动滑块。SliderChangeMode.Moving：正在拖动滑块过程中。SliderChangeMode.End：结束拖动滑块。SliderChangeMode.Click：点击滑动条使滑块位置移动。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})弹性布局与层叠布局弹性布局Flex弹性布局Flex可以灵活的实现线性布局Row和Column的设置效果，Flex的排列方向和对齐格式是在参数中设置的。参数direction的值决定Flex的排列方向。弹性布局Flex参数justifyContent的值决定主轴的对齐格式。参数alignItems的值决定交叉轴的对齐格式。弹性布局Flex-使用示例@Entry@Componentstruct

FlexExample

{

build()

{

Flex({

direction:

FlexDirection.Row,

justifyContent:

FlexAlign.End,

alignItems:

ItemAlign.Center

})

{

Text('文本1')

.width('30%')

.height(50)

.backgroundColor(0xF5DEB3)

.textAlign(TextAlign.Center)

Text('文本2')

.width('30%')

.height(70)

.backgroundColor(0xD2B48C)

.textAlign(TextAlign.Center)

Text('文本3')

.width('30%')

.height('100%')

.backgroundColor(0xF5DEB3)

.textAlign(TextAlign.Center)

}.width('100%').height(120).padding(10).backgroundColor(0xAFEEEE)

}}层叠布局容器Stack层叠布局容器组件Stack，是把子组件按照设置的对齐格式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。子组件的对齐方式使用alignContent参数来设置。层叠布局容器Stack-使用示例@Entry@Componentstruct

StackExample

{

build()

{

Stack({

alignContent:

Alignment.Bottom

})

{

Text('第一个子组件').width('90%').height('100%').backgroundColor('#d2cab3').align(Alignment.Top)

Text('第二个子组件').width('70%').height('60%').backgroundColor('#c1cbac').align(Alignment.Top)

Text('第三个子组件').width('50%').height('30%').backgroundColor('#e0e3d8').align(Alignment.Top)

}.width('100%').height(150).margin({

top:

5

})

}}进度条和滑动条进度条组件ProgressProgress进度条，用于显示内容加载进度或操作处理进度等。不同类型的进度条Progress参数：value：指定当前进度值（必填）total：指定进度总长，默认值100.（选填）type：指定进度条类型，默认值ProgressType.Linear（选填）Progress常用属性color：进度条的颜色，默认为蓝色style：进度条的样式，样式内的可选设置有strokeWidth：设置进度条宽度scaleCount：设置环形进度条总刻度scaleWidth：设置环形进度条刻度粗细value：当前进度，会覆盖参数的当前进度进度条组件Progress-使用示例Progress({

value:

85,

//参数1：必选,当前进度

total:100,

//参数2：可选,最大进度,默认100

type:

ProgressType.ScaleRing

//参数3：可选,进度条类型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//属性1：进度条的颜色,默认为蓝色

.style({

//属性2：设置进度条的样式

strokeWidth:20,

//strokeWidth：设置进度条宽度

scaleCount:100,

//scaleCount：设置环形进度条总刻度数

scaleWidth:10

//scaleWidth：设置环形进度条刻度粗细

})

.value(22)

//属性3：当前进度,会覆盖参数的当前进度滑动条组件Slider滑动条组件Slider，用来快速调节音量、亮度等。Slider组件默认宽度为父容器宽度的100%。Slider常用的参数：Slider(value:{value?:

number,

//当前进度值,默认值0

min?:

number,

//设置最小值,默认值0max?:

number,

//设置最大值,默认值100step?:

number,

//设置Slider滑动跳动值,默认值1style?:

SliderStyle

//设置Slider的滑块样式,默认值OutSet})滑动条组件SliderSliderStyle的取值有两种SliderStyle.OutSet：滑块在滑轨上SliderStyle.InSet：滑块在滑轨内Slider(){...

}

.blockColor(Color.Red)//设置滑块的颜色

.selectedColor(Color.Green)//设置滑轨的已滑动颜色

.showSteps(true)//默认值false,设置当前是否显示步长刻度值

.showTips(true)//默认值false,设置滑动时是否显示气泡提示百分比}Slider常用的属性滑动条组件SliderSlider滑动时触发onChange的事件回调，在回调方法内箭头函数的参数value为当前进度值，mode为拖动状态。其中mode有4种：SliderChangeMode.Begin：开始拖动滑块。SliderChangeMode.Moving：正在拖动滑块过程中。SliderChangeMode.End：结束拖动滑块。SliderChangeMode.Click：点击滑动条使滑块位置移动。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})滑动组件Slider-使用示例@Entry@Componentstruct

SliderExample

{

@State

inSetValue:

number

=

40

build()

{

Column({

space:

8

})

{

Text('滑块在导轨内').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)

Row()

{

Slider({

value:

this.inSetValue,

step:

10,

style:

SliderStyle.InSet

})

.blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1')

.showSteps(true)

.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

this.inSetValue

=

value

console.info('value:'

+

value

+

'mode:'

+

mode.toString())

})

Text(this.inSetValue+"").fontSize(12)

}

.width('80%')

}.width('100%')

}}开发登录页010203输入框组件Input按钮组件Button开关组件Toggle04文本提示框promptAction输入框组件TextInputTextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如在登录页中的账号输入和密码输入。TextInput组件支持文本样式设置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')输入框组件TextInput设置输入提示文本我们平常使用输入框时常常看到输入框上会有提示文字，例如登录账号时会有“请输入账号”这样的文本提示，当用户输入内容后，提示文本就消失了。使用placeholder设置提示文本使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。TextInput({

placeholder:

'请输入帐号'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})输入框组件TextInput设置输入类型可以使用type属性来设置输入框类型。例如密码输入框，一般输入密码的时候，为了用户密码安全，内容会显示为“”。这种情况就可以设置type属性值为InputType.Password实现，如下面示例所示。TextInput({

placeholder:

'请输入密码'

})

.type(InputType.Password)输入框组件TextInput输入类型InputType枚举值：Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。Password：密码输入模式。Email：e-mail地址输入模式。Number：纯数字输入模式。输入框组件TextInput获取输入文本在onChange事件回调方法中，获取输入框的输入文本。如下面示例所示。

TextInput({

placeholder:

'请输入账号'

})

.onChange((value:

string)

=>

{

this.text

=

value//this.text为@State修饰的状态变量

})按钮组件ButtonButton组件主要用来响应点击操作，可以包含子组件。Button使用示例Button('登录',

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//处理点击事件逻辑

}))示例中的代码，type用于定义按钮样式，ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。并且给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。按钮组件Button按钮样式ButtonType枚举值Capsule：胶囊型按钮（圆角默认为高度的一半）。Circle：圆形按钮。Normal：普通按钮（默认不带圆角）。按钮组件Button包含子组件Button组件可以包含子组件，例如在Button组件包含了一个Image组件。Button({

type:

ButtonType.Circle,

stateEffect:

true

})

{

Image($r('app.media.icon_delete'))

.width(30)

.height(30)}.width(55).height(55).backgroundColor('#317aff')开关组件ToggleToggle组件表示开关，开关状态的初始化用isOn参数进行设置；使用type设置开关样式，开关状态切换时触发onChange事件回调方法。Toggle({

isOn:true,

//设置开关状态组件初始化状态为开

type:

ToggleType.Switch})//设置组件为开关样式

.selectedColor("#ffa6c88c")//设置组件打开状态的背景颜色

.switchPointColor(Color.Red)//设置

type类型为

Switch时的圆形滑块颜色

.onChange((isOn)

=>

{//事件回调,isOn为开与关的状态值

console.log(

"开关状态："

+

isOn)

})Toggle的type样式：ToggleType.Switch为开关样式；ToggleType.Checkbox为单选框样式；ToggleType.Button为按钮样式，可以在Toggle中加入子组件。文本提示框promptActionpromptAction是在@mptAction模块里提供的，使用时需要导入@mptAction模块，用promptAction.showToast()提示信息。import

promptAction

from

'@mptAction';

//导入文本提示框模块…

promptAction.showToast({

message:

"消息",

//显示文本，必填项

duration:

2000,

//显示时长，可选项，单位毫秒，范围

[1500,

10000]，默1500

bottom:

1000

//Toast的显示位置距离底部的间距，可选项

})基础组件2010203输入框组件Input按钮组件Button开关组件Toggle输入框组件TextInputTextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如在登录页中的账号输入和密码输入。TextInput组件支持文本样式设置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')输入框组件TextInput设置输入提示文本我们平常使用输入框时常常看到输入框上会有提示文字，例如登录账号时会有“请输入账号”这样的文本提示，当用户输入内容后，提示文本就消失了。使用placeholder设置提示文本使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。TextInput({

placeholder:

'请输入帐号'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})输入框组件TextInput设置输入类型可以使用type属性来设置输入框类型。例如密码输入框，一般输入密码的时候，为了用户密码安全，内容会显示为“”。这种情况就可以设置type属性值为InputType.Password实现，如下面示例所示。TextInput({

placeholder:

'请输入密码'

})

.type(InputType.Password)输入框组件TextInput输入类型InputType枚举值：Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。Password：密码输入模式。Email：e-mail地址输入模式。Number：纯数字输入模式。输入框组件TextInput获取输入文本在onChange事件回调方法中，获取输入框的输入文本。如下面示例所示。

TextInput({

placeholder:

'请输入账号'

})

.onChange((value:

string)

=>

{

this.text

=

value//this.text为@State修饰的状态变量

})按钮组件ButtonButton组件主要用来响应点击操作，可以包含子组件。Button使用示例Button('登录',

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//处理点击事件逻辑

}))示例中的代码，type用于定义按钮样式，ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。并且给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。按钮组件Button按钮样式ButtonType枚举值Capsule：胶囊型按钮（圆角默认为高度的一半）。Circle：圆形按钮。Normal：普通按钮（默认不带圆角）。按钮组件Button包含子组件Button组件可以包含子组件，例如在Button组件包含了一个Image组件。Button({

type:

ButtonType.Circle,

stateEffect:

true

})

{

Image($r('app.media.icon_delete'))

.width(30)

.height(30)}.width(55).height(55).backgroundColor('#317aff')开关组件ToggleToggle组件表示开关，开关状态的初始化用isOn参数进行设置；使用type设置开关样式，开关状态切换时触发onChange事件回调方法。Toggle({

isOn:true,

//设置开关状态组件初始化状态为开

type:

ToggleType.Switch})//设置组件为开关样式

.selectedColor("#ffa6c88c")//设置组件打开状态的背景颜色

.switchPointColor(Color.Red)//设置

type类型为

Switch时的圆形滑块颜色

.onChange((isOn)

=>

{//事件回调,isOn为开与关的状态值

console.log(

"开关状态："

+

isOn)

})Toggle的type样式：ToggleType.Switch为开关样式；ToggleType.Checkbox为单选框样式；ToggleType.Button为按钮样式，可以在Toggle中加入子组件。promptAction弹窗promptAction弹窗promptAction可以创建并显示文本提示框、对话框和操作菜单。promptAction.showToast弹出文本提示框，会自动消失promptAction.showDialog弹出对话框promptAction.showActionMenu弹出操作菜单在@mptAction模块里提供，使用时需要导入@mptAction模块import

promptAction

from

'@mptAction';

//导入文本提示框模块promptAction弹窗用promptAction.showToast弹出文本提示框接口说明：名称类型必填说明messagestring|

Resource9+是显示的文本信息。durationnumber否默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。bottomstring|number否设置弹窗边框距离屏幕底部的位置。ShowToastOptions为文本提示框的选项，参数说明：showToast(options:ShowToastOptions):voidpromptAction.showToast使用示例import

promptAction

from

'@mptAction';

//导入模块…

promptAction.showToast({

message:

"消息",

//显示文本，必填项

duration:

2000,

//显示时长，可选项，单位毫秒，范围

[1500,

10000]，默1500

bottom:

100

//Toast的显示位置距离底部的间距，可选项

})promptAction弹窗用promptAction.showDialog弹出对话框接口说明：ShowDialogOptions为对话框的选项，参数说明：showDialog(options:ShowDialogOptions,callback:AsyncCallback<ShowDialogSuccessResponse>):void名称类型必填说明titlestring|

Resource否对话框标题。messagestring|

Resource否对话框内容。buttons[Button,Button?,Button?]否对话框按钮。按钮数量1至3个。promptAction.showDialog使用示例promptAction.showDialog({

title:

'对话框标题',

message:

'对话框内容',

buttons:

[

{

text:

'button1',

color:

'#000000'

},

{

text:

'button2',

color:

'#000000'

}

]},

(err,

data)

=>

{

if

(err)

{

console.info('弹出对话框错误，原因:

'

+

err);

return;

}

console.info('弹出对话框成功,你点击的对话框序号:

'

+

data.index);});promptAction弹窗用promptAction.showActionMenu弹出操作菜单接口说明：ActionMenuOptions为操作菜单的选项，参数说明：showActionMenu(options:ActionMenuOptions,callback:AsyncCallback<ActionMenuSuccessResponse>):void名称类型必填说明titlestring|

Resource否操作菜单标题。buttons[Button,Button?,Button?,Button?,Button?,Button?]是操作菜单选项按钮。按钮数量1至6个。promptAction.showActionMenu使用示例promptAction.showActionMenu({

title:

'标题',

buttons:

[

{

text:

'item1',

color:

'#666666'

},

{

text:

'item2',

color:

'#000000'

},

]},

(err,

data)

=>

{

if

(err)

{

console.info('弹窗菜单错误，错误原因:

'

+

err);

return;

}

console.info(‘弹出菜单成功,你点击的菜单序号:

'

+

data.index);});自定义组件010203自定义组件概述自定义组件的使用组件和页面的生命周期自定义组件概述自定义组件是可复用的UI单元，可组合其他组件，使用@Component装饰。自定义组件必须有：@Component装饰struct关键字修饰build()方法自定义组件可加入：@Entry装饰属性与方法build(）内的各种组件...自定义组件的使用在同一个模块文件中自定义的组件，可以直接调用。自定义组件的使用调用不同模块下的自定义组件定义自定义组件时需要使用关键字exportdefault修饰进行导出自定义组件的使用使用其他模块的自定义组件时需要在该模块中使用import进行导入自定义组件的使用若定义自定义组件时使用关键字export导出，则导入时名称需要加上{}组件和页面的生命周期每个组件都有生命周期的回调方法，这些回调方法在组件的不同生命周期状态中自动调用，用户不可以调用生命周期的回调方法，但可以在组件的生命周期方法中编写业务逻辑处理。组件的生命周期函数有两个：aboutToAppear()：自定义组件在构建的时候调用aboutToDisappear()：自定义组件被销毁时调用组件和页面的生命周期当一个组件使用了@Entry装饰器后，它成为一个页面，页面的生命周期三个，分别是opPageShow()、onPageHide()和onBackPress()。opPageShow()：当页面展示时调用onPageHide()：当页面隐藏时调用onBackPress()：当页面按返回键时调用渲染控制0102条件渲染循环渲染条件渲染在ArkUI声明式开发范式中，页面中的组件可以使用if/else条件渲染，以达到根据应用的不同状态，渲染对应状态下的UI内容。条件渲染使用说明：if/else条件语句可以使用状态变量，并且在更新场景下必须使用状态变量。使用if/else可以使子组件的渲染依赖条件语句。必须在容器组件内使用。某些容器组件限制子组件的类型或数量，将if/else用于这些组件内时，这些限制将同样应用于if/else语句内创建的组件。例如Grid容器组件的子组件仅支持GridItem组件。条件渲染if/else使用示例：@Componentstruct

MyComponent

{

@State

count:

number

=

300

build()

{

Column()

{

if

(this.count

<

0)

{

Text('count

is

negative').fontSize(14)

}

else

if

(this.count

%

2

===

0)

{

Text('count

is

even').fontSize(14)

}

else

{

Text('count

is

odd').fontSize(14)

}

}

}}循环渲染在ArkUI声明式开发范式中，重复出现的组件可以用ForEach循环来迭代渲染，组件需要的数据放在数组中，ForEach在迭代数组时创建相应的组件并传入数据。ForEach语句结构：ForEach(

arr:

any[],

itemGenerator:

(item:

any,

index?:

number)

=>

void,

keyGenerator?:

(item:

any,

index?:

number)

=>

string

)循环渲染ForEach参数说明：参数名参数类型必填参数描述arrany[]是必须是数组，允许设置为空数组，空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。itemGenerator(item:any,index?:number)=>void是生成子组件的箭头函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。keyGenerator(item:any,index?:number)=>string否匿名函数，用于给数组中的每一个数据项生成唯一且固定的键值。默认使用index+JSON.stringify(item)。为了使开发框架能够更好地识别数组更改，提高性能，建议开发者提供自定义的键值生成器。循环渲染ForEach使用说明：ForEach必须在容器组件内使用。生成的子组件应当是允许包含在ForEach父容器组件中的子组件。允许子组件生成器函数中包含if/else条件渲染。键值生成器必须针对每个数据生成唯一的值，如果键值相同，将导致键值相同的UI组件被框架忽略，从而无法在父容器内显示。不提供keyGenerator时，默认使用index+JSON.stringify(item)。itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。循环渲染ForEach使用示例：@Entry@Componentstruct

MyComponent

{

@State

arr:

number[]

=

[10,

20,

30]

build()

{

Column({

space:

5

})

{

Button('Reverse

Array')

.onClick(()

=>

{

this.arr.reverse()

})

ForEach(this.arr,

(item:

number)

=>

{

Text(`item

value:

${item}`).fontSize(18)

Divider().strokeWidth(2).color(Color.Black)

},

(item:

number)

=>

item.toString())

}

}}状态管理基本概念状态管理基本概念ArkTS提供了多维度的状态管理机制，在ArkUI开发框架中，和UI相关联的数据，不仅可以在组件内使用，还可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，也可以是应用全局范围内的传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和UI的联动。基本概念基本概念装饰器装饰内容说明@State基本数据类型，类，数组修饰的状态数据被修改时会执行自定义组件build方法中的部分UI描述（使用该状态变量的UI组件）来进行UI界面更新。@Prop基本数据类型，类，数组修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，当前组件会重新渲染。@Link基本数据类型，类，数组父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。@Observed类@Observed应用于类，表示该类中的数据变更被UI页面管理。@ObjectLink被@Observed所装饰类的对象@ObjectLink装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会重新渲染。@Provide基本数据类型，类，数组@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面重新渲染。@Consume基本数据类型，类，数组@Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。页面级变量的状态管理基本概念应用级变量的状态管理AppStorage是整个应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例AppStorage对象，并提供相应的装饰器和接口供应用程序使用。@StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。@StorageProp：@StorageProp(name)将UI组件数据与AppStorage进行单向同步，AppStorage中值的更改会更新UI组件中的数据，但UI组件无法更改AppStorage中的数据。AppStorage还提供了用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态数据，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。页面级变量的状态管理页面级变量的状态管理装饰器装饰内容说明@State基本数据类型，类，数组修饰的状态数据被修改时会执行自定义组件build方法中的部分UI描述（使用该状态变量的UI组件）来进行UI界面更新。@Prop基本数据类型修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，当前组件会重新渲染。@Link基本数据类型，类，数组父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。@Observed类@Observed应用于类，表示该类中的数据变更被UI页面管理。@ObjectLink被@Observed所装饰类的对象@ObjectLink装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会重新渲染。@Provide基本数据类型，类，数组@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面重新渲染。@Consume基本数据类型，类，数组@Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。@State@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法中的部分UI描述（使用该状态变量的UI组件相关描述）进行UI刷新。@State状态数据具有以下特征：支持多种类型数据：支持class、number、boolean、string强类型数据的值类型和引用类型，以及这些强类型构成的数组，即Array<class>、Array<string>、Array<boolean>、Array<number>。不支持any。支持多实例：组件不同实例的内部状态数据独立。内部私有：标记为@State的属性是私有变量，只能在组件内访问。需要本地初始化：必须为所有@State变量分配初始值，变量未初始化可能导致未定义的框架异常行为。创建自定义组件时支持通过状态变量名设置初始值：在创建组件实例时，可以通过变量名显式指定@State状态变量的初始值。@State@State使用示例1.定义一个MyComponent组件，使用@State装饰count变量@Componentstruct

MyComponent

{

@State

count:

number

=

0

private

title:

string

=

''

private

increaseBy:

number

=

1

build()

{

Column()

{

Text(this.title).fontSize(20)

Button(`Click

to

increase

count=${this.count}`)

.margin(20)

.onClick(()

=>

{

//

修改内部状态变量count

this.count

+=

this.increaseBy

})

}

}}@State2.在页面中创建两个MyComponent组件实例，并初始化实例变量。完成后在预览器中测试效果。@Entry@Componentstruct

EntryComponent

{

build()

{

Column()

{

MyComponent({

title:

'MyComponent1',

count:

0,

increaseBy:

1

})

//

第1个MyComponent实例

MyComponent({

title:

'MyComponent2',

count:

2,

increaseBy:

2

})

//

第2个MyComponent实例

}

}}@Prop@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但变量的更改不会通知给父组件，父组件变量的更改会同步到@prop装饰的变量，即@Prop属于单向数据绑定。@Prop状态数据具有以下特征：支持多种类型数据：支持number、boolean、string类型数据私有：仅支持组件内访问；支持多个实例：一个组件中可以定义多个标有@Prop的属性；创建自定义组件时将按值传递方式给@Prop变量进行初始化：在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。@Prop@Prop使用示例1.定义一个CountDownComponent组件，使用@Prop装饰count变量@