鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Text)

显示一段文本的组件。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含Span和ImageSpan子组件。

接口

Text(content?: string | Resource, value?: TextOptions)

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名参数类型必填参数描述
contentstring | Resource文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。
默认值:' '
value11+TextOptions文本组件初始化选项。

属性

除支持通用属性和文本通用属性外,还支持以下属性:

名称参数类型描述
textAlignTextAlign设置文本段落在水平方向的对齐方式。
默认值:TextAlign.Start
说明:
文本段落宽度占满Text组件宽度;可通过align属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同,控制内容在顶部,Alignment.Start、Alignment.Center、Alignment.End效果相同,控制内容垂直居中,Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同,控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。
textAlign属性设置为TextAlign.JUSTIFY时,最后一行文本不参与两端对齐,为水平对齐首部效果。
从API version 9开始,该接口支持在ArkTS卡片中使用。
textOverflow{overflow: TextOverflow}设置文本超长时的显示方式。
默认值:{overflow: TextOverflow.Clip}
说明:
文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。从API version 11开始,建议优先组合wordBreak属性设置为WordBreak.BREAK_ALL方式实现字母为单位进行截断,使用示例。
overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时,需配合maxLines使用,单独设置不生效。设置TextOverflow.None与TextOverflow.Clip效果一样。
overflow设置为TextOverflow.MARQUEE时,文本在一行内滚动显示,设置maxLinescopyOption属性均不生效,此时不支持ImageSpan组件,并且在文本不可滚动时,设置textAlign属性生效;在文本可滚动时,设置textAlign属性不生效。
从API version 9开始,该接口支持在ArkTS卡片中使用。
maxLinesnumber设置文本的最大行数。
说明:
默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 textOverflow来指定截断方式。
从API version 9开始,该接口支持在ArkTS卡片中使用。
lineHeightstring | number | Resource设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。
从API version 9开始,该接口支持在ArkTS卡片中使用。
decoration{
type: TextDecorationType,
color?: ResourceColor
}
设置文本装饰线样式及其颜色。
默认值:{
type: TextDecorationType.None,
color:Color.Black
}
从API version 9开始,该接口支持在ArkTS卡片中使用。
baselineOffsetnumber | string设置文本基线的偏移量,默认值0。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
设置该值为百分比时,按默认值显示。
letterSpacingnumber | string设置文本字符间距。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
设置该值为百分比时,按默认值显示。
当取值为负值时,文字会发生压缩,负值过小时会将组件内容区大小压缩为0,导致无内容显示。
minFontSizenumber | string | Resource设置文本最小显示字号。
需配合maxFontSize以及maxline或布局大小限制使用,单独设置不生效,对子组件不生效。
自适应字号生效时,fontSize设置不生效。
从API version 9开始,该接口支持在ArkTS卡片中使用。
maxFontSizenumber | string | Resource设置文本最大显示字号。
需配合minFontSize以及maxline或布局大小限制使用,单独设置不生效,对子组件不生效。
自适应字号生效时,fontSize设置不生效。
从API version 9开始,该接口支持在ArkTS卡片中使用。
textCaseTextCase设置文本大小写。
默认值:TextCase.Normal
从API version 9开始,该接口支持在ArkTS卡片中使用。
copyOption9+CopyOptions组件支持设置文本是否可复制粘贴。
默认值:CopyOptions.None
该接口支持在ArkTS卡片中使用。
说明:
设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice,长按文本,会弹出文本选择菜单,可选中文本并进行复制、全选操作。
draggableboolean设置选中文本拖拽效果。
不能和onDragStart事件同时使用;
需配合copyOption一起使用,设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice,并且draggable设置为true时,支持对选中文本的拖拽以及选中内容复制到输入框。
默认值:false
说明:
从 API version 9 开始支持。
textShadow10+ShadowOptions | Array<ShadowOptions>11+设置文字阴影效果。
说明:
不支持fill字段,不支持智能取色模式。
Text组件clip属性默认为true,超出组件大小区域的内容(例如文字阴影)会被截断。在Text组件内容超出组件大小区域场景下,建议设置clip属性为false达到完整文字阴影效果。
从API version 11开始,该接口支持以数组形式入参,实现多重文字阴影。
heightAdaptivePolicy10+TextHeightAdaptivePolicy设置文本自适应高度的方式。
默认值:TextHeightAdaptivePolicy.MAX_LINES_FIRST。
说明:
当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时,优先使用maxLines属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束,则尝试在minFontSizemaxFontSize的范围内缩小字体以显示更多文本。
当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时,优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中,则尝试在minFontSizemaxFontSize的范围内增大字体并使用最大可能的字体大小。
当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时,优先使用布局约束来调整文本高度。如果布局大小超过布局约束,则尝试在minFontSizemaxFontSize的范围内缩小字体以满足布局约束。如果将字体大小缩小到minFontSize后,布局大小仍然超过布局约束,则删除超过布局约束的行。
textIndent10+number | string设置首行文本缩进,默认值0。
font10+Font设置文本样式。包括字体大小、字体粗细、字体族和字体风格。
wordBreak11+WordBreak设置断行规则。
默认值:WordBreak.BREAK_WORD
说明:
从API version 11开始,该接口支持在ArkTS卡片中使用。
WordBreak.BREAK_ALL与{overflow: TextOverflow.Ellipsis},maxLines组合使用可实现英文单词按字母截断,超出部分以省略号显示
selection11+(selectionStart: number, selectionEnd: number)设置选中区域。选中区域高亮且显示手柄和文本选择菜单。
默认值:(-1,-1)
说明:
从API version 11开始,该接口支持在ArkTS卡片中使用。
copyOption设置为CopyOptions.None时,设置selection属性不生效。
overflow设置为TextOverflow.MARQUEE时,设置selection属性不生效。
selectionStart大于等于selectionEnd时不选中。可选范围为[0, textSize],textSize为文本内容最大字符数,入参小于0处理为0,大于textSize处理为textSize。
selectionStartselectionEnd在截断不可见区域时不选中。截断为false时超出父组件的文本选中区域生效。
ellipsisMode11+EllipsisMode设置省略位置。
默认值:EllipsisMode.END
说明:
从API version 11开始,该接口支持在ArkTS卡片中使用。
ellipsisMode属性需要配合overflow设置为TextOverflow.Ellipsis以及maxLines使用,单独设置ellipsisMode属性不生效。
EllipsisMode.START和EllipsisMode.CENTER仅在单行超长文本生效。
enableDataDetector11+boolean使能文本识别。
默认值: false
说明:
所识别实体的fontColordecoration会被更改为如下样式:
fontColor:Color.Blue
decoration: {
type: TextDecorationType.Underline,
color: Color.Blue
}
该接口依赖设备底层应具有文本识别能力,否则设置不会生效。
enableDataDetector设置为true,同时不设置dataDetectorConfig属性时,默认识别所有类型的实体。
copyOption设置为CopyOptions.None时,该功能不会生效。
dataDetectorConfig11+{
types: TextDataDetectorType,
onDetectResultUpdate: (callback:(result: string) => void)
}
文本识别配置。
默认值:{
types: [ ],
onDetectResultUpdate: null
}
说明:
需配合enableDataDetector一起使用,设置enableDataDetector为true时,dataDetectorConfig的配置才能生效。
types:文本识别的实体类型。设置typesnull或者[]时,识别所有类型的实体,否则只识别指定类型的实体。
onDetectResultUpdate:文本识别成功后,触发onDetectResultUpdate回调。
result:文本识别的结果,Json格式。
bindSelectionMenu11+{
spantype: TextSpanType,
content: CustomBuilder,
responseType: TextResponseType ,
options?: SelectionMenuOptions
}
设置自定义选择菜单。
默认值:{
spanType: TextSpanType.TEXT
content:空
responseType: TextResponseType.LONG_PRESS
}
说明:
bindSelectionMenu长按响应时长为600ms,bindContextMenu长按响应时长为800ms,同时绑定且触发方式均为长按时,优先响应bindSelectionMenu

