鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：TabContent）

仅在Tabs中使用，对应一个切换页签的内容视图。

说明：

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

子组件

支持单个子组件。

说明：

可内置系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。

接口

TabContent()

属性

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

名称参数类型描述
tabBarstring | Resource |
CustomBuilder8+| {
icon?: string | Resource,
text?: string | Resource
}		设置TabBar上显示内容。
CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。
>  说明：
> 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。
设置的内容超出tabbar页签时进行裁切。
tabBar9+SubTabBarStyle | BottomTabBarStyle设置TabBar上显示内容。
SubTabBarStyle: 子页签样式，参数为文字。
BottomTabBarStyle: 底部页签和侧边页签样式，参数为文字和图片。
说明：
底部样式没有下划线效果。
icon异常时显示灰色图块。

说明：

  • TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
  • TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
  • vertical属性为false值，交换上述2个限制。
  • TabContent组件不支持内容过长时页面的滑动，如需页面滑动，可嵌套List使用。

SubTabBarStyle9+

子页签样式。

constructor

constructor(content: string | Resource)

SubTabBarStyle的构造函数。

参数：

参数名参数类型必填参数描述
contentstring | Resource是页签内的文字内容。从API version 10开始，content类型为ResourceStr。

of10+

static of(content: ResourceStr)

SubTabBarStyle的静态构造函数。

参数：

参数名参数类型必填参数描述
contentResourceStr是页签内的文字内容。

属性

支持以下属性：

名称参数类型描述
indicator10+IndicatorStyle设置选中子页签的下划线风格。子页签的下划线风格仅在水平模式下有效。
selectedMode10+SelectedMode设置选中子页签的显示方式。
默认值：SelectedMode.INDICATOR
board10+BoardStyle设置选中子页签的背板风格。子页签的背板风格仅在水平模式下有效。
labelStyle10+LabelStyle设置子页签的label文本和字体的样式。
padding10+Padding | Dimension设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。
默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp}

IndicatorStyle10+对象说明

名称参数类型必填描述
colorResourceColor否下划线的颜色和背板颜色。
默认值:#FF007DFF
heightLength否下划线的高度（不支持百分比设置）。
默认值:2.0
单位：vp
widthLength否下划线的宽度（不支持百分比设置）。
默认值：0.0
单位：vp
说明：
宽度设置为0时，按页签文本宽度显示。
borderRadiusLength否下划线的圆角半径（不支持百分比设置）。
默认值：0.0
单位：vp
marginTopLength否下划线与文字的间距（不支持百分比设置）。
默认值：8.0
单位：vp

SelectedMode10+枚举说明

名称描述
INDICATOR使用下划线模式。
BOARD使用背板模式。

BoardStyle10+对象说明

名称参数类型必填描述
borderRadiusLength否背板的圆角半径（不支持百分比设置）。
默认值：8.0
单位：vp

LabelStyle10+对象说明

名称参数类型必填描述
overflowTextOverflow否设置Label文本超长时的显示方式。默认值是省略号截断。
maxLinesnumber否设置Label文本的最大行数。如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。默认值是1。
minFontSizenumber | ResourceStr否设置Label文本最小显示字号（不支持百分比设置）。需配合maxFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。
maxFontSizenumber | ResourceStr否设置Label文本最大显示字号（不支持百分比设置）。需配合minFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。
heightAdaptivePolicyTextHeightAdaptivePolicy否设置Label文本自适应高度的方式。默认值是最大行数优先。
fontFont否设置Label文本字体样式。
当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重正常。
当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。

BottomTabBarStyle9+

底部页签和侧边页签样式。

constructor

constructor(icon: string | Resource, text: string | Resource)

BottomTabBarStyle的构造函数。

参数：

参数名参数类型必填参数描述
iconstring | Resource是页签内的图片内容。从API version 10开始，icon类型为ResourceStr。
textstring | Resource是页签内的文字内容。从API version 10开始，text类型为ResourceStr。

of10+

static of(icon: ResourceStr, text: ResourceStr) BottomTabBarStyle的静态构造函数。

参数：

