HarmonyOS 鸿蒙Next 组件设置属性无效果

父组件为Column，设置expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP)属性无效果，设置expandSafeArea([SafeAreaType. CUTOUT], [SafeAreaEdge.TOP)属性也无效果 Column的子组件为Image，位于页面顶部，想使顶部图片沉浸显示，扩展至屏幕顶部（布局超过状态栏）

caililin 1楼•5 天前

可以参考以下开发指南，使用expandSafeArea属性设置，使页面内组件无视顶部状态栏和底部导航栏的占用，达到沉浸式布局效果：
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
开发指南：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-develop-apply-immersive-effects-0000001820435461#section89942014473

可以给Scroll组件设置clip，关闭裁切属性
// 关闭Scroll组件默认的裁切效果以便子节点可以绘制在Scroll外。
.clip(false)

[@Entry](/user/Entry)
[@Component](/user/Component)
export struct ExpandSafeAreaTest {
build() {
Scroll() {
Flex({direction:FlexDirection.Column}) {
// 1.顶部banner
Column(){
Stack({ alignContent: Alignment.Top }) {
Image($r(“app.media.app_icon”)).width(‘100%’)
//todo 1、顶部图片组件设置向上拓展
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
}
}
    <span class="hljs-comment"><span class="hljs-comment">// // 2.文字公告</span></span>
    Row() {
      Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.app_icon'</span></span>)).height(<span class="hljs-number"><span class="hljs-number">25</span></span>).width(<span class="hljs-number"><span class="hljs-number">25</span></span>).margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span>, right: <span class="hljs-number"><span class="hljs-number">10</span></span> })
        .height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
        .layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>)
    }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-number"><span class="hljs-number">30</span></span>).margin({ top: <span class="hljs-number"><span class="hljs-number">5</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">5</span></span> })

    Divider().width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

    Column() {
      <span class="hljs-comment"><span class="hljs-comment">// 5.1 title</span></span>
      Row() {
        Text(<span class="hljs-string"><span class="hljs-string">'网点服务'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">17</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>).width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).height(<span class="hljs-number"><span class="hljs-number">24</span></span>)
      }
      .justifyContent(FlexAlign.Start)
      .height(<span class="hljs-number"><span class="hljs-number">24</span></span>)
      .margin({ left: <span class="hljs-number"><span class="hljs-number">16</span></span>, right: <span class="hljs-number"><span class="hljs-number">16</span></span> })

      <span class="hljs-comment"><span class="hljs-comment">// 5.2 内容</span></span>
      Flex() {
        Column() {
          Row() {
            Text(<span class="hljs-string"><span class="hljs-string">'附近网点'</span></span>)
              .textAlign(TextAlign.Center)
              .fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>)
              .fontColor(Color.White)
              .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
              .height(<span class="hljs-number"><span class="hljs-number">30</span></span>)
              .width(<span class="hljs-number"><span class="hljs-number">80</span></span>)
              .backgroundColor(Color.Red)
              .margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span>, top: <span class="hljs-number"><span class="hljs-number">15</span></span> })
            Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.app_icon'</span></span>))
              .width(<span class="hljs-number"><span class="hljs-number">20</span></span>)
              .height(<span class="hljs-number"><span class="hljs-number">20</span></span>)
              .margin({ top: <span class="hljs-number"><span class="hljs-number">15</span></span>, right: <span class="hljs-number"><span class="hljs-number">15</span></span> })
              .backgroundColor(Color.White)
          }
          .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
          .justifyContent(FlexAlign.SpaceBetween)

          Flex() {
            Text(<span class="hljs-string"><span class="hljs-string">'开发区支行'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">16</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>)
          }.margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span>, top: <span class="hljs-number"><span class="hljs-number">10</span></span> })

          Flex() {
            Text(<span class="hljs-string"><span class="hljs-string">'辽宁省沈抚新区芳庭街7号西侧裙楼1、2层'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">14</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#9B9B9B'</span></span>)
          }.margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span>, top: <span class="hljs-number"><span class="hljs-number">10</span></span> })

          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
            Row() {
              Text(<span class="hljs-string"><span class="hljs-string">'距您小于 1km'</span></span>).layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">14</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#F11B24'</span></span>)
              Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.app_icon'</span></span>)).width(<span class="hljs-number"><span class="hljs-number">18</span></span>).height(<span class="hljs-number"><span class="hljs-number">18</span></span>).margin({ right: <span class="hljs-number"><span class="hljs-number">5</span></span> })
              Text(<span class="hljs-string"><span class="hljs-string">'导航'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">14</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#F11B24'</span></span>).margin({ right: <span class="hljs-number"><span class="hljs-number">15</span></span> })
              Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.app_icon'</span></span>)).width(<span class="hljs-number"><span class="hljs-number">18</span></span>).height(<span class="hljs-number"><span class="hljs-number">18</span></span>).margin({ right: <span class="hljs-number"><span class="hljs-number">5</span></span> })
              Text(<span class="hljs-string"><span class="hljs-string">'咨询'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">14</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#F11B24'</span></span>)
            }
          }.margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span>, top: <span class="hljs-number"><span class="hljs-number">15</span></span>, right: <span class="hljs-number"><span class="hljs-number">10</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">10</span></span> })
        }
        .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
        .backgroundColor(Color.White)
        .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
      }
      .margin({ top: <span class="hljs-number"><span class="hljs-number">1</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">12</span></span> })
      .padding({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, top: <span class="hljs-number"><span class="hljs-number">5</span></span>, right: <span class="hljs-number"><span class="hljs-number">15</span></span> })
    }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f4f4f4'</span></span>)

    <span class="hljs-comment"><span class="hljs-comment">//</span></span>
    <span class="hljs-comment"><span class="hljs-comment">// // 6.理财推荐列表</span></span>
    Column() {
      <span class="hljs-comment"><span class="hljs-comment">// 6.1 title</span></span>
      Row() {
        Text(<span class="hljs-string"><span class="hljs-string">'理财产品推荐'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">17</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>).height(<span class="hljs-number"><span class="hljs-number">24</span></span>).layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>)
        Text(<span class="hljs-string"><span class="hljs-string">'更多'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">14</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#9B9B9B'</span></span>).height(<span class="hljs-number"><span class="hljs-number">24</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f4f4f4'</span></span>)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(<span class="hljs-number"><span class="hljs-number">24</span></span>)
      .margin({ left: <span class="hljs-number"><span class="hljs-number">16</span></span>, right: <span class="hljs-number"><span class="hljs-number">16</span></span> })

      <span class="hljs-comment"><span class="hljs-comment">// 6.2 内容</span></span>
      Flex() {
        Column() {
          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
            Text(<span class="hljs-string"><span class="hljs-string">'理财中心电子渠道'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">16</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>)
          }.margin({ top: <span class="hljs-number"><span class="hljs-number">15</span></span> })

          Row({ space: <span class="hljs-number"><span class="hljs-number">5</span></span> }) {
            Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
              Column() {
                Text(<span class="hljs-string"><span class="hljs-string">'1.0000'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">20</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#F11B24'</span></span>).margin({ top: <span class="hljs-number"><span class="hljs-number">10</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">5</span></span> })
                Text(<span class="hljs-string"><span class="hljs-string">'业绩比较基准/最新净值'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#F11B24'</span></span>)
              }
            }.layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>).margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span> })

            Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
              Column({ space: <span class="hljs-number"><span class="hljs-number">5</span></span> }) {
                Row() {
                  Text(<span class="hljs-string"><span class="hljs-string">'投资期限'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#9d9d9d'</span></span>)
                  Text(<span class="hljs-string"><span class="hljs-string">'100天'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#f11b24'</span></span>).margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span> })
                }

                Row() {
                  Text(<span class="hljs-string"><span class="hljs-string">'起购金额'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#9d9d9d'</span></span>)
                  Text(<span class="hljs-string"><span class="hljs-string">'10,000.00元'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#f11b24'</span></span>).margin({ left: <span class="hljs-number"><span class="hljs-number">10</span></span> })
                }
              }.margin({ top: <span class="hljs-number"><span class="hljs-number">15</span></span> })
            }.layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>).margin({ right: <span class="hljs-number"><span class="hljs-number">10</span></span> })
          }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).margin({ bottom: <span class="hljs-number"><span class="hljs-number">10</span></span> })

        }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
        .backgroundColor(Color.White)
        .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
      }
      .margin({ top: <span class="hljs-number"><span class="hljs-number">1</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">12</span></span> })
      .padding({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, top: <span class="hljs-number"><span class="hljs-number">5</span></span>, right: <span class="hljs-number"><span class="hljs-number">15</span></span> })
    }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f4f4f4'</span></span>)

    <span class="hljs-comment"><span class="hljs-comment">// // 7.存款产品推荐</span></span>
    Column() {
      <span class="hljs-comment"><span class="hljs-comment">// 7.1 title</span></span>
      Row() {
        Text(<span class="hljs-string"><span class="hljs-string">'存款产品推荐'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">17</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>).height(<span class="hljs-number"><span class="hljs-number">24</span></span>).layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>)
        Text(<span class="hljs-string"><span class="hljs-string">'更多'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">14</span></span>).fontColor(<span class="hljs-string"><span class="hljs-string">'#9B9B9B'</span></span>).height(<span class="hljs-number"><span class="hljs-number">24</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f4f4f4'</span></span>)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(<span class="hljs-number"><span class="hljs-number">24</span></span>)
      .margin({ left: <span class="hljs-number"><span class="hljs-number">16</span></span>, right: <span class="hljs-number"><span class="hljs-number">16</span></span> })

      <span class="hljs-comment"><span class="hljs-comment">// 7.2 内容</span></span>
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap }) {
        Column() {
          Row({ space: <span class="hljs-number"><span class="hljs-number">10</span></span> }) {
            Text(<span class="hljs-string"><span class="hljs-string">'年化收益率'</span></span>)
              .fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>)
              .fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>)
              .lineHeight(<span class="hljs-number"><span class="hljs-number">28</span></span>)
              .margin({ bottom: <span class="hljs-number"><span class="hljs-number">5</span></span> })

            Text(<span class="hljs-string"><span class="hljs-string">'期限'</span></span>)
              .fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>)
              .fontColor(<span class="hljs-string"><span class="hljs-string">'#040404'</span></span>)
              .lineHeight(<span class="hljs-number"><span class="hljs-number">28</span></span>)
              .margin({ bottom: <span class="hljs-number"><span class="hljs-number">5</span></span> })
          }
        }
        .padding({ top: <span class="hljs-number"><span class="hljs-number">10</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">4</span></span> })
        .backgroundColor(<span class="hljs-string"><span class="hljs-string">'#FCFCFC'</span></span>)
        .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
        .width(<span class="hljs-string"><span class="hljs-string">'48%'</span></span>)
        .margin({ bottom: <span class="hljs-number"><span class="hljs-number">7</span></span> })
      }
      .margin({ top: <span class="hljs-number"><span class="hljs-number">1</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">12</span></span> })
      .padding({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, top: <span class="hljs-number"><span class="hljs-number">5</span></span>, right: <span class="hljs-number"><span class="hljs-number">15</span></span> })

    }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f4f4f4'</span></span>)

    <span class="hljs-comment"><span class="hljs-comment">// 8.底部广告</span></span>
    Row() {
      Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.app_icon'</span></span>))
        .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
        .height(<span class="hljs-number"><span class="hljs-number">80</span></span>)
        .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
          <span class="hljs-comment"><span class="hljs-comment">//todo 2、如果需要底部拓展，可在底部组件设置</span></span>
        .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.BOTTOM])
    }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>).backgroundColor(<span class="hljs-string"><span class="hljs-string">'#f4f4f4'</span></span>)
    .padding({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, right: <span class="hljs-number"><span class="hljs-number">15</span></span>, bottom: <span class="hljs-number"><span class="hljs-number">12</span></span> })

  }
  .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

}
<span class="hljs-comment"><span class="hljs-comment">//todo [关键]3、需要设置clip为false</span></span>
.clip(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.scrollBar(BarState.Off)
.layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>)
.backgroundColor(Color.White)
.align(Alignment.TopStart)
}
}

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

sinazl 2楼•5 天前

针对HarmonyOS 鸿蒙Next 组件设置属性无效果的问题，这通常与组件的渲染机制、属性设置顺序或格式不当、布局限制以及版本兼容性等多个因素有关。以下是一些专业的排查方向：

确认组件支持情况：检查所设置的属性是否被当前组件支持。例如，某些容器类组件可能不支持直接设置圆角，需要嵌套其他支持圆角的组件来实现。
检查属性设置格式：确保属性值的格式正确。例如，borderRadius属性通常需要设置为数值或包含四个数值的数组。
布局与渲染限制：如果组件内部有固定大小的子组件或布局限制，可能会影响属性效果的显示。
版本兼容性：检查HarmonyOS SDK版本是否支持当前使用的属性。新属性可能在旧版本中不可用。

如果经过上述排查后问题依旧存在，可能是系统或框架的bug。此时，建议直接联系官网客服以获取更专业的技术支持。官网地址是：https://www.itying.com/category-93-b0.html