说明:

不支持Text内同时存在文本内容和Span或ImageSpan子组件。如果同时存在,只显示Span或ImageSpan内的内容。

通用属性中形状裁剪clip属性,在Text组件中,默认值为true,即文本内容大于组件内容时,文本会截断。如果需要显示超出的部分,可以设置clip为false。

字体排版引擎会对开发者传入的宽度width进行向下取整,保证是整型像素后进行排版。如果字体排版引擎向上取整,可能会出现文字右侧被截断。

事件

除支持通用事件外,还支持以下事件:

名称功能描述
onCopy(callback:(value: string) => void)11+长按文本内部区域弹出剪贴板后,点击剪切板复制按钮,触发该回调。
value:复制的文本内容。
说明:
从API version 11开始,该接口支持在ArkTS卡片中使用。
目前文本复制仅支持文本。
onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)11+文本选择的位置发生变化时,触发该回调。
selectionStart:文本选择区域起始位置,文本框中文字的起始位置为0。
selectionEnd:文本选择区域结束位置。

TextOptions11+

Text初始化参数。

名称类型必填说明
controllerTextController文本控制器。

TextController11+

Text组件的控制器。

导入对象

controller: TextController = new TextController()

closeSelectionMenu

closeSelectionMenu(): void

关闭自定义选择菜单或系统默认选择菜单。

