Jetpack Compose에서 Material 3의 TopAppBar를 StarsBar 아래에 표시

이는 며칠 전 기고한 Jetpack Compose를 사용하여 Material 3에 큰 변화가 있는 Top App Bar를 설치해 보십시오.의 추가 보도다.
앞서 소개한 TopAppBarandroidx.compose.material3는 직접 설치하면 StartusBar 아래에 표시된 Edge to edge가 대응할 수 없습니다.androidx.compose.material의 한 쪽은 Acompanist의Inset로 프로그램 라이브러리로 주변의 실복을 제공하지만 androidx.compose.material3의 한 쪽은 존재하지 않기 때문issue이므로 실복이 필요하다.
나는 Acompanist에 제공될 것 같고, 동시에 대응하는 실복도 쓸 것 같다.
Acompanist Inset 주변 코드에 대한 설명은 생략합니다.
TopAppBar에 padding을 설정해도 배경색이 적용되지 않습니다.
다음 코드와 같이 TopAppBar에 StatausBar 높이의 padding을 설정하면 StatausBar 부분에 배경색을 반영하지 못할 공백이 생깁니다.
Jetpack Compose의 modifier의 행동이지만, 탑앱바의 배경색을 Statur 아래에 표시하고 싶어 대응이 불충분했다.

@Composable
fun ExampleScreen() {
    val statusBarPadding = rememberInsetsPaddingValues(
        LocalWindowInsets.current.statusBars,
        applyBottom = false,
    )
    val scrollBehavior = remember { TopAppBarDefaults.pinnedScrollBehavior() }
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            SmallTopAppBar(
                title = {
                    Text(text = "Title")
                },
                navigationIcon = {
                    BackIconButton {
                    }
                },
                scrollBehavior = scrollBehavior,
                modifier = Modifier.padding(statusBarPadding),
            )
        }
    ) {
        // contents
    }
}

이루어지다
다음 코드는 TopAppBar에 적용되며 배경색도 적용됩니다.

TopAppBar의 배경색이 투명해짐

Surface TopAppBar에 표시될 배경색 설정

외부로부터padding

을 설정할 수 있도록 TopAppBar 측에 설정SmallTopAppBar코드는 Medium과 Large도 같은 요령에 따라 설치할 수 있다.)

@Composable
fun SmallTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null,
) {
    val backgroundColor = colors.containerColor(
        scrollFraction = scrollBehavior?.scrollFraction ?: 0.0f
    ).value
    Surface(
        color = backgroundColor,
        modifier = modifier,
    ) {
        androidx.compose.material3.SmallTopAppBar(
            title = title,
            navigationIcon = navigationIcon,
            actions = actions,
            scrollBehavior = scrollBehavior,
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Transparent,
                scrolledContainerColor = Color.Transparent
            ),
            modifier = Modifier.padding(contentPadding),
        )
    }
}

여기에 설치된 TopAppBar를 사용하면 StatausBar 아래까지 TopAppBar를 정확하게 표시할 수 있습니다.

@Composable
fun ExampleScreen() {
    val statusBarPadding = rememberInsetsPaddingValues(
        LocalWindowInsets.current.statusBars,
        applyBottom = false,
    )
    val scrollBehavior = remember { TopAppBarDefaults.pinnedScrollBehavior() }
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            SmallTopAppBar(
                title = {
                    Text(text = "Title")
                },
                navigationIcon = {
                    BackIconButton {
                    }
                },
                scrollBehavior = scrollBehavior,
                contentPadding = statusBarPadding,
            )
        }
    ) {
        // contents
    }
}