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
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
HarmonyOS
2025-01-09 16:39:12
浏览
收藏 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
    })
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
分享
微博
QQ
微信
回复
2025-01-09 18:45:20
相关问题
HarmonyOS PUSH推送右上角红点问题
710浏览 • 2回复 待解决
元服务右上角的胶囊区域
403浏览 • 1回复 待解决
自适应缩放布局如何实现
1367浏览 • 1回复 待解决
怎么创建动态自适应布局的FrameNode
160浏览 • 1回复 待解决
List水平布局如何根据内容自适应高度
1589浏览 • 1回复 待解决