示例

示例1

// xxx.ets
@Entry
@Component
struct TextExample1 {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {// 文本水平方向对齐方式设置// 单行文本Text('textAlign').fontSize(9).fontColor(0xCCCCCC)Text('TextAlign set to Center.').textAlign(TextAlign.Center).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('TextAlign set to Start.').textAlign(TextAlign.Start).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('TextAlign set to End.').textAlign(TextAlign.End).fontSize(12).border({ width: 1 }).padding(10).width('100%')// 多行文本Text('This is the text content with textAlign set to Center.').textAlign(TextAlign.Center).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with textAlign set to Start.').textAlign(TextAlign.Start).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with textAlign set to End.').textAlign(TextAlign.End).fontSize(12).border({ width: 1 }).padding(10).width('100%')// 文本超长时显示方式Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)// 超出maxLines截断内容展示Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.').textOverflow({ overflow: TextOverflow.Clip }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)// 超出maxLines展示省略号Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('').join('\u200B')).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontSize(12).border({ width: 1 }).padding(10)Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)Text('This is the text with the line height set. This is the text with the line height set.').fontSize(12).border({ width: 1 }).padding(10)Text('This is the text with the line height set. This is the text with the line height set.').fontSize(12).border({ width: 1 }).padding(10).lineHeight(20)}.height(600).width(350).padding({ left: 35, right: 35, top: 35 })}
}

textExp1

示例2

@Entry
@Component
struct TextExample2 {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {Text('decoration').fontSize(9).fontColor(0xCCCCCC)Text('This is the text content with the decoration set to LineThrough and the color set to Red.').decoration({type: TextDecorationType.LineThrough,color: Color.Red}).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with the decoration set to Overline and the color set to Red.').decoration({type: TextDecorationType.Overline,color: Color.Red}).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with the decoration set to Underline and the color set to Red.').decoration({type: TextDecorationType.Underline,color: Color.Red}).fontSize(12).border({ width: 1 }).padding(10).width('100%')// 文本基线偏移Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)Text('This is the text content with baselineOffset 0.').baselineOffset(0).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with baselineOffset 30.').baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with baselineOffset -20.').baselineOffset(-20).fontSize(12).border({ width: 1 }).padding(10).width('100%')// 文本字符间距Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)Text('This is the text content with letterSpacing 0.').letterSpacing(0).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with letterSpacing 3.').letterSpacing(3).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('This is the text content with letterSpacing -1.').letterSpacing(-1).fontSize(12).border({ width: 1 }).padding(10).width('100%')Text('textCase').fontSize(9).fontColor(0xCCCCCC)Text('This is the text content with textCase set to Normal.').textCase(TextCase.Normal).fontSize(12).border({ width: 1 }).padding(10).width('100%')// 文本全小写展示Text('This is the text content with textCase set to LowerCase.').textCase(TextCase.LowerCase).fontSize(12).border({ width: 1 }).padding(10).width('100%')// 文本全大写展示Text('This is the text content with textCase set to UpperCase.').textCase(TextCase.UpperCase).fontSize(12).border({ width: 1 }).padding(10)}.height(700).width(350).padding({ left: 35, right: 35, top: 35 })}
}

textExp1

示例3

textShadow,heightAdaptivePolicy,TextOverflow.MARQUEE使用示例:

@Entry
@Component
struct TextExample {build() {Column({ space: 8 }) {Text('textShadow').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')// 设置文字阴影效果Text('textShadow').width('80%').height(55).fontSize(40).lineHeight(55).textAlign(TextAlign.Center).textShadow({ radius: 10, color: Color.Black, offsetX: 0, offsetY: 0 }).borderWidth(1)Divider()// 设置文本自适应高度的方式Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')Text('This is the text with the height adaptive policy set').width('80%').height(90).borderWidth(1).minFontSize(10).maxFontSize(30).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis }).heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)Text('This is the text with the height adaptive policy set').width('80%').height(90).borderWidth(1).minFontSize(10).maxFontSize(30).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis }).heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)Text('This is the text with the height adaptive policy set').width('80%').height(90).borderWidth(1).minFontSize(10).maxFontSize(30).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis }).heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)Divider()Text('marquee').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')// 设置文本超长时以跑马灯的方式展示Text('This is the text with the text overflow set marquee').width(300).borderWidth(1).textOverflow({ overflow: TextOverflow.MARQUEE })}}
}

