HarmonyOS Cangjie: Custom Dialog Implementation

HarmonyOS의 Cangjie 언어에서 스텀 다이얼로그를 구현하는 방식은 ArkTS와 유사하면서도 차이점이 존재한다. 본문에서는 Cangjie만의 다이얼로그 구성 방식과 실전 활용법을 살펴다.

CustomDialogController 기본 구조

Cangjie에서는 CustomDialogController를 통해 커스텀 다이얼로그를 제어한다. 생성자에 전달하는 CustomDialogControllerOptions 객체에서 모든 설정을 일괄 정의한다.

let popupManager: CustomDialogController = CustomDialogController(
    CustomDialogControllerOptions(
        builder: toastWidget(),
        customStyle: true,
        autoCancel: false
    )
)

핵심 속성 상세 설명

속성명	기능 설명	특이사항
customStyle	스타일 커스텀 여부	false 시 최대 높이 90%, true 시 전체 화면 가능
autoCancel	배경 터치 시 닫힘 여부	기본값 주의 필요
alignment	다이얼로그 정렬 위치	화면 기준 중앙/상단/하단 등
offset	위치 오프셋	정렬 기준 추가 이동
gridCount	그리드 너비 비율	값이 클수록 넓어짐
maskColor	딤드 레이어 색상	RGBA 형식 지원
cornerRadius	배경판 둥글기	단위: vp

프로그래밍 제어

초기화 후 open()와 close() 메서드로 노출 상태를 제어한다.

// 다이얼로그 표시
popupManager.open()

// 다이얼로그 숨김
popupManager.close()

ArkTS와의 문법 차이

Cangjie에서는 콜 정의와 상 지정 방식이 ArkTS와 다르다. 특히 cancel 콜과 Color 생성자 문법에 주의가 필요하다. 또한 @CustomDialog 데코레이터로 정의한 컴포넌트의 파라미터는 반응형 업데이트가 지원되지 않는 제약이 있다.

실전 예제: 투명도 토스트 팝업

아래는 반투명 배경의 텍스트 알림 팝업을 구현한 전체 코드다.

// 다이얼로그 컨트롤러 설정
let toastController: CustomDialogController = CustomDialogController(
    CustomDialogControllerOptions(
        builder: toastWidget(),
        gridCount: 3,
        customStyle: true,
        autoCancel: false,
        maskColor: Color(0, 0, 0, alpha: 0.0),
        cancel: { => AppLog.info('Dismiss callback triggered') }
    )
)

// 커스텀 다이얼로그 컴포넌트
package ohos_app_cangjie_entry.components

import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import cj_res_entry.app

@CustomDialog
public class ToastWidget {
    var dialogRef: Option<CustomDialogController> = Option.None
    
    func build() {
        Row() {
            Text('작업이 완료되었습니다')
                .fontColor(Color.WHITE)
                .fontSize(15)
        }
        .width(200)
        .height(200)
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .backgroundColor(0x80000000)
        .borderRadius(10)
    }
}

위 예제에서 maskColor의 알파값을 0으로 설정해 배경 딤드 과를 제거했으며, backgroundColor의 0x80 프리픽스로 컨텐 영역만 50% 명도를 적용했다. gridCount: 3은 적절한 너비 비율을 확보하기 위한 설정이다.

태그: Cangjie CustomDialogController HarmonyOS ArkTS CustomDialog

8월 8일 00:05에 게시됨

괴물 클럽