自定义弹框如何宽度全屏,高度自定义

自定义弹框如何宽度全屏,高度自定义

HarmonyOS
2024-06-04 00:31:41
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
roseprodigal

请参考此demo // 自定义弹窗组件1

import router from '@ohos.router' 
 
@CustomDialog 
export struct MyDialog1 { 
  controller1: CustomDialogController 
  title: string = '' 
 
  build() { 
    Row() { 
      Column({ space: 10 }) { 
        Text(this.title).fontSize(25) 
          .fontColor(Color.Blue) 
        Flex({ justifyContent: FlexAlign.SpaceAround }) { 
          Button('取消') 
            .onClick(() => { 
              this.controller1.close() 
            }) 
            .backgroundColor(0xffffff) 
            .fontColor(Color.Black) 
          Button('确认') 
            .onClick(() => { 
              // this.controller1.close() 
 
            }) 
            .backgroundColor(0xffffff) 
            .fontColor(Color.Black) 
        } 
        .width('100%') 
      } 
      .width('100%') 
      .backgroundColor(Color.White).height(300) 
    } 
  } 
} 
 
// main页面 
@Entry 
@Component 
struct Index { 
  @State dialogData: string = '' 
  @State colorTest: Color = Color.Blue 
  dialogController1: CustomDialogController = new CustomDialogController({ 
    builder: MyDialog1({ 
      title: '弹窗1', 
    }), 
    // 弹窗容器样式是否自定义 
    customStyle: true, 
    offset: { dx: 0, dy: 0 }, 
    alignment: DialogAlignment.Top 
    // 是否允许点击遮障层退出 
    // autoCancel: false, 
    // 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传 
    // maskRect: ({x:0,y:567,width:'100%’,height:220}), 
    // 自定义蒙层颜色 
    // maskColor: (Color.Yellow) 
  }) 
 
  confirm(data: string) { 
    this.dialogData = data 
    console.info(recvdialogdata:${data}) // 获取弹窗输入的信息 
  } 
 
  // 在自定义组件即将析构销毁时将dialogController置空 
  aboutToDisappear() { 
    // 将dialogController置空 
    // this.dialogController1 = null 
  } 
 
  build() { 
    Row() { 
      Column({ space: 10 }) { 
        Text('这是一个弹窗的测试') 
          .fontSize(25).margin(20).fontColor(0x3399FF) 
        Button('点击打开弹窗') 
          .onClick(() => { 
            this.dialogController1.open() 
          }) 
      }.width('100%') 
    }.height('100%').backgroundColor(Color.White) 
  } 
}
分享
微博
QQ
微信
回复
2024-06-04 23:06:22
相关问题
是否可以自定义权限文字
571浏览 • 1回复 待解决
如何自定义加上圆角背景
626浏览 • 1回复 待解决
自定义的状态获取
474浏览 • 1回复 待解决
自定义弹窗自定义转场动画
436浏览 • 1回复 待解决
如何封装一个自定义Dialog对话
960浏览 • 1回复 待解决
ArkTs如何自定义容器组件?
1716浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
498浏览 • 1回复 待解决
如何自定义模拟Tabs组件
410浏览 • 1回复 待解决
如何自定义组件原型菜单
455浏览 • 1回复 待解决
如何自定义Component 属性
13506浏览 • 3回复 待解决
如何访问自定义文件?
355浏览 • 1回复 待解决
hvigor自定义扩展demo
369浏览 • 1回复 待解决
自定义组件中如何添加图片?
1219浏览 • 1回复 待解决
如何设置自定义组件height缺省
606浏览 • 1回复 待解决
ArkTS如何自定义资源文件
829浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4657浏览 • 2回复 待解决
自定义组件如何导出、引入?
899浏览 • 1回复 待解决
如何设置自定义弹窗位置
784浏览 • 1回复 待解决
自定义弹窗使用相关问题
403浏览 • 1回复 待解决
是否支持自定义装饰器
885浏览 • 1回复 待解决