HarmonyOS Tabs的shadow实际渲染效果不对

通过开发工具创建项目，创建时选择`Flexible Layout Ability`，在Tabs添加shadow属性，期望效果是在tabbar上有一条阴影，但实际效果没有，而且在TabContent上面了。

相关代码如下：

  build() {  
    Column() {  
      Tabs({  
        barPosition: new BreakPointType({  
          sm: BarPosition.End,  
          md: BarPosition.End,  
          lg: BarPosition.Start,  
          xl: BarPosition.Start  
        }).getValue(this.currentBreakpoint),  
      })  
      {  
        ForEach(this.tabs, (item: TabBarItem, index?: number) => {  
          TabContent() {  
            if(2 != index){  
              GridComponent()  
            }  
          }  
          .tabBar(this.TabBarBuilder(item, index))  
          // 100%  
          .width(CommonConstants.TAB_CONTENT_WIDTH)  
          // 100%  
          .height(CommonConstants.TAB_CONTENT_HEIGHT)  
        })  
      }  
      .vertical(new BreakPointType({  
        sm: CommonConstants.TAB_SM_VERTICAL,  
        md: CommonConstants.TAB_MD_VERTICAL,  
        lg: CommonConstants.TAB_LG_VERTICAL,  
        xl: CommonConstants.TAB_XL_VERTICAL  
      })  
      .getValue(this.currentBreakpoint))  
      .barWidth(new BreakPointType({  
        // 100%  
        sm: CommonConstants.TAB_SM_BAR_WIDTH,  
        // 100%  
        md: CommonConstants.TAB_MD_BAR_WIDTH,  
        // 96vp  
        lg: CommonConstants.TAB_LG_BAR_WIDTH,  
        // 96vp  
        xl: CommonConstants.TAB_XL_BAR_WIDTH  
      })  
      .getValue(this.currentBreakpoint))  
      .barHeight(new BreakPointType({  
        // 56vp  
        sm: CommonConstants.TAB_SM_BAR_HEIGHT,  
        // 56vp  
        md: CommonConstants.TAB_MD_BAR_HEIGHT,  
        // 60%  
        lg: CommonConstants.TAB_LG_BAR_HEIGHT,  
        // 60%  
        xl: CommonConstants.TAB_XL_BAR_HEIGHT  
      })  
      .getValue(this.currentBreakpoint))  
      .onChange((index: number) => {  
        this.currentIndex = index  
      })  
      .backgroundColor($r('app.color.tabbarBgColor'))  
      .shadow({  
        radius: 2,  
        color: '#1a000000',  
        offsetY: -1,  
        offsetX: 0  
      })  
    }  
    .backgroundColor($r('app.color.globalBgColor'))  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

HarmonyOS

zxjiu

2024-10-21 12:44:07

618浏览

回答 1

按赞同

按时间

Heiang

按照您的描述，我这边创建了demo，目前是这样实现的效果：

@Builder tabBuilder(title: string, targetIndex: number) {  
    Column() {  
      Divider()  
        .width('100%')  
        .margin({ bottom: 5})  
        .shadow({  
          radius: 1,  
          color: Color.Gray,  
          offsetY: -1,  
          offsetX: 0  
        })  
      Text(title)  
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')  
    }  
    .onClick(() => {  
      let cur:Tmp = new Tmp()  
      cur.foo(targetIndex)  
      cur.tabFoo()  
    })  
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

2024-10-21 17:29:32

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Tabs的shadow实际渲染效果不对

订阅鸿蒙技术特刊，精选内容抢先看