鸿蒙 arkts 子组件调用父组件的方法代码示例

/**
 * 选择弹窗
 * 使用示例- 
 *
@State parentContext:object= this
 SelectPickerDialog: CustomDialogController = new CustomDialogController({
 builder: SelectPickerDialog({
 title: $title,parentContext:$parentContext,
 arr:$,//[{key:,name:,detail:,obj:,onClick:function}]列表内容
 btnObj:$,//[{name:,onClick:function,key:}]
 }),
 offset: { dx: 0, dy: -25 }
 })

 selectPickerDialogDisappear() {
 this.SelectPickerDialog = null // 将dialogController置空
 }
 //this.SelectPickerDialog.close()
 //this.SelectPickerDialog.open();
 */
@CustomDialog
export default struct SelectPickerDialog {
  @Link title:string//标题
  @Link arr:Array<Object>
@Link parentContext:Object//父级的上下文 按需声明
  @Link btnObj:Array<Object>//按钮事件
  controller?: CustomDialogController
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Text(this.title)
        .fontWeight(FontWeight.Bold)
        .fontSize(16)
        .width('100%')
        .padding({left:'15vp',top:15,bottom:15})
        .border({width:{bottom:1},color:'#f2f2f2',style:BorderStyle.Solid})
      if(this.arr.length<=0){
        Text('没有数据')
          .fontSize(16)
          .fontColor('#999999')
          .width('90%')
          .padding({left:'5vp',bottom:15,top:15})
      }
    Column(){
      Column(){
        Stack({ alignContent: Alignment.TopStart }) {
          Scroll(this.scroller) {
            Column() {
              ForEach(this.arr, (item) => {
                Column({ space: 5 }) {
                  Text(item.name)
                    .fontSize(16)
                    .width('100%')
                    .padding({ left: '5vp' })
                    .margin({ bottom: 4 })
                    .border({ width: { bottom: item.detail ? 0 : 1 }, color: '#f2f2f2', style: BorderStyle.Solid })
                  if (item.detail) {
                    Text(item.detail)
                      .fontSize(16)
                      .fontColor('#999999')
                      .width('100%')
                      .padding({ left: '5vp', bottom: 4 })
                      .border({ width: { bottom: 1 }, color: '#f2f2f2', style: BorderStyle.Solid })
                  }
                }
                .margin({ top: 10 })
                .onClick(() => {
                  if (typeof item.onClick == "function") {
                    item.onClick(item.obj)
                  }
                })
              }, item => item.key)
            }
          }
          .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
          .scrollBar(BarState.On) // 滚动条常驻显示
          .scrollBarColor(Color.Gray) // 滚动条颜色
          .scrollBarWidth(5) // 滚动条宽度
          .edgeEffect(EdgeEffect.None)
        }
        .height(190)
      }
     Column(){
       ForEach(this.btnObj,(item)=>{
         Button(item.name).width('95%').margin({ bottom: 20 })
           .onClick(()=>{
             if(typeof item.onClick=="function"){
               item.onClick()
             }
           })
       },item=>item.key)
     }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height(250)
    .width('90%')
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值