Nutri Capture 프론트엔드 - windowInsetsPadding()

Nutri Capture 프론트엔드 게시글 시리즈

• Scaffold
• NavHost
• NavigationBar
• NutrientScreen 구조 잡기
• NutrientScreen의 무한 스크롤
• 무한 스크롤 로직 분리
• 역방향 무한 스크롤
• requestScrollToItem()을 이용한 깔끔한 역방향 무한 스크롤
• 스크롤 로직 View에 일임
• Card
• 채팅UI 구조 잡기
• 무한 스크롤 로직 리팩토링
• INSERT 및 DELETE 버튼 구현
• item 추가ㆍ제거 애니메이션
• bottomBar 동적 변경
• Typography
• Dimens와 함께 ChatBar 만들기
• 아이콘 제작 (1차)
• 코드 정리
• windowInsetsPadding()
• 커스텀 BottomSheetScaffold 개발 유예
• '피자' 아이콘 구현
• '피자' 아이콘 임시 적용
• NutrientBottomSheet 부분 구현

#1 문제 상황

Scaffold의 bottomBar 속에 Row(). 그 Row() 속에 TextField()가 있는 구조다. TextField()를 클릭하면 소프트키보드가 Row() 직전까지 올라오는 걸 의도했으나, 실제로는 Row()의 영역을 침범하여 TextField() 직전까지 올라온다.

 

#2 코드 스니펫

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .windowInsetsPadding(WindowInsets.ime), // <- 추가!
    bottomBar = {
        ...
    }
) { ...
    ...
}

Modifier에  windowInsetsPadding()을 추가하면, 시스템 UI (여기서는 ime(가상키보드)) 영역에 가려지지 않게 된다. 주의할 점은, windowInsetsPadding()을 반드시 Scaffold 자체의 Modifier에 적용해야한다는 것이다. 가령, bottomBar 속 BottomAppBar()의 Modifier에 적용한다든가하면 제대로 적용되지 않고 괴상한 화면이 출력된다.

 

#3 완성된 앱

#3-1 스크린샷

 

#3-2 이 게시글 시점의 Commit

GitHub - Kanmanemone/nutri-capture-new

 

#3-3 본 프로젝트의 가장 최신 Commit

GitHub - Kanmanemone/nutri-capture-new