devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：TabContent）_tabcontent组件不支持设置通用宽度

作者：Li_阴宅 | 2024-08-06 06:58:24

赞

踩

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

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabContentExample {
  5.   @State fontColor: string = '#182431'
  6.   @State selectedFontColor: string = '#007DFF'
  7.   @State currentIndex: number = 0
  8.   private controller: TabsController = new TabsController()
  9.  
  10.   @Builder tabBuilder(index: number) {
  11.     Column() {
  12.       Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
  13.         .width(24)
  14.         .height(24)
  15.         .margin({ bottom: 4 })
  16.         .objectFit(ImageFit.Contain)
  17.       Text(`Tab${index + 1}`)
  18.         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
  19.         .fontSize(10)
  20.         .fontWeight(500)
  21.         .lineHeight(14)
  22.     }.width('100%')
  23.   }
  24.  
  25.   build() {
  26.     Column() {
  27.       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  28.         TabContent() {
  29.           Column() {
  30.             Text('Tab1')
  31.               .fontSize(36)
  32.               .fontColor('#182431')
  33.               .fontWeight(500)
  34.               .opacity(0.4)
  35.               .margin({ top: 30, bottom: 56.5 })
  36.             Divider()
  37.               .strokeWidth(0.5)
  38.               .color('#182431')
  39.               .opacity(0.05)
  40.           }.width('100%')
  41.         }.tabBar(this.tabBuilder(0))
  42.  
  43.         TabContent() {
  44.           Column() {
  45.             Text('Tab2')
  46.               .fontSize(36)
  47.               .fontColor('#182431')
  48.               .fontWeight(500)
  49.               .opacity(0.4)
  50.               .margin({ top: 30, bottom: 56.5 })
  51.             Divider()
  52.               .strokeWidth(0.5)
  53.               .color('#182431')
  54.               .opacity(0.05)
  55.           }.width('100%')
  56.         }.tabBar(this.tabBuilder(1))
  57.  
  58.         TabContent() {
  59.           Column() {
  60.             Text('Tab3')
  61.               .fontSize(36)
  62.               .fontColor('#182431')
  63.               .fontWeight(500)
  64.               .opacity(0.4)
  65.               .margin({ top: 30, bottom: 56.5 })
  66.             Divider()
  67.               .strokeWidth(0.5)
  68.               .color('#182431')
  69.               .opacity(0.05)
  70.           }.width('100%')
  71.         }.tabBar(this.tabBuilder(2))
  72.  
  73.         TabContent() {
  74.           Column() {
  75.             Text('Tab4')
  76.               .fontSize(36)
  77.               .fontColor('#182431')
  78.               .fontWeight(500)
  79.               .opacity(0.4)
  80.               .margin({ top: 30, bottom: 56.5 })
  81.             Divider()
  82.               .strokeWidth(0.5)
  83.               .color('#182431')
  84.               .opacity(0.05)
  85.           }.width('100%')
  86.         }.tabBar(this.tabBuilder(3))
  87.       }
  88.       .vertical(false)
  89.       .barHeight(56)
  90.       .onChange((index: number) => {
  91.         this.currentIndex = index
  92.       })
  93.       .width(360)
  94.       .height(190)
  95.       .backgroundColor('#F1F3F5')
  96.       .margin({ top: 38 })
  97.     }.width('100%')
  98.   }
  99. }

tabContent