示例4

wordBreak使用示例

@Entry
@Component
struct TextExample4 {@State type: string = 'WordBreakType:Normal且clip为true'@State text: string = 'This is set wordBreak to WordBreak text content This is set wordBreak to WordBreak text content.'build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {Text(this.type).fontSize(9).fontColor(0xCCCCCC)Text('This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.').fontSize(12).border({ width: 1 }).wordBreak(WordBreak.NORMAL).lineHeight(20).maxLines(2)Text('WordBreakType:Normal且clip为false').fontSize(9).fontColor(0xCCCCCC)Text('This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.').fontSize(12).border({ width: 1 }).wordBreak(WordBreak.NORMAL).lineHeight(20).maxLines(2).clip(false)Text("WordBreakType:BreakAll").fontSize(9).fontColor(0xCCCCCC)Text(this.text).fontSize(12).border({ width: 1 }).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).wordBreak(WordBreak.BREAK_ALL).lineHeight(20)Text("WordBreakType:BreakWord").fontSize(9).fontColor(0xCCCCCC)Text(this.text).fontSize(12).border({ width: 1 }).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).wordBreak(WordBreak.BREAK_WORD).lineHeight(20)}.height(300).width(335).padding({ left: 35, right: 35, top: 35 })}
}

示例5

selection, onCopy使用示例