参数名参数类型必填参数描述
iconResourceStr是页签内的图片内容。
textResourceStr是页签内的文字内容。

属性

支持以下属性：

名称参数类型描述
padding10+Padding | Dimension设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。
默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp}
verticalAlign10+VerticalAlign设置底部页签的图片、文字在垂直方向上的对齐格式。
默认值：VerticalAlign.Center
layoutMode10+LayoutMode设置底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。
默认值：LayoutMode.VERTICAL
symmetricExtensible10+boolean设置底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。
默认值：false
labelStyle10+LabelStyle设置子页签的label文本和字体的样式。

LayoutMode10+枚举说明

名称描述
AUTO若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。
VERTICAL页签内容上下排布。
HORIZONAL页签内容左右排布。

示例

示例1

// xxx.ets
@Entry
@Component
struct TabContentExample {@State fontColor: string = '#182431'@State selectedFontColor: string = '#007DFF'@State currentIndex: number = 0private controller: TabsController = new TabsController()@Builder tabBuilder(index: number) {Column() {Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg').width(24).height(24).margin({ bottom: 4 }).objectFit(ImageFit.Contain)Text(`Tab${index + 1}`).fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor).fontSize(10).fontWeight(500).lineHeight(14)}.width('100%')}build() {Column() {Tabs({ barPosition: BarPosition.End, controller: this.controller }) {TabContent() {Column() {Text('Tab1').fontSize(36).fontColor('#182431').fontWeight(500).opacity(0.4).margin({ top: 30, bottom: 56.5 })Divider().strokeWidth(0.5).color('#182431').opacity(0.05)}.width('100%')}.tabBar(this.tabBuilder(0))TabContent() {Column() {Text('Tab2').fontSize(36).fontColor('#182431').fontWeight(500).opacity(0.4).margin({ top: 30, bottom: 56.5 })Divider().strokeWidth(0.5).color('#182431').opacity(0.05)}.width('100%')}.tabBar(this.tabBuilder(1))TabContent() {Column() {Text('Tab3').fontSize(36).fontColor('#182431').fontWeight(500).opacity(0.4).margin({ top: 30, bottom: 56.5 })Divider().strokeWidth(0.5).color('#182431').opacity(0.05)}.width('100%')}.tabBar(this.tabBuilder(2))TabContent() {Column() {Text('Tab4').fontSize(36).fontColor('#182431').fontWeight(500).opacity(0.4).margin({ top: 30, bottom: 56.5 })Divider().strokeWidth(0.5).color('#182431').opacity(0.05)}.width('100%')}.tabBar(this.tabBuilder(3))}.vertical(false).barHeight(56).onChange((index: number) => {this.currentIndex = index}).width(360).height(190).backgroundColor('#F1F3F5').margin({ top: 38 })}.width('100%')}
}

tabContent

示例2

// xxx.ets
@Entry
@Component
struct TabContentExample {@State fontColor: string = '#182431'@State selectedFontColor: string = '#007DFF'@State currentIndex: number = 0private controller: TabsController = new TabsController()@Builder tabBuilder(index: number) {Column() {Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg').width(24).height(24).margin({ bottom: 4 }).objectFit(ImageFit.Contain)Text('Tab').fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor).fontSize(10).fontWeight(500).lineHeight(14)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}build() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {TabContent().tabBar(this.tabBuilder(0))TabContent().tabBar(this.tabBuilder(1))TabContent().tabBar(this.tabBuilder(2))TabContent().tabBar(this.tabBuilder(3))}.vertical(true).barWidth(96).barHeight(414).onChange((index: number) => {this.currentIndex = index}).width(96).height(414).backgroundColor('#F1F3F5').margin({ top: 52 })}.width('100%')}
}

tabContent

示例3

// xxx.ets
@Entry
@Component
struct TabBarStyleExample {build() {Column({ space: 5 }) {Text("子页签样式")Column() {Tabs({ barPosition: BarPosition.Start }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(new SubTabBarStyle('Pink'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Yellow)}.tabBar(new SubTabBarStyle('Yellow'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar(new SubTabBarStyle('Blue'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar(new SubTabBarStyle('Green'))}.vertical(false).scrollable(true).barMode(BarMode.Fixed).onChange((index: number) => {console.info(index.toString())}).width('100%').backgroundColor(0xF1F3F5)}.width('100%').height(200)Text("底部页签样式")Column() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Yellow)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))}.vertical(false).scrollable(true).barMode(BarMode.Fixed).onChange((index: number) => {console.info(index.toString())}).width('100%').backgroundColor(0xF1F3F5)}.width('100%').height(200)Text("侧边页签样式")Column() {Tabs({ barPosition: BarPosition.Start }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Yellow)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))}.vertical(true).scrollable(true).barMode(BarMode.Fixed).onChange((index: number) => {console.info(index.toString())}).width('100%').backgroundColor(0xF1F3F5)}.width('100%').height(400)}}
}

