Tab导航栏tabbar子组件突出上沿显示

Tab导航栏tabbar子组件目前是不能超出tabbar的高度范围,使用margin属性上移时超出部分会被隐藏,想要去实现tabbar的某个子组件超出tab导航栏高度进行显示。问题截图:

Tab导航栏tabbar子组件突出上沿显示 -鸿蒙开发者社区

HarmonyOS
2024-04-29 21:52:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
ubaba

目前可以通过自定义TabBar组件实现功能:

const COMMUNITY_TAB_BAR_INDEX: number = 2; // 初始化社区的tab下标 
const ARC_MARGIN_TOP: number = -30; // 圆弧的上外间距为-30 
 
export class TabBarDataType { 
  id: number; 
  defaultIcon: ResourceStr; 
 
  constructor(id: number, defaultIcon: ResourceStr) { 
    this.id = id; 
    this.defaultIcon = defaultIcon; 
  } 
} 
 
export const TABINFO: TabBarDataType[] = [ 
  new TabBarDataType(0, $r('app.media.icon')), 
  new TabBarDataType(1, $r('app.media.icon')), 
  new TabBarDataType(2, $r('app.media.icon')), 
  new TabBarDataType(3, $r('app.media.icon')), 
  new TabBarDataType(4, $r('app.media.icon')), 
]; 
 
@Entry 
@Component 
struct TabViewDemo { 
  @Provide selectedIndex: number = 0; // 初始化被选定的tabBar下标 
  private controller: TabsController = new TabsController(); // 初始化Tab控制器 
 
  build() { 
    Column() { 
      Tabs({ index: this.selectedIndex, barPosition: BarPosition.End, controller: this.controller }) { 
        TabContent() { 
          Text("tab1") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab2") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab3") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab4") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab5") 
            .fontSize(26) 
        } 
      } 
      .vertical(false) 
      .scrollable(false) 
      .layoutWeight(1) 
      .backgroundColor('#ffdbd9d9') 
      .barHeight(0) 
      .onChange((index: number) => { 
        this.selectedIndex = index; 
      }) 
 
      // 自定义TabBar组件 
      CustomTabBar({ selectedIndex: $selectedIndex }) 
    }.width("100%") 
    .height("100%") 
  } 
} 
 
@Component 
struct CustomTabBar { 
  @Link selectedIndex: number; // 初始化被选定的tabBar下标 
 
  build() { 
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 
      ForEach(TABINFO, (item: TabBarDataType, tabIndex: number) => { 
        // 单独一个TabBar组件 
        TabItem({ 
          tabBarIndex: tabIndex, 
          selectedIndex: $selectedIndex, 
        }) 
      }) 
    } 
    .height(60) 
  } 
} 
 
@Component 
struct TabItem { 
  @Prop tabBarIndex: number; // tabBar下标 
  @Link selectedIndex: number; // 初始化被选定的tabBar下标 
 
  build() { 
    Column() { 
      // 判断tab的下标是否为2 
      if (this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX) { 
        Column() { 
          Image(TABINFO[this.tabBarIndex].defaultIcon) 
            .size({ width: 43, height: 43 }) 
            .interpolation(ImageInterpolation.High) 
            .borderRadius(22) 
        } 
        .width(52) 
        .height(52) 
        .borderRadius(24) 
        .margin({ top: ARC_MARGIN_TOP }) 
        .backgroundColor(Color.White) 
        .justifyContent(FlexAlign.Center) 
      } else { 
        Column() { 
          // 通过被选中的tabBar下标值和tabBar的默认下标值来改变图片显示 
          Image(TABINFO[this.tabBarIndex].defaultIcon) 
            .interpolation(ImageInterpolation.High) 
            .size( 
              { width: 28, height: 28 }) 
            .borderRadius(14) 
        } 
        .width(37) 
        .height(37) 
        .justifyContent(FlexAlign.Center) 
      } 
    } 
    .width(60) 
    .onClick(() => { 
      // 更新被选中的tabBar下标 
      this.selectedIndex = this.tabBarIndex; 
    }) 
分享
微博
QQ
微信
回复
2024-04-30 20:53:49
相关问题
Navigation如何隐藏导航
414浏览 • 1回复 待解决
鸿蒙如何获取导航和状态高度
9443浏览 • 1回复 待解决
如何获取状态导航高度
804浏览 • 1回复 待解决
如何设置状态导航的颜色
658浏览 • 1回复 待解决
导航如何适配,有人知道吗?
174浏览 • 0回复 待解决
如何把导航默认在最底下显示
399561浏览 • 1回复 待解决
Dialog如何覆盖状态全屏显示
8403浏览 • 1回复 待解决
Swiper组件如何设置导航点位置
142浏览 • 1回复 待解决
如何设置父组件组件宽度变化
313浏览 • 1回复 待解决
组件事件能否到传递父组件
476浏览 • 1回复 待解决
组件中如何处理组件内点击事件
596浏览 • 1回复 待解决