[Android] 005. ネストしてるScaffold

よくありそうなBottomBarにNavigationBarをおいてTopBarは各View側で制御したい場合のView配置で適当にpadding設定すると隙間があいてしまう場合の対応コピペサンプル

正解

Scaffold(
    Modifier.fillMaxSize(),
    bottomBar = {
        Row(Modifier.fillMaxWidth().height(80.dp).background(Color.Cyan)) {}
    },
    containerColor = Color.Red
) { innerPadding ->
    val title = "test"
    val layoutDirection = LocalLayoutDirection.current
    Scaffold(
        Modifier.padding(
            start = innerPadding.calculateLeftPadding(layoutDirection),
            end = innerPadding.calculateRightPadding(layoutDirection),
            bottom = innerPadding.calculateBottomPadding()
        ),
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text(title) },
                colors = TopAppBarDefaults.topAppBarColors().copy(containerColor = Color.Magenta)
            )
        },
        containerColor = Color.Green
    ) { innerPadding ->
        val topPadding = innerPadding.calculateTopPadding()
        Column(
            Modifier.fillMaxSize().padding(top = topPadding),
        ) {
            Text(title)
            Column(
                Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                Text(title)
            }
        }
    }
}

ダメな実装

内部のScaffoldのbottomに余計なpaddingが入ってしまう

Scaffold(
    Modifier.fillMaxSize(),
    bottomBar = {
        Row(Modifier.fillMaxWidth().height(80.dp).background(Color.Cyan)) {}
    },
    containerColor = Color.Red
) { innerPadding ->
    val title = "test"
    Scaffold(
        Modifier.padding(innerPadding),
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text(title) },
                colors = TopAppBarDefaults.topAppBarColors().copy(containerColor = Color.Magenta)
            )
        },
        containerColor = Color.Green
    ) { innerPadding ->
        Column(
            Modifier.fillMaxSize().padding(innerPadding),
        ) {
            Text(title)
            Column(
                Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                Text(title)
            }
        }
    }
}

おしい実装

statusbar分がズレている

Scaffold(
    Modifier.fillMaxSize(),
    bottomBar = {
        Row(Modifier.fillMaxWidth().height(80.dp).background(Color.Cyan)) {}
    },
    containerColor = Color.Red
) { innerPadding ->
    val title = "test"
    Scaffold(
        Modifier.padding(innerPadding),
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text(title) },
                colors = TopAppBarDefaults.topAppBarColors().copy(containerColor = Color.Magenta)
            )
        },
        containerColor = Color.Green
    ) { innerPadding ->
        val topPadding = innerPadding.calculateTopPadding()
        Column(
            Modifier.fillMaxSize().padding(top = topPadding),
        ) {
            Text(title)
            Column(
                Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                Text(title)
            }
        }
    }
}

Android Studio Narwhal 3 Feature Drop 2025.1.3, built on August 28, 2025