网站建设试用企业培训方案
Tabs
1.1概念
- Tabs 视图切换容器，通过相适应的页签进行视图页面的切换的容器组件
- 每一个页签对应一个内容视图
- Tabs拥有一种唯一的子集元素TabContent
1.2子组件
- 不支持自定义组件为子组件，仅可包含子组件TabContent，以及渲染控制类型 if/else 和 ForEach 并且 if/else 和ForEach下页仅支持TabContent，不支持自定义组件
1.2.1TabContent
- 有几个页签就写入几个TabContent
- 和build一样，只能有唯一一个子组件
1.3参数（接口）
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})
Tabs({//默认的页面索引index: 0, // 页签的位置barPosition: BarPosition.End,// controller: 控制器，控制页签样式controller: this.TabController}) {//有几个页签就写几个TabContent//和build一样只能有一个唯一的子组件TabContent() {}}
| 参数名 | 参数类型 |
|---|---|
| barPosition | BarPosition |
| index | Number |
| controller | TabsController |
- barPosition：设置页签位置，（配合vertical属性一并使用）
- index：起始索引，设置当前视图页签的索引，默认是0
- controller：Tabs控制器
1.3.1 BarPosition枚举
| 名称 | 描述 |
|---|---|
| Start | vertical属性方法设置为true时，页签位于容器左侧； vertical属性方法设置为false时，页签为容器顶部 |
| End | vertical属性方法设置为true时，页签位于容器右侧； vertical属性方法设置为false时，页签为容器底部 |
注意：属性vertical（value：boolean）：vertical默认值为false，表示内容页和导航栏垂直方向排列
1.3.2 Controller 页面控制器
-
自定义：
private TabController: TabsController = new TabsController()
1.4属性
vertical ( boolean )
- 默认值：false，设置页签位置
scrollable : boolean
- 设置是否可以通过滑动页面进行页面的切换
BarMode
- 设置TabBar布局模式
- fixed
- Scrollable：每一个TabBar均使用实际的布局宽度，超过总长度（横向的tabs的barWidth，纵向的tabs的barHeight）可滑动
2.1代码
@Entry
@Component
struct Test01 {@State message: string = 'Hello World';// 当前页签的索引@State CurrentIndex: number = 0private TabController: TabsController = new TabsController()private scroller: Scroller = new Scroller();/**滚动条的滚动范围是父级的高度* 滚动条的高度 =父级的高度/x x=内容区域的高度/父级的高度* Scroll* 可滚动的容器组件，* 当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动* 滚动的前提：主轴方向上的大小小于内容大小* 参数：* scroller：可滚动组件的控制器，用于与可滚动的组件进行绑定** 属性：* scrollable：设置滚动的方向，默认值ScrollDirection.Vertical* scrollBar：设置滚动条的状态，默认值BarState.Auto* on 默认开启 off：默认关闭 Auto：视情况出现* scrollBarWidth（）；滚动条的宽度* scrollBarColor（）：设置滚动条颜色** 建议：在最外层用Scroll，防止内容超出页面** */build() {Column() {Scroll(){Row() {this.tab('账号登录', 0)this.tab('短信登录', 1)this.tab('短信登录', 2)this.tab('短信登录', 3)}}.scrollable(ScrollDirection.Horizontal)// tab控制器Tabs({ controller: this.TabController }) {TabContent() {Column() {Scroll() {Text('第一页').backgroundColor(Color.Red).height(10000)}}.width('100%').height(500)}.backgroundColor(Color.Pink)TabContent() {Text('第二页')}}// .barWidth().barHeight(0)// 捕获视图的的行为 onChange只有一个参数，对于不同的组件具有不同的意义// 该index表示为当前视图的索引.onChange((index) => {this.CurrentIndex = index})}}@Buildertab(tabName: string, tabIndex: number) {Row() {Text(tabName).border({width: { bottom: this.CurrentIndex === tabIndex ? 2 : 0 },color: Color.Blue})}.onClick(() => {// 点击目标页签后，让当前的页签索引等于目标页签的索引this.CurrentIndex = tabIndexthis.TabController.changeIndex(this.CurrentIndex)}).width(120).height(30)}
}