HarmonyOS 如何在自适应布局右上角加入一个小图标

Column() {
  LoadingProgress().width(72).height(72)
  Text('点击这里取消登录').fontSize(16).fontColor(Color.Orange)
}
.backgroundColor(Color.White)
.borderRadius(15)
.padding({
  left: 17,
  right: 17,
  top: 20,
  bottom: 20
})
HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可使用浮层来实现效果,参考以下代码示例:

@Component
export struct Test6Page {
  build() {
    NavDestination() {
      Stack() {
        this.buildLoadingLayout();
      }
      .width('100%')
      .height('100%')
    }
  }

  @Builder
  OverlayNode() {
    Column() {
      Image($r('app.media.startIcon')).width(24).height(24)
    }.width(24).height(24).alignItems(HorizontalAlign.End)
  }

  @Builder
  buildLoadingLayout() {
    Stack() {
      Column() {
        LoadingProgress().width(72).height(72)
        Text('点击这里取消登录').fontSize(16).fontColor(Color.Orange)
      }

      // TODO 如何把这个图标放右上角
      // Image($r('app.media.startIcon')).width(24).height(24)
    }
    .width('auto')
    .height('auto')
    .backgroundColor(Color.White)
    .borderRadius(15)
    .padding({
      left: 17,
      right: 17,
      top: 20,
      bottom: 20
    })
    .overlay(this.OverlayNode(), {
      align: Alignment.TopEnd,
      // offset: { x: -5, y: 0 }//设置浮层偏移量
    })
    .constraintSize({ minWidth: 140, minHeight: 140 })
    .borderRadius(15)
    .shadow({ radius: 15, color: Color.Gray })
    .padding({
      left: 17,
      right: 17,
      top: 20,
      bottom: 20
    })
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS PUSH推送右上角红点问题
155浏览 • 2回复 待解决
自适应缩放布局如何实现
647浏览 • 1回复 待解决