HarmonyOS 鸿蒙Next 设置expandSafeArea无效

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 设置expandSafeArea无效
测试代码如下,.欢迎来到半角巷这个布局设置了expandSafeArea还是不能沉浸到底部

// xxx.ets
import { MyWaterFlow } from '../model/MyWaterFlow'

@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
  }

  @State imgRes: Resource = $r("app.media.app_icon")

  build() {
    Navigation(this.pageInfos) {
      Stack() {
        //个人主页时底部引导发布的提示
        Row() {
          Column() {
            Text("欢迎来到半角巷").fontSize(14).fontColor("#FFCC33")
            Text("这次你又带来了什么知识?").fontSize(14).fontColor("#FFCC33").margin({ top: 2 })
          }.margin({ left: 15 }).layoutWeight(1)
          .alignItems(HorizontalAlign.Start)

          Row() {
            Text("分享知识").fontSize(14).fontColor("#333333").margin({ left: 10 })
          }
          .onClick(() => {
          })
          .height(40)
          .padding({ left: 20, right: 20 })
          .margin({ right: 15 })
          .backgroundColor("#FFCC33")
          .borderRadius(20)

        }.width("100%").height(200).backgroundColor("#373737")
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      }
      .backgroundColor(Color.Red)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      .alignContent(Alignment.BottomStart)
      .height("100%")
      .width("100%")
    }.hideTitleBar(true)
    .mode(NavigationMode.Stack)
    // .navBarWidth(this.navBarWidth + "%")
    .navDestination(this.PageMap)
  }

  @Builder
  popupBuilder() {
    Row() {
      Text("想要连续收听?")
        .fontSize(14)
        .fontColor(Color.White)

    }.backgroundColor(Color.Green)
    .borderRadius(8)
    .padding({
      left: 12,
      right: 12,
      top: 8,
      bottom: 8
    })
  }
}

更多关于HarmonyOS 鸿蒙Next 设置expandSafeArea无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

以下是否可以满足您的需求

// import { MyWaterFlow } from '../model/MyWaterFlow'
@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
  }

  @State imgRes: Resource = $r("app.media.app_icon")

  build() {
    Navigation(this.pageInfos) {
      Stack({ alignContent: Alignment.BottomEnd }) {
        //个人主页时底部引导发布的提示
        Row() {
          Column() {
            Text("欢迎来到半角巷").fontSize(14).fontColor("#FFCC33")
            Text("这次你又带来了什么知识?").fontSize(14).fontColor("#FFCC33").margin({ top: 2 })
          }.margin({ left: 15 }).layoutWeight(1)
          .alignItems(HorizontalAlign.Start)

          Row() {
            Text("分享知识").fontSize(14).fontColor("#333333").margin({ left: 10 })
          }
          .onClick(() => {
          })
          .height(40)
          .padding({ left: 20, right: 20 })
          .margin({ right: 15 })
          .backgroundColor("#FFCC33")
          .borderRadius(20)
        }.width("100%").height(200).backgroundColor("#373737").margin({ bottom: -30 })
      }
      .backgroundColor(Color.Red)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
      .alignContent(Alignment.BottomStart)
      .height("100%")
      .width("100%")
    }.hideTitleBar(true)
    .mode(NavigationMode.Stack)
    // .navBarWidth(this.navBarWidth + "%")
    .navDestination(this.PageMap)
  }

  @Builder
  popupBuilder() {
    Row() {
      Text("想要连续收听?")
        .fontSize(14)
        .fontColor(Color.White)
    }.backgroundColor(Color.Green)
    .borderRadius(8)
    .padding({
      left: 12,
      right: 12,
      top: 8,
      bottom: 8
    })
  }
}

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])

目前问题没有解决,就把height(200)改为height(‘20%’),高度设置为百分比expandSafeArea生效

// import { MyWaterFlow } from '../model/MyWaterFlow'
@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
  }

  @State imgRes: Resource = $r("app.media.app_icon")

  build() {
    Navigation(this.pageInfos) {
      Stack({ alignContent: Alignment.BottomEnd }) {
        //个人主页时底部引导发布的提示
        Row() {
          Column() {
            Text("欢迎来到半角巷").fontSize(14).fontColor("#FFCC33")
            Text("这次你又带来了什么知识?").fontSize(14).fontColor("#FFCC33").margin({ top: 2 })
          }.margin({ left: 15 }).layoutWeight(1)
          .alignItems(HorizontalAlign.Start)

          Row() {
            Text("分享知识").fontSize(14).fontColor("#333333").margin({ left: 10 })
          }
          .onClick(() => {
          })
          .height(40)
          .padding({ left: 20, right: 20 })
          .margin({ right: 15 })
          .backgroundColor("#FFCC33")
          .borderRadius(20)
        }.width("100%").height("20%").backgroundColor("#373737")
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
      }
      .backgroundColor(Color.Red)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
      .alignContent(Alignment.BottomStart)
      .height("100%")
      .width("100%")
    }.hideTitleBar(true)
    .mode(NavigationMode.Stack)
    // .navBarWidth(this.navBarWidth + "%")
    .navDestination(this.PageMap)
  }

  @Builder
  popupBuilder() {
    Row() {
      Text("想要连续收听?")
        .fontSize(14)
        .fontColor(Color.White)
    }.backgroundColor(Color.Green)
    .borderRadius(8)
    .padding({
      left: 12,
      right: 12,
      top: 8,
      bottom: 8
    })
  }
}

更多关于HarmonyOS 鸿蒙Next 设置expandSafeArea无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,如果遇到setExpandSafeArea无效的问题,可能是由于以下几个原因:

  1. 布局容器未正确设置:确保你是在支持扩展安全区域的容器(如StackLayoutDirectionalLayout)上调用setExpandSafeArea(true)。如果容器本身不支持或者设置被覆盖,可能会导致无效。

  2. 组件层级问题:检查你的组件层级,确保设置setExpandSafeArea的容器是父级或正确的层级,以便能够正确扩展安全区域。

  3. 主题或样式覆盖:有时候,全局主题或样式可能会覆盖局部设置。检查是否在其他地方(如全局样式文件)对安全区域有设置,并可能导致冲突。

  4. 系统版本差异:不同版本的鸿蒙系统可能对安全区域的处理有所不同。确保你的代码是在目标系统版本上测试过的,并符合该版本的规范。

  5. 代码错误:重新检查你的代码,确保没有拼写错误或逻辑错误,这可能导致setExpandSafeArea没有被正确调用。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部