HarmonyOS TabContent架构下实现沉浸式,设置 .expandSafeArea不生效

Tabs,TabContent架构下实现沉浸式,通过下面的方式([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])不会生效。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

expandSafeArea扩展到父组件,clip是剪切效果默认为false不剪切(tab组件除外默认为true剪切,需要设置false),您可参考下此demo,:

@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder tabBuilder(index: number) {
    Column() {
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text('Tab1')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.backgroundColor('#4680ff').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]).tabBar(this.tabBuilder(0))
        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(1))
      }
      .vertical(false).clip(false)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
    }.width('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS部分场景expandSafeArea生效
1178浏览 • 1回复 待解决
HarmonyOS expandSafeArea生效
558浏览 • 1回复 待解决
HarmonyOS 关于窗口沉浸设置方式
204浏览 • 1回复 待解决
如何设置沉浸状态栏
2846浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏实现
223浏览 • 1回复 待解决
HarmonyOS Panel 设置 borderRadius 生效
956浏览 • 1回复 待解决
HarmonyOS stack设置圆角生效
327浏览 • 1回复 待解决
沉浸图文排列布局如何实现
507浏览 • 1回复 待解决
ConstraintSize尺寸设置生效
2607浏览 • 1回复 待解决
如何设置沉浸窗口,你会吗?
2244浏览 • 1回复 待解决
如何实现沉浸状态栏?
693浏览 • 1回复 待解决
沉浸登录界面如何实现
516浏览 • 1回复 待解决