HarmonyOS鸿蒙Next中tab布局被截取

HarmonyOS鸿蒙Next中tab布局被截取 有个布局是中间的突出，但是在tab中，他会被截取，我想问一下该如何解决，是我的布局写的有问题吗？是否有例可参照 cke_562.png


更多关于HarmonyOS鸿蒙Next中tab布局被截取的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

如何实现舵式底部导航-行业常见问题-实用工具类行业实践-场景化知识 - 华为HarmonyOS开发者

或者

自定义TabBar页签案例

更多关于HarmonyOS鸿蒙Next中tab布局被截取的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


舵式底部导航

舵式导航是基础底部导航的一种扩展，中间按钮一般为核心功能，并且在设计效果上中心图标可以超出导航条的高度，两侧为普通操作按钮。

cke_353.png

1、使用Tabs组件，设置barPosition为BarPosition.End控制导航条底部展示。Tabs组件嵌套TabContent组件实现内容区。

Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  ForEach(this.tabArray, (item: BottomTabModel, index: number) => {
    if (index === Constants.TAB_INDEX_TWO) {
      TabContent()
      .backgroundColor(Color.White)
    } else {
      TabContent() {
        Row() {
          Text(item.title)
            .fontSize(30)
        }
        .height(300)
        .width('100%')
        .justifyContent(FlexAlign.Center)
      }
      .backgroundColor(Color.White)
    }
  }, (item: BottomTabModel, index: number) => JSON.stringify(item) + index)
}

2、导航条通过自定义布局实现，替代tabBar属性设置。

Flex() {
  ForEach(this.tabArray, (item: BottomTabModel, index: number) => {
    this.Tab(item.selectImage, item.defaultImage, item.title, item.middleMode, index)
  }, (item: BottomTabModel, index: number) => JSON.stringify(item) + index)
}

3、实现导航条布局，通过offset控制中心图标与两侧图标的位置。

@Builder
Tab(selectImage: Resource, defaultImage: Resource, title: string | Resource, middleMode: boolean, index: number) {
  Column() {
    if (index === Constants.TAB_INDEX_TWO) {
      Image(defaultImage)
        .size({ width: 56, height: 56 })
        .offset({ y: -15 })
    } else {
      Image(this.currentIndex === index ? selectImage : defaultImage)
        .size({ width: 22, height: 22 })
        .offset({
          y: (this.currentIndex === index && this.currentIndex !== Constants.TAB_INDEX_TWO)
            ? this.iconOffset : this.initNumber
        })
        .objectFit(ImageFit.Contain)
        .animation({
          duration: Constants.ANIMATION_DURATION,
          curve: Curve.Ease,
          playMode: PlayMode.Normal
        })
    }
    if (!middleMode) {
      Text(title)
        .fontSize(10)
        .margin({ top: 6 })
        .fontColor(this.currentIndex === index ? '#3388ff' : '#E6000000')
    }
  }
  .padding({ top: 11 })
  .width('100%')
  .backgroundColor('#F3F4F5')
  .height(90)
  .translate({ y: 40 })
  .onClick(() => {
    if (index !== Constants.TAB_INDEX_TWO) {
      this.currentIndex = index;
      this.controller.changeIndex(index);
      this.iconOffset = Constants.ICON_Offset;
    }
  })
}

可以试试重写UI逻辑：

  1. 将中间要突出的TabBar写成空白的，
  2. 然后写一个按钮放在此TabBar的位置，
  3. 在点击事中实现点击时将页面切换到指定位置，并将焦点放在

这样可以跳出tabbar的限制自由设定按钮UI

**问题描述：**如何实现tabs底部凸出的样式

**分析过程：**这种UI的布局方式思路是将需要凸出的图片进行offset偏移

详细过程：

核心代码就是判断第几个图片需要偏移：比如这里假如是第三个图片需要凸出

if (index === 2) {
      Image(defaultImage)
      .size({ width: 56, height: 56 })
      .offset({ y: -15 }) //这里是重点
}

扩展：当然还有其他实现方式，可以参考下官网：常见导航样式案例-手势与导航 - 华为HarmonyOS开发者

如果对您有帮助，望采纳！

设置了TabBar的高度和按钮的高度，按钮的高度超过了TabBar的高度被截取了。

将TabBar的高度设置大于按钮的高度。

在HarmonyOS鸿蒙Next中，tab布局被截取通常是由于布局宽度或高度设置不当，导致内容超出可视区域。检查tab组件的宽度是否被父容器限制，或是否设置了固定尺寸而未考虑内容自适应。确保使用自适应布局如Flex、Grid，或为tab组件设置合适的布局约束，避免内容溢出。

从图片来看，这是一个典型的自定义TabBar中间凸起按钮被Tab组件裁剪的问题。这通常不是布局代码错误，而是Tab组件默认的布局约束和溢出处理机制导致的。

核心原因： HarmonyOS ArkUI的Tabs组件，其内部的TabBar区域通常有固定的高度和严格的溢出隐藏（clip）设置，以确保视觉一致性。当子组件（如您中间的凸起按钮）的尺寸或位置超出该区域的边界时，就会被裁剪。

解决方案： 您无需重构整体布局。关键在于将中间的凸起按钮脱离Tabs组件的TabBar区域进行绝对定位，使其悬浮于Tabs之上。以下是基于ArkTS/ArkUI的主要实现思路：

  1. 使用绝对定位：将中间的凸起按钮使用<Stack>堆叠容器包裹整个Tabs组件，并将按钮设置为position: Absolute。
  2. 精确定位：通过offset或margin等属性，将按钮精确放置在底部中间位置。可以结合百分比或计算值来适配不同屏幕。
  3. 调整层级：确保按钮的zIndex高于Tabs，使其显示在最上层。

代码结构示例：

@Entry
@Component
struct MyTabScreen {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 1. 正常的Tabs组件
      Tabs() {
        // ... 您的各个TabContent内容
      }
      .barPosition(BarPosition.End) // 设置TabBar在底部
      .width('100%')
      .height('100%')

      // 2. 中间凸起的悬浮按钮，脱离Tabs布局流
      Button() {
        // 您的按钮内容，例如加号图标
      }
      .width(60)
      .height(60)
      .position({ x: '50%', y: 0 }) // 关键：水平居中，相对于Stack底部对齐
      .translate({ y: -30 }) // 关键：向上平移按钮高度的一半，使其一半凸出
      .zIndex(1) // 确保悬浮在TabBar之上
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明：

  • Stack容器：作为根容器，管理Tabs和悬浮按钮的层叠关系。
  • position与translate：使用position进行初步定位，再使用translate进行微调（例如上移按钮高度的一半），这是实现部分凸出的常用技巧。
  • 布局计算：按钮的最终位置可能需要根据TabBar的实际高度和自身尺寸进行动态计算，以达到完美的视觉效果。

官方参考： HarmonyOS开发者文档中，查看 “Tabs组件” 和 “Stack容器” 的用法，以及 “位置设置” 和 “弹性布局” 相关章节。其中关于Stack层叠布局和绝对定位的示例与您的问题场景高度相关。

此方案是处理此类视觉需求的通用且可靠的方法，能有效避免组件被裁剪。

回到顶部