设置侧边栏半屏居中对齐样式
=============

#### 场景介绍

从6.0.0(20)版本开始，新增支持设置侧边栏半屏居中对齐样式。

[HdsTabs](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdstabs)容器组件侧边栏支持半屏居中对齐布局。横向Tabs时，若没有主动设置TabBar高度，则TabBar默认高度为48vp，纵向TabBar默认宽度为96vp，barHeight设成固定值后，TabBar无法扩展底部安全区。当safeAreaPadding不设置bottom或者bottom设置为0时，可以实现扩展安全区。

*   半屏居中对齐布局
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/51/v3/1koeGmu8RQyBFBWnudygWw/zh-cn_image_0000002625187943.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=154830E22CC12F4F3943790D0CC4C27B55F9ED83B47B196F68924B0CE1373B14)
    
*   默认横向和纵向宽度
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c4/v3/EHZU4N_FSJeRaOWnumUBZQ/zh-cn_image_0000002625108087.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=C97F2B77FD3C6611AFA3D2E875827CB1B24368C6475D3F5F1CF7A5EB0DAEFE3B)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/56/v3/qw5uQ_gwRvKUBa0ODziJ8g/zh-cn_image_0000002594668570.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=D4D808C9E0E4FF1C02321A02EDD502C5F059C813B7918D3CAEBDDFEEFCAF3A2D)
    

#### 约束条件

1.  依赖页签位于侧边栏，vertical设置为true。
    
2.  页签使用BottomTabBarStyle样式。
    

#### 开发步骤

1.  导入相关模块。
    
    // 从6.0.2(22)版本开始，无需手动导入HdsTabsAttribute。具体请参考HdsTabs的导入模块说明。
    import { HdsTabs, ExtendBarMode, HdsTabsAttribute } from '@kit.UIDesignKit';
    
2.  创建Hds一级容器组件，设置HdsTabs组件的barMode样式为ExtendBarMode.HALF\_SCREEN\_FIXED，所有页签总高度之和为HdsTabs组件高度的四分之一，且处在二分之一屏的居中位置。
    
    @Entry
    @Component
    struct Index {
      @State isVertical: boolean = false;
    
      build() {
        Column() {
          Column() {
            Row() {
              Button('verticalChange')
                .onClick(() => {
                  this.isVertical = !this.isVertical;
                })
            }
          }
          .margin({ top: 20 })
          .width('100%')
          .height('10%')
          HdsTabs({ barPosition: BarPosition.End }) {
            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.Pink)
            }
            .tabBar(new BottomTabBarStyle($r('sys.media.ohos\_app\_icon'), 'Pink'))
          }
          .vertical(this.isVertical)
          .barMode(ExtendBarMode.HALF\_SCREEN\_FIXED)
          .width('100%')
          .height('90%')
        }
      }
    }