自定义弹窗,自定义弹窗的使用更加灵活,适用于更多的业务场景

自定义弹窗

HarmonyOS
2024-05-26 11:41:25
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
truemichael

本文主要介绍弹窗中的自定义弹窗;

自定义弹窗的使用更加灵活,适用于更多的业务场景,在自定义弹窗中您可以自定义弹窗内容,构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现,然后结合CustomDialogController来控制自定义弹窗的显示和隐藏。

CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量,且在@Component struct内部定义时赋值才有效,CustomDialog是自定义弹窗内容构造器。

使用的核心API

部分核心代码解释

实现自定义弹窗的构建,选择框是一个多选的列表弹窗,我们可以使用装饰器@CustomDialog,结合List组件来完成这个弹窗布局 ;通过CustomDialogController类显示自定义弹窗。

import Logger from '../common/utils/Logger'; 
import HobbyBean from '../common/bean/HobbyBean'; 
import CommonUtils from '../common/utils/CommonUtils'; 
import CommonConstants from '../common/constants/CommonConstants'; 
//表示这是一个自定义弹窗 
@CustomDialog 
export default struct CustomDialogWidget { 
  //用来封装弹窗兴趣爱好列表的数据,数据类型为HobbyBean,HobbyBean为自定义的类 
  @State hobbyBeans: HobbyBean[] = []; 
  //表示弹窗数据结果 
  @Link hobbies: string; 
  private controller?: CustomDialogController; 
  aboutToAppear() { 
    let context: Context = getContext(this); 
    if (CommonUtils.isEmpty(context) || CommonUtils.isEmpty(context.resourceManager)) { 
      Logger.error(CommonConstants.TAG_CUSTOM, 'context or resourceManager is null'); 
      return; 
    } 
    let manager = context.resourceManager; 
    //资源管理对象manger获取资源,在文件中定义兴趣爱好数据 
    manager.getStringArrayValue($r('app.strarray.hobbies_data').id, (error, hobbyArray) => { 
      //将数据封装到hobbyBean对象 
      if (!CommonUtils.isEmpty(error)) { 
        Logger.error(CommonConstants.TAG_CUSTOM, 'error = ' + JSON.stringify(error)); 
      } else { 
        hobbyArray.forEach((hobbyItem: string) => { 
          let hobbyBean = new HobbyBean(); 
          hobbyBean.label = hobbyItem; 
          //默认为false 
          hobbyBean.isChecked = false; 
          this.hobbyBeans.push(hobbyBean); 
        }); 
      } 
    }); 
  } 
  setHobbiesValue(hobbyBeans: HobbyBean[]) { 
    if (CommonUtils.isEmptyArr(hobbyBeans)) { 
      Logger.error(CommonConstants.TAG_HOME, 'hobbyBeans length is 0'); 
      return; 
    } 
    let hobbiesText: string = ''; 
    hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) => isCheckItem?.isChecked) 
      .map<string>((checkedItem: HobbyBean) => { 
        return checkedItem.label!; 
      }) 
      .join(CommonConstants.COMMA); 
    if (hobbiesText.length > 0) { 
      this.hobbies = hobbiesText; 
    } 
  } 
} 
import CommonConstants from '../common/constants/CommonConstants'; 
import TextCommonWidget from '../view/TextCommonWidget'; 
import CustomDialogWidget from '../view/CustomDialogWidget'; 
  
@Entry 
@Component 
struct HomePage { 
  @State hobbies: string = ''; 
  customDialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogWidget({ 
      hobbies: $hobbies 
    }), 
    alignment: DialogAlignment.Bottom, 
    customStyle: true, 
    offset: { 
      dx: 0, 
      dy: CommonConstants.DY_OFFSET 
    } 
  }) 
}

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.0.41

分享
微博
QQ
微信
回复
2024-05-27 11:55:09
相关问题
自定义弹窗自定义转场动画
376浏览 • 1回复 待解决
自定义弹窗使用相关问题
339浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
399浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
795浏览 • 1回复 待解决
如何设置自定义弹窗位置
648浏览 • 1回复 待解决
如何去除自定义弹窗白色背景
657浏览 • 1回复 待解决
自定义弹窗变量如何传递给页面
935浏览 • 1回复 待解决
如何理解自定义弹窗gridCount参数
790浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
643浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
756浏览 • 1回复 待解决
如何在全局实现一个自定义dialog弹窗
1040浏览 • 1回复 待解决
自定义装饰器使用问题
205浏览 • 0回复 待解决