HarmonyOS 鸿蒙Next Tabs自定义tab展示内容，Tabs组件设置borderRadius无效
HarmonyOS 鸿蒙Next Tabs自定义tab展示内容，Tabs组件设置borderRadius无效
使用官方Tabs组件集合TabContent、tabBar自定义tab样式，期望将Tabs组件边缘设置圆角，但是使用 borderRadius设置是无效的，展示的直角的。 现有代码
Tabs({ controller: this.tabsController }) {
ForEach(this.builderArr, (item: WrappedBuilder<[Object]>, index) => {
TabContent() {
item.builder({})
}.tabBar(this.tabBarBuilder(this.titles[index], index, this.tabConfig)).align(Alignment.Top)
})
}
.onChange((index) => {
this.currentIndex = index
})
.scrollable(this.tabConfig.scrollable)
.barBackgroundColor(this.tabConfig.bgColor)
.barHeight(this.tabConfig.barHeight)
.borderRadius(20)
.barWidth('90%')
```更多关于HarmonyOS 鸿蒙Next Tabs自定义tab展示内容，Tabs组件设置borderRadius无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
目前不支持单独给Tabs的tabBar设置圆角，可通过自定义的tabBar来实现，参考以下示例：
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) tabArray: Array<string> = ['制冷','制热']
[@State](/user/State) focusIndex: number = 0
[@State](/user/State) pre: number = 0
[@State](/user/State) index: number = 0
private controller: TabsController = new TabsController()
[@State](/user/State) test: boolean = false
[@State](/user/State) tabHeight:number = 60
// 单独的页签
[@Builder](/user/Builder)
Tab(tabName: string, tabItem: string, tabIndex: number) {
Column() {
Text(tabName).fontSize(18)
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width('46%')
.margin(tabIndex ==0? {left:10,top:10,bottom:10}:{right:10,top:10,bottom:10})
.height(this.tabHeight)
.borderRadius(15)
.onClick(() => {
this.controller.changeIndex(tabIndex)
this.focusIndex = tabIndex
})
.backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffe3dcdc")
}
build() {
Column() {
Column() {
// 页签
Row({ space: 7 }) {
ForEach(this.tabArray, (item: string, index: number) => {
this.Tab( item, item, index)
})
}
.width('94%')
.margin({top:55,left:'3%',right:'3%'})
.backgroundColor("#ffe3dcdc")
.borderRadius(15)
//tabs
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabArray, (item: string, index: number) => {
TabContent() {
}
})
}
.barHeight(0)
.animationDuration(100)
.onChange((index: number) => {
console.log('foo change')
this.focusIndex = index
})
}
.alignItems(HorizontalAlign.Start)
.width('100%')
}
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next Tabs自定义tab展示内容，Tabs组件设置borderRadius无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，针对Next Tabs组件自定义tab展示内容以及设置borderRadius无效的问题，可以通过以下方式处理：
-
自定义Tab展示内容：
- 确保在Tabs组件的TabItem子组件中，通过自定义布局和样式来实现特定内容的展示。
- 使用自定义组件或布局（如DirectionLayout、StackLayout等）来包裹TabItem内的内容，并设置相应的属性来展示所需的内容。
-
borderRadius设置无效：
- 鸿蒙系统中，某些组件的样式属性可能不支持直接设置borderRadius。
- 若直接在Tabs组件或其子组件上设置borderRadius无效，可以考虑通过包裹一层支持borderRadius的组件（如ShapeElement或自定义的装饰组件）来实现圆角效果。
- 检查样式属性的设置是否正确，确保borderRadius的值被正确解析和应用。
示例代码片段（简化）：
<DirectionLayout
ohos:width="match_parent"
ohos:height="match_parent"
ohos:orientation="vertical">
<Tabs
ohos:id="$+id:tabs"
ohos:width="match_parent"
ohos:height="wrap_content">
<TabItem>
<DirectionLayout
ohos:width="match_parent"
ohos:height="wrap_content"
ohos:padding="16vp">
<!-- 自定义内容 -->
</DirectionLayout>
</TabItem>
<!-- 更多TabItem -->
</Tabs>
<!-- 其他内容 -->
</DirectionLayout>
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
