[Android][compose] topBar 적용하기 feat material3

 

1. Composable 함수에 Scaffold 만들기

2. topbar attribute 추가하기

3. topbar 구성하기

 

4. Scaffold padding 설정하기

1번에서 Scaffold 를 처음 만들면 빨간색 줄이 표시됩니다. annotation으로 임시로 넘어간 것인데 2번 그림에서 최상단 주석을 보면 Material3ScaffoldPadding을 사용안했다고 하네요... 이걸 사용하지 않으면 Topbar가 Container 위에 겹쳐 노출되기 때문에 아래와 같이 설정해 주셔야 합니다.

 

설정을 안하면?

아래와 같이 컨텐츠 영역위로 topbar가 올라와서 컨텐츠 영역이 topbar영역만큼 가려지게 됩니다.

Layout Inspector