Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 905ce4b6 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!21743 tabs子页签、底部页签的栅格化、文本超长处理 

Merge pull request !21743 from tengfan/tabs0801
上级 e4431073 dbb657af
显示空白变更内容
内联 并排
Showing with 324 addition and 4 deletion
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 905ce4b6
......@@ -75,6 +75,7 @@ SubTabBarStyle的静态构造函数。
| selectedMode<sup>10+</sup> | [SelectedMode](#selectedmode10枚举说明) | 设置选中子页签的显示方式。<br />默认值：SelectedMode.INDICATOR |
| board<sup>10+</sup> | [BoardStyle](#boardstyle10对象说明) | 设置选中子页签的背板风格。 |
| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 |
| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。<br/>默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp} |
## IndicatorStyle<sup>10+</sup>对象说明
......@@ -107,7 +108,7 @@ SubTabBarStyle的静态构造函数。
| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最小显示字号（不支持百分比设置）。需配合maxFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。|
| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最大显示字号（不支持百分比设置）。需配合minFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。||
| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否 | 设置Label文本自适应高度的方式。默认值是最大行数优先。 |
| font | [Font](ts-types.md#font) | 否 | 设置Label文本字体样式。默认值是字体大小16.0fp、字体类型HarmonyOS Sans，字体风格正常，字重正常。 |
| font | [Font](ts-types.md#font) | 否 | 设置Label文本字体样式。<br/>当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重正常。<br/>当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。 |
## BottomTabBarStyle<sup>9+</sup>
......@@ -138,6 +139,27 @@ BottomTabBarStyle的静态构造函数。
| icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的图片内容。 |
| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 |
### 属性
支持以下属性：
| 名称 | 参数类型 | 描述 |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。<br/>默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp} |
| verticalAlign<sup>10+</sup> | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置底部页签的图片、文字在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center |
| layoutMode<sup>10+</sup> | [LayoutMode](#layoutmode10枚举说明) | 设置底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。<br/>默认值：LayoutMode.VERTICAL |
| symmetricExtensible<sup>10+</sup> | boolean | 设置底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。<br/>默认值：false |
| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 |
## LayoutMode<sup>10+</sup>枚举说明
| 名称 | 描述 |
| ---------- | ---------------------------------------- |
| AUTO | 若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。 |
| VERTICAL | 页签内容上下排布。 |
| HORIZONAL | 页签内容左右排布。 |
## 示例
### 示例1
......@@ -686,3 +708,109 @@ struct TabsTextOverflow {
```
![tabContent4](figures/tabContent4.png)
### 示例6
```ts
// 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](figures/tabContent5.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 905ce4b6
......@@ -40,7 +40,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
| -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| vertical | boolean | 设置为false是为横向Tabs，设置为true时为纵向Tabs。<br/>默认值：false |
| scrollable | boolean | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。<br/>默认值：true |
| barMode | BarMode | TabBar布局模式，具体描述见BarMode枚举说明。<br/>默认值：BarMode.Fixed |
| barMode | [BarMode](#barmode枚举说明),[ScrollableBarModeOptions](#scrollablebarmodeoptions10对象说明) | TabBar布局模式，BarMode为必选项，ScrollableBarModeOptions为可选项，具体描述见BarMode枚举说明、ScrollableBarModeOptions对象说明。从API version 10开始，支持ScrollableBarModeOptions参数。其中ScrollableBarModeOptions参数仅Scrollable模式下有效，非必填参数。<br/>默认值：BarMode.Fixed |
| barWidth | number&nbsp;\|&nbsp;Length<sup>8+</sup> | TabBar的宽度值。<br/>默认值：<br/>未设置带样式的TabBar且vertical属性为false时，默认值为Tabs的宽度。<br/>未设置带样式的TabBar且vertical属性为true时，默认值为56vp。<br/>设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。<br/>设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。<br/>设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。<br/>设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。<br/>**说明：** <br/>设置为小于0或大于Tabs宽度值时，按默认值显示。 |
| barHeight | number&nbsp;\|&nbsp;Length<sup>8+</sup> | TabBar的高度值。<br/>默认值：<br/>未设置带样式的TabBar且vertical属性为false时，默认值为56vp。<br/>未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。<br/>设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。<br/>设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。<br/>设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。<br/>设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。<br/>**说明：** <br/>设置为小于0或大于Tabs高度值时，按默认值显示。 |
| animationDuration | number | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。<br/>默认值：300 <br/>**说明：** <br/>设置为小于0或百分比时，按默认值显示。 |
......@@ -48,6 +48,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
| fadingEdge<sup>10+</sup> | boolean | 设置页签超过容器宽度时是否渐隐消失。<br />默认值：true |
| barOverlap<sup>10+</sup> | boolean | 设置TabBar是否背后变模糊并叠加在TabContent之上。<br />默认值：false |
| barBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置TabBar的背景颜色。<br />默认值：透明 |
| barGridAlign<sup>10+</sup> | [BarGridColumnOptions](#bargridcolumnoptions10对象说明) | 以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效。 |
## DividerStyle<sup>10+</sup>对象说明
......@@ -58,6 +59,23 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
| startMargin | [Length](ts-types.md#length) | 否 | 分割线与侧边栏顶端的距离（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp |
| endMargin | [Length](ts-types.md#length) | 否 | 分割线与侧边栏底端的距离（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp |
## BarGridColumnOptions<sup>10+</sup>对象说明
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| margin | [Dimension](ts-types.md#dimension10) | 否 | 网格模式下的column边距（不支持百分比设置）。<br/>默认值:24.0<br/>单位：vp |
| gutter | [Dimension](ts-types.md#dimension10) | 否 | 网格模式下的column间隔（不支持百分比设置）。<br/>默认值:24.0<br/>单位：vp |
| sm | number | 否 | 小屏下，页签占用的columns数量，必须是非负偶数。小屏为大于等于320vp但小于600vp。<br/>默认值为-1，代表页签占用TabBar全部宽度。 |
| md | number | 否 | 中屏下，页签占用的columns数量，必须是非负偶数。中屏为大于等于600vp但小于800vp。<br/>默认值为-1，代表页签占用TabBar全部宽度。 |
| lg | number | 否 | 大屏下，页签占用的columns数量，必须是非负偶数。大屏为大于等于840vp但小于1024vp。<br/>默认值为-1，代表页签占用TabBar全部宽度。 |
## ScrollableBarModeOptions<sup>10+</sup>对象说明
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| margin | [Dimension](ts-types.md#dimension10) | 否 | Scrollable模式下的TabBar的左右边距（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp |
| nonScrollableLayoutStyle | [LayoutStyle](#layoutstyle10枚举说明) | 否 | Scrollable模式下不滚动时的页签排布方式。<br/>默认值：LayoutStyle.ALWAYS_CENTER |
## BarMode枚举说明
| 名称 | 描述 |
......@@ -65,6 +83,14 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
| Scrollable | 每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。 |
| Fixed | 所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。 |
## LayoutStyle<sup>10+</sup>枚举说明
| 名称 | 描述 |
| ---------- | ---------------------------------------- |
| ALWAYS_CENTER | 当页签内容超过TabBar宽度时，TabBar可滚动。<br/>当页签内容不超过TabBar宽度时，TabBar不可滚动，页签紧凑居中。|
| ALWAYS_AVERAGE_SPLITE | 当页签内容超过TabBar宽度时，TabBar可滚动。<br/>当页签内容不超过TabBar宽度时，TabBar不可滚动，且所有页签平均分配TabBar宽度。<br/>仅水平模式下有效，否则视为LayoutStyle.ALWAYS_CENTER。|
| SPACE_BETWEEN_OR_CENTER | 当页签内容超过TabBar宽度时，TabBar可滚动。<br/>当页签内容不超过TabBar宽度但超过TabBar宽度一半时，TabBar不可滚动，页签紧凑居中。<br/>当页签内容不超过TabBar宽度一半时，TabBar不可滚动，保证页签居中排列在TabBar宽度一半，且间距相同。|
## 事件
除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
......@@ -72,6 +98,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(event:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Tab页签切换后触发的事件。<br>-&nbsp;index：当前显示的index索引，索引从0开始计算。<br/>触发该事件的条件：<br/>1、TabContent支持滑动时，组件触发滑动时触发。<br/>2、通过[控制器](#tabscontroller)API接口调用。<br/>3、通过[状态变量](../../quick-start/arkts-state.md)构造的属性值进行修改。<br/>4、通过页签处点击触发。 |
| onTabBarClick(event:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>10+</sup> | Tab页签点击后触发的事件。<br>-&nbsp;index：被点击的index索引，索引从0开始计算。<br/>触发该事件的条件：<br/>通过页签处点击触发。 |
## TabsController
......@@ -422,3 +449,168 @@ struct barBackgroundColorTest {
```
![tabs5](figures/tabs5.gif)
### 示例5
```ts
// xxx.ets
@Entry
@Component
struct TabsExample5 {
private controller: TabsController = new TabsController()
@State gridMargin: number = 10
@State gridGutter: number = 10
@State sm: number = -2
@State clickedContent: string = "";
build() {
Column() {
Row() {
Button("gridMargin+10 " + this.gridMargin).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.gridMargin += 10
}).margin({ right:'6%', bottom:'12vp'})
Button("gridMargin-10 " + this.gridMargin).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.gridMargin -= 10
}).margin({bottom:'12vp'})
}
Row() {
Button("gridGutter+10 " + this.gridGutter).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.gridGutter += 10
}).margin({ right:'6%', bottom:'12vp'})
Button("gridGutter-10 " + this.gridGutter).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.gridGutter -= 10
}).margin({bottom:'12vp'})
}
Row() {
Button("sm+2 "+this.sm).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.sm += 2
}).margin({ right:'6%'})
Button("sm-2 "+this.sm).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.sm -= 2
})
}
Text("点击内容:"+this.clickedContent).width('100%').height(200).margin({ top: 5 })
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"), "2"))
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue)
}.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
}
.animationDuration(300)
.height('60%')
.barGridAlign({ sm: this.sm, margin: this.gridMargin, gutter: this.gridGutter })
.backgroundColor(0xf1f3f5)
.onTabBarClick((index:number)=>{
this.clickedContent += "now index " + index + " is clicked\n";
})
}
.width('100%')
.height(500)
.margin({ top: 5 })
.padding('24vp')
}
}
```
![tabs5](figures/tabs6.gif)
### 示例6
```ts
// xxx.ets
@Entry
@Component
struct TabsExample6 {
private controller: TabsController = new TabsController()
@State scrollMargin:number = 0
@State layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_CENTER
@State text: string = "文本"
build() {
Column() {
Row() {
Button("scrollMargin+10 " + this.scrollMargin).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.scrollMargin += 10
}).margin({ right:'6%', bottom:'12vp'})
Button("scrollMargin-10 " + this.scrollMargin).width('47%').height(50).margin({ top: 5 })
.onClick((event: ClickEvent) => {
this.scrollMargin -= 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 = "文本"
}).margin({bottom:'12vp'})
}
Row() {
Button("layoutStyle.ALWAYS_CENTER").width('100%').height(50).margin({ top: 5 }).fontSize(15)
.onClick((event: ClickEvent) => {
this.layoutStyle = LayoutStyle.ALWAYS_CENTER;
}).margin({bottom:'12vp'})
}
Row() {
Button("layoutStyle.ALWAYS_AVERAGE_SPLIT").width('100%').height(50).margin({ top: 5 }).fontSize(15)
.onClick((event: ClickEvent) => {
this.layoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT;
}).margin({bottom:'12vp'})
}
Row() {
Button("layoutStyle.SPACE_BETWEEN_OR_CENTER").width('100%').height(50).margin({ top: 5 }).fontSize(15)
.onClick((event: ClickEvent) => {
this.layoutStyle = LayoutStyle.SPACE_BETWEEN_OR_CENTER;
}).margin({bottom:'12vp'})
}
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar(SubTabBarStyle.of(this.text))
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Green)
}.tabBar(SubTabBarStyle.of(this.text))
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Blue)
}.tabBar(SubTabBarStyle.of(this.text))
}
.animationDuration(300)
.height('60%')
.backgroundColor(0xf1f3f5)
.barMode(BarMode.Scrollable,{margin:this.scrollMargin, nonScrollableLayoutStyle:this.layoutStyle})
}
.width('100%')
.height(500)
.margin({ top: 5 })
.padding('24vp')
}
}
```
![tabs5](figures/tabs7.gif)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或