示例2

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabContentExample {
  5.   @State fontColor: string = '#182431'
  6.   @State selectedFontColor: string = '#007DFF'
  7.   @State currentIndex: number = 0
  8.   private controller: TabsController = new TabsController()
  9.  
  10.   @Builder tabBuilder(index: number) {
  11.     Column() {
  12.       Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
  13.         .width(24)
  14.         .height(24)
  15.         .margin({ bottom: 4 })
  16.         .objectFit(ImageFit.Contain)
  17.       Text('Tab')
  18.         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
  19.         .fontSize(10)
  20.         .fontWeight(500)
  21.         .lineHeight(14)
  22.     }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  23.   }
  24.  
  25.   build() {
  26.     Column() {
  27.       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
  28.         TabContent()
  29.           .tabBar(this.tabBuilder(0))
  30.         TabContent()
  31.           .tabBar(this.tabBuilder(1))
  32.         TabContent()
  33.           .tabBar(this.tabBuilder(2))
  34.         TabContent()
  35.           .tabBar(this.tabBuilder(3))
  36.       }
  37.       .vertical(true)
  38.       .barWidth(96)
  39.       .barHeight(414)
  40.       .onChange((index: number) => {
  41.         this.currentIndex = index
  42.       })
  43.       .width(96)
  44.       .height(414)
  45.       .backgroundColor('#F1F3F5')
  46.       .margin({ top: 52 })
  47.     }.width('100%')
  48.   }
  49. }

tabContent

