openCustomDialog를 통한 맞춤형 “Toast-like” 알림 (Font Size & Panel Size)

Source: Dev.to

openCustomDialog을 이용한 커스터마이즈 가능한 “Toast‑like” 알림 (폰트 크기 & 패널 크기)

요구 사항 설명

내장 openToast API에서는 제공하지 않는 폰트 크기와 패널 너비/높이/테두리 반경/배경을 조정할 수 있는 Toast‑like 일시적인 메시지를 제공합니다.

배경 지식

• Toast (Instant Feedback): 일시적인 피드백 UI.
  가이드:

• 전역 커스텀 다이얼로그 (UIContext): PromptAction.openCustomDialog를 통해 앱 전반에 걸친 풍부한 프롬프트를 제공하는 것이 권장됩니다.
  가이드:

• Toast API 제한: UIContext.getPromptAction().openToast은 폰트 크기나 패널 크기를 지정할 수 없습니다.
  API 레퍼런스:

구현 단계

1. 빌더를 사용해 Toast 내용을 구성합니다(예: 커스텀 fontSize, 색상, 정렬을 적용한 Text).
2. openCustomDialog로 비모달 커스텀 다이얼로그를 열고 width/height/cornerRadius/backgroundColor를 전달합니다.
3. 짧은 지연 후 closeCustomDialog를 호출해 자동 소멸시킵니다.
   • 비모달이며 중앙 정렬에 오프셋을 주어 Toast 동작을 흉내냅니다.

코드 스니펫 / 설정

let customDialogId: number = 0

@Builder
function customDialogBuilder() {
  Column() {
    // Fully customizable typography & colors
    Text('Custom Toast').fontSize(20).fontColor('#fff')
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
}

@Entry
@Component
struct Index {
  @Builder
  customDialogComponent() {
    customDialogBuilder()
  }

  build() {
    Row() {
      Column() {
        Text('Show Toast-like Dialog')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.getUIContext().getPromptAction().openCustomDialog({
              builder: () => this.customDialogComponent(),
              // Visual container controls (Toast‑like panel)
              backgroundColor: 'rgba(0,0,0,0.8)',
              backgroundBlurStyle: BlurStyle.NONE,
              cornerRadius: 5,
              width: '50%',   // panel width
              height: 50,     // panel height
              isModal: false, // non‑modal, like Toast
              alignment: DialogAlignment.Center,
              offset: { dx: 0, dy: 100 }
            }).then((dialogId: number) => {
              customDialogId = dialogId
              setTimeout(() => {
                this.getUIContext().getPromptAction().closeCustomDialog(customDialogId)
              }, 1500)
            })
          })
      }.width('100%')
    }.height('100%')
  }
}

테스트 결과

• 텍스트 폰트 크기와 패널 너비/높이/코너 반경/배경을 완전히 제어할 수 있음을 확인했습니다.
• 자동 소멸이 약 1.5 초에 안정적으로 동작하며, 인터랙션은 비모달 상태를 유지합니다.

제한 사항 또는 고려 사항

• openToast은 구현이 간단하지만 타이포그래피나 패널 크기를 커스터마이즈할 수 없습니다. 기본 메시지에만 사용하세요.
• 복잡한 스타일링이나 브랜드화된 토스트가 필요할 경우 **openCustomDialog**를 사용하고, 접근성(대비, 크기)도 함께 고려하세요.
• 안전 영역 및 디바이스 변형(웨어러블의 원형·컴팩트 화면 등)도 반드시 검토해야 합니다.

관련 문서 또는 링크

• Toast 가이드:
• 전역 커스텀 다이얼로그 가이드:
• PromptAction.openToast API: