如何自定义popup弹窗的布局?

如何自定义popup弹窗的布局?

HarmonyOS
2024-07-29 11:08:06
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
droidzxy

开发者可以使用构建器CustomPopupOptions创建自定义气泡,@Builder中可以放自定义的内容。除此之外,还可以通过popupColor等参数控制气泡样式。

@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
      Text('This is Custom Popup').fontSize(15)
    }.width(200).height(50).padding(5)
  }
  build() {
    Column() {
      Button('CustomPopupOptions')
        .position({x:100,y:200})
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder, // 气泡的内容
          placement:Placement.Bottom, // 气泡的弹出位置
          popupColor:Color.Pink, // 气泡的背景色
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }
    .height('100%')
  }
}


​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-popup-and-menu-components-popup-V5​


分享
微博
QQ
微信
回复
2024-07-29 17:23:58
胖头鱼圆滚滚
@State handlePopup: boolean = false //popup的显示状态
build() {
  Column() {
    Button("点我")
      .onClick(() => {
        this.handlePopup = !this.handlePopup
      })
      .bindPopup(this.handlePopup, {
        builder: this.myPopBuilder(), onStateChange: (e) => {
          //监听popup的显示状态并更新到@state的状态变量上
          this.handlePopup = e.isVisible
        }
      })
  }.justifyContent(FlexAlign.Center)
  .width("100%")
  .height("100%")
}
//自定义弹窗组件
@Builder
myPopBuilder() {
  Column() {
    Text("Item01")
      .padding(10)
    Text("Item02")
      .padding(10)
  }.width(120)
}
分享
微博
QQ
微信
回复
2024-07-29 19:03:48
相关问题
自定义弹窗自定义转场动画
654浏览 • 1回复 待解决
如何自定义弹窗中再次弹窗
1877浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
840浏览 • 1回复 待解决
如何设置自定义弹窗位置
1728浏览 • 1回复 待解决
HarmonyOS 自定义弹窗问题
221浏览 • 1回复 待解决
如何去除自定义弹窗白色背景
1844浏览 • 1回复 待解决
使用自定义弹窗实现分享弹窗
173浏览 • 1回复 待解决
如何理解自定义弹窗gridCount参数
1830浏览 • 1回复 待解决
HarmonyOS 自定义弹窗CustomDialog问题
161浏览 • 1回复 待解决
自定义弹窗使用相关问题
621浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
1984浏览 • 1回复 待解决
自定义弹窗变量如何传递给页面
2171浏览 • 1回复 待解决
鸿蒙怎么实现自定义布局Dialog
8842浏览 • 2回复 已解决
HarmonyOS 自定义弹窗遮罩未全屏
129浏览 • 1回复 待解决
HarmonyOS如何实现自定义布局内置手势
125浏览 • 0回复 待解决