【HarmonyOS NEXT】如何实现TabBar盖在TabContent上面

 

【关键字】

TabBar / TabContent / 凸起 / 叠加

【问题描述】

期待的UI效果是底部tab栏中间要凸起，需要盖在content上面。效果图如下所示：

当前看代码，TabContent和TabBar都是同一层级，有什么方法能支持TabBar盖在TabContent上面？

【解决方案】

整体思路是自定义了一个Tab叠加在页面中，可以按需求自己实现Tab。

示例Demo如下：

@Entry
@Component
struct Drag2 {
@State tabArray: Array<number> = [0, 1, 2]
@State focusIndex: number = 0
@State pre: number = 0
@State index: number = 0
private controller: TabsController = new TabsController()
@State test: boolean = false

@State icon:string ='app.media.icon'

@Builder
Tab(tabName: string, tabItem: number, tabIndex: number) {
Column({ space: 10 }) {
Stack(){
Image($r('