示例3

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabBarStyleExample {
  5.   build() {
  6.     Column({ space: 5 }) {
  7.       Text("子页签样式")
  8.       Column() {
  9.         Tabs({ barPosition: BarPosition.Start }) {
  10.           TabContent() {
  11.             Column().width('100%').height('100%').backgroundColor(Color.Pink)
  12.           }.tabBar(new SubTabBarStyle('Pink'))
  13.  
  14.           TabContent() {
  15.             Column().width('100%').height('100%').backgroundColor(Color.Yellow)
  16.           }.tabBar(new SubTabBarStyle('Yellow'))
  17.  
  18.           TabContent() {
  19.             Column().width('100%').height('100%').backgroundColor(Color.Blue)
  20.           }.tabBar(new SubTabBarStyle('Blue'))
  21.  
  22.           TabContent() {
  23.             Column().width('100%').height('100%').backgroundColor(Color.Green)
  24.           }.tabBar(new SubTabBarStyle('Green'))
  25.         }
  26.         .vertical(false)
  27.         .scrollable(true)
  28.         .barMode(BarMode.Fixed)
  29.         .onChange((index: number) => {
  30.           console.info(index.toString())
  31.         })
  32.         .width('100%')
  33.         .backgroundColor(0xF1F3F5)
  34.       }.width('100%').height(200)
  35.       Text("底部页签样式")
  36.       Column() {
  37.         Tabs({ barPosition: BarPosition.End }) {
  38.           TabContent() {
  39.             Column().width('100%').height('100%').backgroundColor(Color.Pink)
  40.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
  41.  
  42.           TabContent() {
  43.             Column().width('100%').height('100%').backgroundColor(Color.Yellow)
  44.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
  45.  
  46.           TabContent() {
  47.             Column().width('100%').height('100%').backgroundColor(Color.Blue)
  48.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
  49.  
  50.           TabContent() {
  51.             Column().width('100%').height('100%').backgroundColor(Color.Green)
  52.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
  53.         }
  54.         .vertical(false)
  55.         .scrollable(true)
  56.         .barMode(BarMode.Fixed)
  57.         .onChange((index: number) => {
  58.           console.info(index.toString())
  59.         })
  60.         .width('100%')
  61.         .backgroundColor(0xF1F3F5)
  62.       }.width('100%').height(200)
  63.       Text("侧边页签样式")
  64.       Column() {
  65.         Tabs({ barPosition: BarPosition.Start }) {
  66.           TabContent() {
  67.             Column().width('100%').height('100%').backgroundColor(Color.Pink)
  68.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
  69.  
  70.           TabContent() {
  71.             Column().width('100%').height('100%').backgroundColor(Color.Yellow)
  72.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
  73.  
  74.           TabContent() {
  75.             Column().width('100%').height('100%').backgroundColor(Color.Blue)
  76.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
  77.  
  78.           TabContent() {
  79.             Column().width('100%').height('100%').backgroundColor(Color.Green)
  80.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
  81.         }
  82.         .vertical(true).scrollable(true).barMode(BarMode.Fixed)
  83.         .onChange((index: number) => {
  84.           console.info(index.toString())
  85.         })
  86.         .width('100%')
  87.         .backgroundColor(0xF1F3F5)
  88.       }.width('100%').height(400)
  89.     }
  90.   }
  91. }

tabbarStyle

示例4

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabsAttr {
  5.   private controller: TabsController = new TabsController()
  6.   @State indicatorColor: Color = Color.Blue;
  7.   @State indicatorWidth: number = 40;
  8.   @State indicatorHeight: number = 10;
  9.   @State indicatorBorderRadius: number = 5;
  10.   @State indicatorSpace: number = 10;
  11.   @State subTabBorderRadius: number = 20;
  12.   @State selectedMode: SelectedMode = SelectedMode.INDICATOR;
  13.   private colorFlag: boolean = true;
  14.   private widthFlag: boolean = true;
  15.   private heightFlag: boolean = true;
  16.   private borderFlag: boolean = true;
  17.   private spaceFlag: boolean = true;
  18.  
  19.   build() {
  20.     Column() {
  21.       Button("下划线颜色变化").width('100%').margin({ bottom: '12vp' })
  22.         .onClick((event?: ClickEvent) => {
  23.           // 对Button组件的宽高属性进行动画配置
  24.           if (this.colorFlag) {
  25.             animateTo({
  26.               duration: 1000, // 动画时长
  27.               curve: Curve.Linear, // 动画曲线
  28.               delay: 200, // 动画延迟
  29.               iterations: 1, // 播放次数
  30.               playMode: PlayMode.Normal, // 动画模式
  31.               onFinish: () => {
  32.                 console.info('play end')
  33.               }
  34.             }, () => {
  35.               this.indicatorColor = Color.Red
  36.             })
  37.           } else {
  38.             animateTo({
  39.               duration: 1000, // 动画时长
  40.               curve: Curve.Linear, // 动画曲线
  41.               delay: 200, // 动画延迟
  42.               iterations: 1, // 播放次数
  43.               playMode: PlayMode.Normal, // 动画模式
  44.               onFinish: () => {
  45.                 console.info('play end')
  46.               }
  47.             }, () => {
  48.               this.indicatorColor = Color.Yellow
  49.             })
  50.           }
  51.           this.colorFlag = !this.colorFlag
  52.         })
  53.       Button("下划线高度变化").width('100%').margin({ bottom: '12vp' })
  54.         .onClick((event?: ClickEvent) => {
  55.           // 对Button组件的宽高属性进行动画配置
  56.           if (this.heightFlag) {
  57.             animateTo({
  58.               duration: 1000, // 动画时长
  59.               curve: Curve.Linear, // 动画曲线
  60.               delay: 200, // 动画延迟
  61.               iterations: 1, // 播放次数
  62.               playMode: PlayMode.Normal, // 动画模式
  63.               onFinish: () => {
  64.                 console.info('play end')
  65.               }
  66.             }, () => {
  67.               this.indicatorHeight = 20
  68.             })
  69.           } else {
  70.             animateTo({
  71.               duration: 1000, // 动画时长
  72.               curve: Curve.Linear, // 动画曲线
  73.               delay: 200, // 动画延迟
  74.               iterations: 1, // 播放次数
  75.               playMode: PlayMode.Normal, // 动画模式
  76.               onFinish: () => {
  77.                 console.info('play end')
  78.               }
  79.             }, () => {
  80.               this.indicatorHeight = 10
  81.             })
  82.           }
  83.           this.heightFlag = !this.heightFlag
  84.         })
  85.       Button("下划线宽度变化").width('100%').margin({ bottom: '12vp' })
  86.         .onClick((event?: ClickEvent) => {
  87.           // 对Button组件的宽高属性进行动画配置
  88.           if (this.widthFlag) {
  89.             animateTo({
  90.               duration: 1000, // 动画时长
  91.               curve: Curve.Linear, // 动画曲线
  92.               delay: 200, // 动画延迟
  93.               iterations: 1, // 播放次数
  94.               playMode: PlayMode.Normal, // 动画模式
  95.               onFinish: () => {
  96.                 console.info('play end')
  97.               }
  98.             }, () => {
  99.               this.indicatorWidth = 30
  100.             })
  101.           } else {
  102.             animateTo({
  103.               duration: 1000, // 动画时长
  104.               curve: Curve.Linear, // 动画曲线
  105.               delay: 200, // 动画延迟
  106.               iterations: 1, // 播放次数
  107.               playMode: PlayMode.Normal, // 动画模式
  108.               onFinish: () => {
  109.                 console.info('play end')
  110.               }
  111.             }, () => {
  112.               this.indicatorWidth = 50
  113.             })
  114.           }
  115.           this.widthFlag = !this.widthFlag
  116.         })
  117.       Button("下划线圆角半径变化").width('100%').margin({ bottom: '12vp' })
  118.         .onClick((event?: ClickEvent) => {
  119.           // 对Button组件的宽高属性进行动画配置
  120.           if (this.borderFlag) {
  121.             animateTo({
  122.               duration: 1000, // 动画时长
  123.               curve: Curve.Linear, // 动画曲线
  124.               delay: 200, // 动画延迟
  125.               iterations: 1, // 播放次数
  126.               playMode: PlayMode.Normal, // 动画模式
  127.               onFinish: () => {
  128.                 console.info('play end')
  129.               }
  130.             }, () => {
  131.               this.indicatorBorderRadius = 0
  132.             })
  133.           } else {
  134.             animateTo({
  135.               duration: 1000, // 动画时长
  136.               curve: Curve.Linear, // 动画曲线
  137.               delay: 200, // 动画延迟
  138.               iterations: 1, // 播放次数
  139.               playMode: PlayMode.Normal, // 动画模式
  140.               onFinish: () => {
  141.                 console.info('play end')
  142.               }
  143.             }, () => {
  144.               this.indicatorBorderRadius = 5
  145.             })
  146.           }
  147.           this.borderFlag = !this.borderFlag
  148.         })
  149.       Button("下划线间距变化").width('100%').margin({ bottom: '12vp' })
  150.         .onClick((event?: ClickEvent) => {
  151.           // 对Button组件的宽高属性进行动画配置
  152.           if (this.spaceFlag) {
  153.             animateTo({
  154.               duration: 1000, // 动画时长
  155.               curve: Curve.Linear, // 动画曲线
  156.               delay: 200, // 动画延迟
  157.               iterations: 1, // 播放次数
  158.               playMode: PlayMode.Normal, // 动画模式
  159.               onFinish: () => {
  160.                 console.info('play end')
  161.               }
  162.             }, () => {
  163.               this.indicatorSpace = 20
  164.             })
  165.           } else {
  166.             animateTo({
  167.               duration: 1000, // 动画时长
  168.               curve: Curve.Linear, // 动画曲线
  169.               delay: 200, // 动画延迟
  170.               iterations: 1, // 播放次数
  171.               playMode: PlayMode.Normal, // 动画模式
  172.               onFinish: () => {
  173.                 console.info('play end')
  174.               }
  175.             }, () => {
  176.               this.indicatorSpace = 10
  177.             })
  178.           }
  179.           this.spaceFlag = !this.spaceFlag
  180.         })
  181.       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  182.         TabContent() {
  183.           Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp')
  184.         }.tabBar(SubTabBarStyle.of('pink')
  185.           .indicator({
  186.             color: this.indicatorColor, //下划线颜色
  187.             height: this.indicatorHeight, //下划线高度
  188.             width: this.indicatorWidth, //下划线宽度
  189.             borderRadius: this.indicatorBorderRadius, //下划线圆角半径
  190.             marginTop: this.indicatorSpace //下划线与文字间距
  191.           })
  192.           .selectedMode(this.selectedMode)
  193.           .board({ borderRadius: this.subTabBorderRadius })
  194.           .labelStyle({})
  195.         )
  196.  
  197.         TabContent() {
  198.           Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp')
  199.         }.tabBar('yellow')
  200.  
  201.         TabContent() {
  202.           Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp')
  203.         }.tabBar('blue')
  204.  
  205.         TabContent() {
  206.           Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp')
  207.         }.tabBar('green')
  208.  
  209.         TabContent() {
  210.           Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp')
  211.         }.tabBar('gray')
  212.  
  213.         TabContent() {
  214.           Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp')
  215.         }.tabBar('orange')
  216.       }
  217.       .vertical(false)
  218.       .scrollable(true)
  219.       .barMode(BarMode.Scrollable)
  220.       .barHeight(140)
  221.       .animationDuration(400)
  222.       .onChange((index: number) => {
  223.         console.info(index.toString())
  224.       })
  225.       .backgroundColor(0xF5F5F5)
  226.       .height(320)
  227.     }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' })
  228.   }
  229. }

tabContent3

示例5

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabsTextOverflow {
  5.   @State message: string = 'Hello World'
  6.   private controller: TabsController = new TabsController()
  7.   @State subTabOverflowOpaque: boolean = true;
  8.   build() {
  9.     Column() {
  10.       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
  11.         TabContent() {
  12.           Column(){
  13.             Text('单行省略号截断').fontSize(30).fontColor(0xFF000000)
  14.           }.width('100%').height('100%').backgroundColor(Color.Pink)
  15.         }.tabBar(SubTabBarStyle.of('开始【单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断】结束')
  16.           .labelStyle({ overflow: TextOverflow.Ellipsis, maxLines: 1, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
  17.             font: { size: 20 } }))
  18.         TabContent() {
  19.           Column()
  20.           {
  21.             Text('先缩小再截断').fontSize(30).fontColor(0xFF000000)
  22.           }.width('100%').height('100%').backgroundColor(Color.Pink)
  23.         }.tabBar(SubTabBarStyle.of('开始【先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断】结束')
  24.           .labelStyle({ overflow: TextOverflow.Clip, maxLines: 1, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
  25.             font: { size: 20 } }))
  26.         TabContent() {
  27.           Column(){
  28.             Text('先缩小再换行再截断').fontSize(30).fontColor(0xFF000000)
  29.           }.width('100%').height('100%').backgroundColor(Color.Pink)
  30.         }.tabBar(SubTabBarStyle.of('开始【先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断】结束')
  31.           .labelStyle({ overflow: TextOverflow.Clip, maxLines: 2, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
  32.             font: { size: 20 } }))
  33.         TabContent() {
  34.           Column() {
  35.             Text('换行').fontSize(30).fontColor(0xFF000000)
  36.           }
  37.           .width('100%').height('100%').backgroundColor(Color.Pink)
  38.         }.tabBar(SubTabBarStyle.of('开始【换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行】结束')
  39.           .labelStyle({ overflow: TextOverflow.Clip, maxLines: 10, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
  40.             font: { size: 20 } }))
  41.       }
  42.       .vertical(true).scrollable(true)
  43.       .barMode(BarMode.Fixed)
  44.       .barHeight(720)
  45.       .barWidth(200).animationDuration(400)
  46.       .onChange((index: number) => {
  47.         console.info(index.toString())
  48.       })
  49.       .height('100%').width('100%')
  50.     }
  51.     .height('100%')
  52.   }
  53. }

tabContent4

示例6

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabContentExample6 {
  5.   private controller: TabsController = new TabsController()
  6.   @State text: string = "2"
  7.   @State tabPadding: number = 0;
  8.   @State symmetricExtensible: boolean = false;
  9.   @State layoutMode: LayoutMode = LayoutMode.VERTICAL;
  10.   @State verticalAlign: VerticalAlign = VerticalAlign.Center;
  11.  
  12.   build() {
  13.     Column() {
  14.       Row() {
  15.         Button("padding+10 " + this.tabPadding)
  16.           .width('47%')
  17.           .height(50)
  18.           .margin({ top: 5 })
  19.           .onClick((event?: ClickEvent) => {
  20.             this.tabPadding += 10
  21.           })
  22.           .margin({ right: '6%', bottom: '12vp' })
  23.         Button("padding-10 " + this.tabPadding)
  24.           .width('47%')
  25.           .height(50)
  26.           .margin({ top: 5 })
  27.           .onClick((event?: ClickEvent) => {
  28.             this.tabPadding -= 10
  29.           })
  30.           .margin({ bottom: '12vp' })
  31.       }
  32.  
  33.       Row() {
  34.         Button("文本增加 ")
  35.           .width('47%')
  36.           .height(50)
  37.           .margin({ top: 5 })
  38.           .onClick((event?: ClickEvent) => {
  39.             this.text += '文本增加'
  40.           })
  41.           .margin({ right: '6%', bottom: '12vp' })
  42.         Button("文本重置")
  43.           .width('47%')
  44.           .height(50)
  45.           .margin({ top: 5 })
  46.           .onClick((event?: ClickEvent) => {
  47.             this.text = "2"
  48.           })
  49.           .margin({ bottom: '12vp' })
  50.       }
  51.  
  52.       Row() {
  53.         Button("symmetricExtensible改变 " + this.symmetricExtensible)
  54.           .width('100%')
  55.           .height(50)
  56.           .margin({ top: 5 })
  57.           .onClick((event?: ClickEvent) => {
  58.             this.symmetricExtensible = !this.symmetricExtensible
  59.           })
  60.           .margin({ bottom: '12vp' })
  61.       }
  62.  
  63.       Row() {
  64.         Button("layoutMode垂直 ")
  65.           .width('47%')
  66.           .height(50)
  67.           .margin({ top: 5 })
  68.           .onClick((event?: ClickEvent) => {
  69.             this.layoutMode = LayoutMode.VERTICAL;
  70.           })
  71.           .margin({ right: '6%', bottom: '12vp' })
  72.         Button("layoutMode水平 ")
  73.           .width('47%')
  74.           .height(50)
  75.           .margin({ top: 5 })
  76.           .onClick((event?: ClickEvent) => {
  77.             this.layoutMode = LayoutMode.HORIZONTAL;
  78.           })
  79.           .margin({ bottom: '12vp' })
  80.       }
  81.  
  82.       Row() {
  83.         Button("verticalAlign朝上")
  84.           .width('100%')
  85.           .height(50)
  86.           .margin({ top: 5 })
  87.           .onClick((event?: ClickEvent) => {
  88.             this.verticalAlign = VerticalAlign.Top;
  89.           })
  90.           .margin({ bottom: '12vp' })
  91.       }
  92.  
  93.       Row() {
  94.         Button("verticalAlign居中")
  95.           .width('100%')
  96.           .height(50)
  97.           .margin({ top: 5 })
  98.           .onClick((event?: ClickEvent) => {
  99.             this.verticalAlign = VerticalAlign.Center;
  100.           })
  101.           .margin({ bottom: '12vp' })
  102.       }
  103.  
  104.       Row() {
  105.         Button("verticalAlign朝下")
  106.           .width('100%')
  107.           .height(50)
  108.           .margin({ top: 5 })
  109.           .onClick((event?: ClickEvent) => {
  110.             this.verticalAlign = VerticalAlign.Bottom;
  111.           })
  112.           .margin({ bottom: '12vp' })
  113.       }
  114.  
  115.  
  116.       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  117.         TabContent() {
  118.           Column().width('100%').height('100%').backgroundColor(Color.Pink)
  119.         }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))
  120.  
  121.         TabContent() {
  122.           Column().width('100%').height('100%').backgroundColor(Color.Green)
  123.         }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text)
  124.           .padding(this.tabPadding)
  125.           .verticalAlign(this.verticalAlign)
  126.           .layoutMode(this.layoutMode)
  127.           .symmetricExtensible(this.symmetricExtensible))
  128.  
  129.         TabContent() {
  130.           Column().width('100%').height('100%').backgroundColor(Color.Blue)
  131.         }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
  132.       }
  133.       .animationDuration(300)
  134.       .height('60%')
  135.       .backgroundColor(0xf1f3f5)
  136.       .barMode(BarMode.Fixed)
  137.     }
  138.     .width('100%')
  139.     .height(500)
  140.     .margin({ top: 5 })
  141.     .padding('24vp')
  142.   }
  143. }

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学习资料

总结

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号