tabbarStyle

示例4

// xxx.ets
@Entry
@Component
struct TabsAttr {private controller: TabsController = new TabsController()@State indicatorColor: Color = Color.Blue;@State indicatorWidth: number = 40;@State indicatorHeight: number = 10;@State indicatorBorderRadius: number = 5;@State indicatorSpace: number = 10;@State subTabBorderRadius: number = 20;@State selectedMode: SelectedMode = SelectedMode.INDICATOR;private colorFlag: boolean = true;private widthFlag: boolean = true;private heightFlag: boolean = true;private borderFlag: boolean = true;private spaceFlag: boolean = true;build() {Column() {Button("下划线颜色变化").width('100%').margin({ bottom: '12vp' }).onClick((event?: ClickEvent) => {// 对Button组件的宽高属性进行动画配置if (this.colorFlag) {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorColor = Color.Red})} else {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorColor = Color.Yellow})}this.colorFlag = !this.colorFlag})Button("下划线高度变化").width('100%').margin({ bottom: '12vp' }).onClick((event?: ClickEvent) => {// 对Button组件的宽高属性进行动画配置if (this.heightFlag) {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorHeight = 20})} else {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorHeight = 10})}this.heightFlag = !this.heightFlag})Button("下划线宽度变化").width('100%').margin({ bottom: '12vp' }).onClick((event?: ClickEvent) => {// 对Button组件的宽高属性进行动画配置if (this.widthFlag) {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorWidth = 30})} else {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorWidth = 50})}this.widthFlag = !this.widthFlag})Button("下划线圆角半径变化").width('100%').margin({ bottom: '12vp' }).onClick((event?: ClickEvent) => {// 对Button组件的宽高属性进行动画配置if (this.borderFlag) {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorBorderRadius = 0})} else {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorBorderRadius = 5})}this.borderFlag = !this.borderFlag})Button("下划线间距变化").width('100%').margin({ bottom: '12vp' }).onClick((event?: ClickEvent) => {// 对Button组件的宽高属性进行动画配置if (this.spaceFlag) {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorSpace = 20})} else {animateTo({duration: 1000, // 动画时长curve: Curve.Linear, // 动画曲线delay: 200, // 动画延迟iterations: 1, // 播放次数playMode: PlayMode.Normal, // 动画模式onFinish: () => {console.info('play end')}}, () => {this.indicatorSpace = 10})}this.spaceFlag = !this.spaceFlag})Tabs({ barPosition: BarPosition.End, controller: this.controller }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp')}.tabBar(SubTabBarStyle.of('pink').indicator({color: this.indicatorColor, //下划线颜色height: this.indicatorHeight, //下划线高度width: this.indicatorWidth, //下划线宽度borderRadius: this.indicatorBorderRadius, //下划线圆角半径marginTop: this.indicatorSpace //下划线与文字间距}).selectedMode(this.selectedMode).board({ borderRadius: this.subTabBorderRadius }).labelStyle({}))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp')}.tabBar('yellow')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp')}.tabBar('blue')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp')}.tabBar('green')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp')}.tabBar('gray')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp')}.tabBar('orange')}.vertical(false).scrollable(true).barMode(BarMode.Scrollable).barHeight(140).animationDuration(400).onChange((index: number) => {console.info(index.toString())}).backgroundColor(0xF5F5F5).height(320)}.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' })}
}

tabContent3

示例5

// xxx.ets
@Entry
@Component
struct TabsTextOverflow {@State message: string = 'Hello World'private controller: TabsController = new TabsController()@State subTabOverflowOpaque: boolean = true;build() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {TabContent() {Column(){Text('单行省略号截断').fontSize(30).fontColor(0xFF000000)}.width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(SubTabBarStyle.of('开始【单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断】结束').labelStyle({ overflow: TextOverflow.Ellipsis, maxLines: 1, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,font: { size: 20 } }))TabContent() {Column(){Text('先缩小再截断').fontSize(30).fontColor(0xFF000000)}.width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(SubTabBarStyle.of('开始【先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断】结束').labelStyle({ overflow: TextOverflow.Clip, maxLines: 1, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,font: { size: 20 } }))TabContent() {Column(){Text('先缩小再换行再截断').fontSize(30).fontColor(0xFF000000)}.width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(SubTabBarStyle.of('开始【先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断】结束').labelStyle({ overflow: TextOverflow.Clip, maxLines: 2, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,font: { size: 20 } }))TabContent() {Column() {Text('换行').fontSize(30).fontColor(0xFF000000)}.width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(SubTabBarStyle.of('开始【换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行】结束').labelStyle({ overflow: TextOverflow.Clip, maxLines: 10, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,font: { size: 20 } }))}.vertical(true).scrollable(true).barMode(BarMode.Fixed).barHeight(720).barWidth(200).animationDuration(400).onChange((index: number) => {console.info(index.toString())}).height('100%').width('100%')}.height('100%')}
}

tabContent4

示例6

// xxx.ets
@Entry
@Component
struct TabContentExample6 {private controller: TabsController = new TabsController()@State text: string = "2"@State tabPadding: number = 0;@State symmetricExtensible: boolean = false;@State layoutMode: LayoutMode = LayoutMode.VERTICAL;@State verticalAlign: VerticalAlign = VerticalAlign.Center;build() {Column() {Row() {Button("padding+10 " + this.tabPadding).width('47%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.tabPadding += 10}).margin({ right: '6%', bottom: '12vp' })Button("padding-10 " + this.tabPadding).width('47%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.tabPadding -= 10}).margin({ bottom: '12vp' })}Row() {Button("文本增加 ").width('47%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.text += '文本增加'}).margin({ right: '6%', bottom: '12vp' })Button("文本重置").width('47%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.text = "2"}).margin({ bottom: '12vp' })}Row() {Button("symmetricExtensible改变 " + this.symmetricExtensible).width('100%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.symmetricExtensible = !this.symmetricExtensible}).margin({ bottom: '12vp' })}Row() {Button("layoutMode垂直 ").width('47%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.layoutMode = LayoutMode.VERTICAL;}).margin({ right: '6%', bottom: '12vp' })Button("layoutMode水平 ").width('47%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.layoutMode = LayoutMode.HORIZONTAL;}).margin({ bottom: '12vp' })}Row() {Button("verticalAlign朝上").width('100%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.verticalAlign = VerticalAlign.Top;}).margin({ bottom: '12vp' })}Row() {Button("verticalAlign居中").width('100%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.verticalAlign = VerticalAlign.Center;}).margin({ bottom: '12vp' })}Row() {Button("verticalAlign朝下").width('100%').height(50).margin({ top: 5 }).onClick((event?: ClickEvent) => {this.verticalAlign = VerticalAlign.Bottom;}).margin({ bottom: '12vp' })}Tabs({ barPosition: BarPosition.End, controller: this.controller }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text).padding(this.tabPadding).verticalAlign(this.verticalAlign).layoutMode(this.layoutMode).symmetricExtensible(this.symmetricExtensible))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))}.animationDuration(300).height('60%').backgroundColor(0xf1f3f5).barMode(BarMode.Fixed)}.width('100%').height(500).margin({ top: 5 }).padding('24vp')}
}

tabContent4

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

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

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

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

鸿蒙（HarmonyOS 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://xiahunao.cn/news/2871371.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

智慧礼金：电子礼金薄，让礼薄更添智能，你确定不进来看看？

智慧礼金：电子礼金薄，让礼薄更添智能，你确定不进来看看？

智慧礼金：电子礼金薄，让礼薄更添智能，你确定不进来看看？ 一、重要声明二、相关介绍三、使用好处四、如何找到该小程序 随着科技的不断进步，传统的纸质礼金簿已经逐渐被电子化管理所取代。今天，我们要向大家…
阅读更多...
题目：特殊的三角形（蓝桥OJ 3008）

题目：特殊的三角形（蓝桥OJ 3008）

问题描述： 解题思路： 可以先求出1~1e6每个位置是否有解，后计算前缀和再求出不同区间的和。（时间复杂度小） 进行dfs操作：依次组合1~1e6所有元素。并计算每一个组合的乘积，在该乘积位置的cnt加一。…
阅读更多...
OLAP与数据仓库和数据湖

OLAP与数据仓库和数据湖

OLAP与数据仓库和数据湖 本文阐述了OLAP、数据仓库和数据湖方面的基础知识以及相关论文。同时记录了我如何通过ChatGPT以及类似产品（通义千问、文心一言）来学习知识的。通过这个过程让我对于用AI科技提升学习和工作效率有了实践经验和切身感受。 预热 …
阅读更多...
KubeSphere集群安装-nfs分布式文件共享-对接Harbor-对接阿里云镜像仓库-遇到踩坑记录

KubeSphere集群安装-nfs分布式文件共享-对接Harbor-对接阿里云镜像仓库-遇到踩坑记录

KubeSphere安装和使用集群版 官网：https://www.kubesphere.io/zh/ 使用 KubeKey 内置 HAproxy 创建高可用集群：https://www.kubesphere.io/zh/docs/v3.3/installing-on-linux/high-availability-configurations/internal-ha-configuration/ 特别注意 安装前注意必须把当前使…
阅读更多...
API接口：获取歌曲、小姐姐图片以及视频

API接口：获取歌曲、小姐姐图片以及视频

文章目录 前言一、成果展示二、接口演示 1、歌曲2、图片和视频三、创造难点四、总结 前言 上次利用QQ音乐官网做了一个根据qq号获取暗恋人喜欢的歌单以及收藏歌曲，但是感觉功能还是太单薄了，于是我再次利用网上提供的免费API接口补充了一些功能。 一、成…
阅读更多...
bugku-easy_nbt

bugku-easy_nbt

解压文件得到 感觉dat文件可疑，尝试修改为zip文件 解压level，然后用010打开 搜索得到flag
阅读更多...
运用html相关知识编写导航栏和二级菜单

运用html相关知识编写导航栏和二级菜单

相关代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…
阅读更多...
2024年腾讯云免费服务器4核8G配置申请

2024年腾讯云免费服务器4核8G配置申请

腾讯云免费服务器4核8G配置申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云服务器网txyfwq.com分享2024年最新腾…
阅读更多...
如何创建用户流（User Flow)：分步指南

如何创建用户流（User Flow)：分步指南

原文作者&#xff1a;Camren Browne&#xff0c;CareerFoundry 翻译&#xff1a;数字营销工兵 (sources: 图片来源于网络&#xff09; 用户流(User Flow)是当今用户体验行业中最有用但被误解的工具之一。资深设计师经常避开它们&#xff0c;而初级设计师则很难抓住它们。 事…
阅读更多...
Linux：git的基础操作

Linux：git的基础操作

git的下载 版本控制系统一般分为两种&#xff0c;集中式版本控制系统&#xff0c;分布式版本控制系统 什么是集中式版本控制系统&#xff1a;版本库集中存放在中央服务器&#xff0c;工作时候使用自己的电脑&#xff0c;当工作时候在中央服务器上拉取最新版本的代码&#xff0c…
阅读更多...
每日OJ题_简单多问题dp⑧_力扣188. 买卖股票的最佳时机 IV

每日OJ题_简单多问题dp⑧_力扣188. 买卖股票的最佳时机 IV

目录 力扣188. 买卖股票的最佳时机 IV 状态机分析 解析代码 力扣188. 买卖股票的最佳时机 IV 188. 买卖股票的最佳时机 IV 难度 困难 给你一个整数数组 prices 和一个整数 k &#xff0c;其中 prices[i] 是某支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取…
阅读更多...
大话设计模式——8.原型模式（Prototype Pattern）

大话设计模式——8.原型模式（Prototype Pattern）

1.介绍 用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。属于创建型模式。 UML图&#xff1a; 1&#xff09;浅拷贝&#xff1a; 指创建一个新的对象&#xff0c;然后将原始对象的字段值复制到新对象中。如果字段是基本类型&#xff0c;直接复制…
阅读更多...
【Canvas与艺术】砂落字现

【Canvas与艺术】砂落字现

【注意】 本作代码需要在服务器端执行&#xff0c;不可用浏览器直接打开运行。 如何安装服务器端请参考&#xff1a;https://www.cnblogs.com/heyang78/p/3339235.html 【原理】 雨粒子落下时&#xff0c;如果当前点不是黑点&#xff0c;则化身为金字的一个像素点。 【效果…
阅读更多...
28.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据推测结果用提示框的形式显示

28.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据推测结果用提示框的形式显示

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;27.数据推测功能…
阅读更多...
ASPICE-SYSSWE

ASPICE-SYSSWE

文章主要内容&#xff1a; Automotive SPICE 过程参考模型 SYS.1 需求挖掘 过程ID SYS.1 过程名称 需求挖掘 过程目的 需求挖掘过程的目的是:在产品和/或服务的整个生命周期内收集、处理和跟踪不断变化的利益相关方的需要和需求&#xff0c;从而建立一个需求基线&#x…
阅读更多...
【方法封装】时间格式化输出，获取请求设备和IP

【方法封装】时间格式化输出，获取请求设备和IP

目录 时间类 1.1 获取当前时间&#xff0c;以特定格式化形式输出 1.2 自定义时间&#xff0c;以特定格式化输出 1.3 获取当前时间&#xff0c;自定义格式化 1.4 自定义时间&#xff0c;自定义格式化 设备类 根据请求头信息&#xff0c;获取用户发起请求的设备 请求IP类 …
阅读更多...
走进volatile的世界，探索它与可见性，有序性，原子性之间的爱恨情仇！

走进volatile的世界，探索它与可见性，有序性，原子性之间的爱恨情仇！

写在开头 在之前的几篇博文中&#xff0c;我们都提到了 volatile 关键字&#xff0c;这个单词中文释义为&#xff1a;不稳定的&#xff0c;易挥发的&#xff0c;在Java中代表变量修饰符&#xff0c;用来修饰会被不同线程访问和修改的变量&#xff0c;对于方法&#xff0c;代码…
阅读更多...
在Windows系统上搭建MongoDB-这篇文章刚刚好

在Windows系统上搭建MongoDB-这篇文章刚刚好

在Windows系统上搭建MongoDB集群 文章目录 1.下载MongoDB2.集群描述3.构建集群文件目录4.新建配置文件5.启动MongoDB服务6.配置集群7.集群测试8.设置密码和开启认证一、安装MongoDB 1.下载MongoDB 去MongoDB官网下载解压版免安装的压缩包。 https://www.mongodb.com/try/do…
阅读更多...
.rmallox勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

.rmallox勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 近年来&#xff0c;勒索病毒的威胁日益增加&#xff0c;其中一种名为.rmallox的勒索病毒备受关注。这种病毒通过加密文件并勒索赎金来威胁受害者。本文将介绍.rmallox勒索病毒的特点&#xff0c;以及如何恢复被其加密的数据文件&#xff0c;并提供预防措施&a…
阅读更多...
网络安全JavaSE第二天（持续更新）

网络安全JavaSE第二天（持续更新）

3. 基本数据与运算 3.6 运算符 3.6.1 算术运算符 在 Java 中&#xff0c;算术运算符包含&#xff1a;、-、*、/、% public class ArithmeticOperator { public static void main(String[] args) { int a 10; // 定义了一个整型类型的变量 a&#xff0c;它的值是 10 int b …
阅读更多...
最新文章

Copyright @ 2022~2023