[Android Compose] Dialog Compose Preview 잘려서 보일 때 해결방법

 

dialog를 사용할 때 width가 디폴트 값으로 설정되어 있기 때문에,

직접 설정하고 싶다면 아래와 같은 설정이 필요하다

 

Dialog(
    properties = DialogProperties(
    usePlatformDefaultWidth = false    //width 강제 지정되지 않도록 설정
    )
) {
//todo 콘텐츠
}

 

 

하지만 이렇게 설정을 해줘도 막상 Preview에서 확인하면 너비가 잘려서 보이는 것을 확인 할 수 있다

 

@Preview
@Composable
private fun Preview(){
    Theme {
        MessageDialog() 
    }
}

 

 

 

스택 오버플로우에도 이렇다할 해결책이 없어서 찝찝한 상태로 이것저것 시도해보다가 나름 우회하는 방법을 발견했다!!

 

---

 

 

preview의 속성 중 showSystemUi 라는 것이 있는데, ture로 설정할 경우 현재 프리뷰의 기본 화면이 보인다

@Preview(showSystemUi = true)

 

 

 

디폴트는 이런 디바이스로 설정되어있기 때문에 디바이스의 최대 너비까지만 보이는 것..

따라서 기본 디바이스를 기본 너비가 넓은 디바이스(태블릿, 데스크탑 등)로 설정해주면 되지 않을까 싶어서 디바이스를 바꿔보니까 허용 너비가 확실히 넓어진 것을 확인 할 수 있었다

 

@Preview(showSystemUi = true, device = Devices.TABLET)

 

 

 

showSystemUi를 제외하고 디바이스만 설정해주면 필요한 영역만 깔끔하게 잘 보인다~!

@Preview(device = Devices.TABLET)

 

 

 

디바이스를 태블릿으로 설정해도 잘린다면 데스크탑으로..

 

기본적으로 스마트폰에서 다이얼로그를 띄운다면 큰 문제가 없었겠지만

우리팀은 현재 태블릿 기반 APP을 만들고 있었기 때문에 괜히 스트레스 였는데 드디어 해결해서 답답함 해소~

 

---

한 줄 요약

@Preivew의 디바이스 속성을 Tablet이나 Desktop으로 변경

@Preview(device = Devices.TABLET)