@Entry
@Component
struct TextExample5 {@State onCopy: string = ''@State text: string = 'This is set selection to Selection text content This is set selection to Selection text content.'@State start: number = 0@State end: number = 20build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {Text(this.text).fontSize(12).border({ width: 1 }).lineHeight(20).margin(30).copyOption(CopyOptions.InApp).selection(this.start, this.end).onCopy((value: string) => {this.onCopy = value})Button('Set text selection').margin({left:20}).onClick(() => {// 变更文本选中起始点、终点this.start = 10this.end = 30})Text(this.onCopy).fontSize(12).margin(10).key('copy')}.height(600).width(335).padding({ left: 35, right: 35, top: 35 })}
}

示例6

ellipsisMode使用示例

@Entry
@Component
struct TextExample6 {@State text: string = 'This is set ellipsisMode to EllipsisMode text content This is set ellipsisMode to EllipsisMode text content.'@State ellipsisModeIndex: number = 0;@State ellipsisMode: EllipsisMode[] = [EllipsisMode.START, EllipsisMode.CENTER, EllipsisMode.END]@State ellipsisModeStr: string[] = ['START', 'CENTER', 'END']build() {Column() {Text(this.text).fontSize(16).border({ width: 1 }).lineHeight(20).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).ellipsisMode(this.ellipsisMode[this.ellipsisModeIndex]).width(300).margin({ left: 20, top: 20 })Row() {Button('更改省略号位置:' + this.ellipsisModeStr[this.ellipsisModeIndex]).onClick(() => {this.ellipsisModeIndex++if(this.ellipsisModeIndex > (this.ellipsisModeStr.length - 1)) {this.ellipsisModeIndex = 0}})}.margin({ top: 10 })}}
}

示例7

enableDataDetector和dataDetectorConfig使用示例

@Entry
@Component
struct TextExample7 {@State phoneNumber: string = '(86) (755) ********';@State url: string = 'www.********.com';@State email: string = '***@example.com';@State address: string = 'XX省XX市XX区XXXX';@State enableDataDetector: boolean = true;@State types: TextDataDetectorType[] = [];build() {Row() {Column() {Text('电话号码:' + this.phoneNumber + '\n' +'链接:' + this.url + '\n' +'邮箱:' + this.email + '\n' +'地址:' + this.address).fontSize(16).copyOption(CopyOptions.InApp).enableDataDetector(this.enableDataDetector).dataDetectorConfig({types : this.types, onDetectResultUpdate: (result: string)=>{}}).textAlign(TextAlign.Center).borderWidth(1).padding(10).width('100%')}.width('100%')}.height('100%')}
}

示例8

bindSelectionMenu,onTextSelectionChange及closeSelectionMenu使用示例

@Entry
@Component
struct Demo {controller: TextController = new TextController();options: TextOptions = { controller: this.controller };build() {Column() {Column() {Text(undefined, this.options) {Span('Hello World')ImageSpan($r('app.media.icon')).width('100px').height('100px').objectFit(ImageFit.Fill).verticalAlign(ImageSpanAlignment.CENTER)}.copyOption(CopyOptions.InApp).bindSelectionMenu(TextSpanType.IMAGE, this.LongPressImageCustomMenu, TextResponseType.LONG_PRESS, {onDisappear: () => {console.info(`自定义选择菜单关闭时回调`);},onAppear: () => {console.info(`自定义选择菜单弹出时回调`);}}).bindSelectionMenu(TextSpanType.TEXT, this.RightClickTextCustomMenu, TextResponseType.RIGHT_CLICK).bindSelectionMenu(TextSpanType.MIXED, this.SelectMixCustomMenu, TextResponseType.SELECT).onTextSelectionChange((selectionStart: number, selectionEnd: number) => {console.info(`文本选中区域变化回调, selectionStart: ${selectionStart}, selectionEnd: ${selectionEnd}`);}).borderWidth(1).borderColor(Color.Red).width(200).height(100)}.width('100%').backgroundColor(Color.White).alignItems(HorizontalAlign.Start).padding(25)}.height('100%')}@BuilderRightClickTextCustomMenu() {Column() {Menu() {MenuItemGroup() {MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 1", labelInfo: "" }).onClick((event) => {this.controller.closeSelectionMenu();})MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 2", labelInfo: "" })MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 3", labelInfo: "" })}}.MenuStyles()}}@BuilderLongPressImageCustomMenu() {Column() {Menu() {MenuItemGroup() {MenuItem({ startIcon: $r('app.media.app_icon'), content: "Long Press Image Menu 1", labelInfo: "" }).onClick((event) => {this.controller.closeSelectionMenu();})MenuItem({ startIcon: $r('app.media.app_icon'), content: "SLong Press Image Menu 2", labelInfo: "" })MenuItem({ startIcon: $r('app.media.app_icon'), content: "Long Press Image Menu 3", labelInfo: "" })}}.MenuStyles()}}@BuilderSelectMixCustomMenu() {Column() {Menu() {MenuItemGroup() {MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 1", labelInfo: "" }).onClick((event) => {this.controller.closeSelectionMenu();})MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 2", labelInfo: "" })MenuItem({ startIcon: $r('app.media.app_icon'), content: "Select Mixed Menu 3", labelInfo: "" })}}.MenuStyles()}}
}@Extend(Menu)
function MenuStyles() {.radius($r('sys.float.ohos_id_corner_radius_card')).clip(true).backgroundColor('#F0F0F0')
}

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

腾讯T10级高工技术,安卓全套VIP内容 →Android全套学习资料

腾讯T10级高工技术,安卓全套VIP课程

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/743302.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读——ViTAE

ViTAE: Vision Transformer Advanced by Exploring Intrinsic Inductive Bias ViTAE旨在将细胞神经网络中固有的IB引入视觉转换器。如图2所示&#xff0c;ViTAE由两种类型的细胞组成&#xff0c;即RC和NC。RC负责将多尺度上下文和局部信息嵌入到令牌中&#xff0c;NC用于进一步…

AUTOSAR软件配置(3):MCAL下载安装

前言 所有的NXP软件的下载安装都是需要自己在官网去注册账号的 中文的NXP官方网址&#xff1a;恩智浦半导体官方网站 | NXP 半导体 注&#xff1a;本文指导安装教程将以S32K144平台为例展开。 下载 找到下载入口的指引 然后在左侧的导航栏找到AUTOSAR 然后选择4.2版本 在…

java-集合工具类Collections

我们在使用它的时候记得导包 常见API 我们就简单看看第一第二个方法&#xff0c;代码如下&#xff0c;其余的知道用就行

信息系统项目管理师--沟通管理

IT 项⽬成功有关的最重要的四个因素是&#xff1a;主管层的⽀持、⽤户参与、有经验的项⽬经理和清晰的业务⽬标 项⽬沟通管理是确保及时、正确地产⽣、收集、分发、存储和最终处理项⽬信息所需的过程 项⽬沟通管理由两部分组成&#xff1a;⼀是制定策略&#xff0c;确保沟通对…

leetcode一天一题-第1天

为了增加自己的代码实战能力&#xff0c;希望通过刷leetcode的题目&#xff0c;不断提高自己&#xff0c;增加对代码的理解&#xff0c;同时开拓自己的思维方面。 题目名称&#xff1a;两数之和 题目编号&#xff1a;1 题目介绍&#xff1a; 给定一个整数数组 nums 和一个整数…

中介者模式(Mediator Pattern)

中介者模式 说明 中介者模式&#xff08;Mediator Pattern&#xff09;属于行为型模式&#xff0c;又称为调解者模式或调停者模式。用一个中介对象封装一系列的对象交互&#xff0c;中介者使各对象不需要显示地相互作用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立…

【AI大模型应用开发】【LangChain系列】9. 实用技巧:大模型的流式输出在 OpenAI 和 LangChain 中的使用

大家好&#xff0c;我是同学小张&#xff0c;日常分享AI知识和实战案例欢迎 点赞 关注 &#x1f44f;&#xff0c;持续学习&#xff0c;持续干货输出。v: jasper_8017 一起交流&#x1f4ac;&#xff0c;一起进步&#x1f4aa;。微信公众号也可搜【同学小张】 &#x1f64f; 本…

Python使用openpyxl库或pandas库创建.xlsx格式的Excel文件,并向文件不同的sheet按行或按列写入内容

import openpyxl# 创建-一个Workbook对象 wb openpyxl.Workbook()# 创建多个工作表 sheet1 wb.active sheet1.title "s1"sheet2 wb.create_sheet("s2")# 在不同的工作表中写入数据 sheet1["A1"] Data for Sheet1 sheet1["A2"] D…

数学问题难解?新研究提出MathScale方法,让AI更懂数学推理

引言&#xff1a;数学问题解决中的语言模型挑战 数学问题解决是一个复杂的认知过程&#xff0c;它要求参与者不仅要掌握数学知识&#xff0c;还要能够进行多步骤的逻辑推理。近年来&#xff0c;大语言模型&#xff08;LLMs&#xff09;在解决问题方面展现出了显著的能力&#…

18. 查看帖子详情

文章目录 一、建立路由二、开发GetPostDetailHandler三、编写logic四、编写dao层五、编译测试运行 一、建立路由 router/route.go v1.GET("/post/:id", controller.GetPostDetailHandler)二、开发GetPostDetailHandler controller/post.go func GetPostDetailHand…

java数据结构与算法刷题-----LeetCode90. 子集 II

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 解题思路:时间复杂度O( n 2 ∗ n n^2*n n2∗n),空间复杂度O(n) 7…

JAVA初阶数据结构栈(工程文件后续会上传)(+专栏数据结构练习是完整版)

1.栈的概念讲解(Stack)&#xff09; 定义&#xff1a;栈是一种先进后出的数据结构 要想拿到12就要把它头上的所有东西给移出去 2.栈的实现&#xff08;代码&#xff09; 2.1栈的方法逻辑的讲解 &#xff08;1&#xff09;新建一个测试类Frank &#xff08;2&#xff09;进…

机器学习模型—决策树

机器学习模型—决策树 决策树是最强大和最流行的算法之一。Python 决策树算法属于监督学习算法的范畴。它适用于连续输出变量和分类输出变量也就是可以处理分类和回归任务。在本文中,我们将在 UCI 上提供平衡秤体重和距离数据库上用 Python 算法实现决策树。 决策树算法,是…

【MySQL探索之旅】MySQL数据表的增删查改(初阶)

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &…

【Java设计模式】十九、中介者模式

文章目录 1、中介者模式2、案例3、总结 1、中介者模式 如图&#xff1a; 同事类之间关联较多时&#xff0c;整体出现网状结构&#xff0c;耦合度极高。一个对象一变动&#xff0c;好多对象都得改。若变为右边的星形结构&#xff0c;则一个类的变动&#xff0c;只影响自身与中介…

二叉树算法

递归序 每个节点都能回到3次! 相当于2执行完然后返回了代码会往下走,来到3节点 小总结: 也就是4节点先来到自己一次,不会执行if,先调用自己左边的那个函数,但是是null,直接返回。 这个函数执行完了,就会回到自己,调用自己右边的那个函数,结果又是空,又返回,回到…

鸿蒙API9+axios封装一个通用工具类

使用方式&#xff1a; 打开Harmony第三方工具仓&#xff0c;找到axios&#xff0c;如图&#xff1a; 第三方工具仓网址&#xff1a;https://ohpm.openharmony.cn/#/cn/home 在你的项目执行命令&#xff1a;ohpm install ohos/axios 前提是你已经装好了ohpm &#xff0c;如果没…

最适合Oracle数据库的Linux操作系统?

先声明&#xff1a;以下观点仅供参考。我只引用网上的一些观点&#xff0c;包括官网等。 Oracle数据库认证的Linux操作系统 最近老被问到Oracle Linux免费吗&#xff1f;因为用户需要安装Oracle数据库&#xff0c;面临选择操作系统的问题。 首先&#xff0c;Oracle数据库 19…

考研C语言复习进阶(2)

目录 1. 字符指针 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 4. 函数指针 5. 函数指针数组 6. 指向函数指针数组的指针 7. 回调函数 8.三步辗转法 9. 指针和数组笔试题解析 10. 指针笔试题 指针的主题&#xff0c;我们在初级阶段的《指…

【小沐学C#】C#文件读写方式汇总

文章目录 1、简介2、相关类介绍3、代码示例3.1 FileStream&#xff08;流文件&#xff09;3.2 StreamReader / StreamWriter &#xff08;文本文件&#xff09;3.2.1 StreamReader3.2.2 StreamWriter 3.3 BinaryReader / BinaryWriter &#xff08;二进制文件&#xff09;3.3.1…