如何让Scaffold的TopAppBar自适应子组件高度？

系统默认的TopAppBar（无论Material2还是Material3）都内置了固定的最小高度和默认内边距，这会导致Modifier.wrapContentHeight()失效。以下是两种可行的解决方案：

方案一：自定义TopAppBar结构（推荐） #

直接用Surface模拟TopAppBar的视觉样式，内部完全自定义布局，彻底摆脱系统组件的高度约束：

Scaffold(
    modifier = modifier,
    topBar = {
        Surface(
            color = MaterialTheme.colorScheme.primary,
            shadowElevation = 4.dp,
            modifier = Modifier.wrapContentHeight()
        ) {
            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            ) {
                Image(
                    painterResource(id = R.drawable.foreground),
                    contentDescription = null,
                    modifier = Modifier.size(72.dp),
                    contentScale = ContentScale.Fit
                )
                Text(
                    stringResource(id = R.string.app_name),
                    fontWeight = FontWeight.Bold,
                    style = MaterialTheme.typography.headlineLarge,
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
        }
    }
) { innerPadding ->
    // 页面内容，记得使用innerPadding避免被自定义TopBar遮挡
    Box(modifier = Modifier.padding(innerPadding)) {
        // ...
    }
}

这个方案的优势是完全可控，高度会自动适配内部Image和Text的尺寸，同时保留TopAppBar的原有视觉风格。

方案二：修改系统TopAppBar的高度约束 #

如果一定要使用系统提供的TopAppBar，可以通过以下方式突破固定高度限制：

Scaffold(
    modifier = modifier,
    topBar = {
        TopAppBar(
            modifier = Modifier.height(IntrinsicSize.Min),
            title = {
                Row(
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 0.dp) // 移除title区域默认的垂直内边距
                ) {
                    Image(
                        painterResource(id = R.drawable.foreground),
                        contentDescription = null,
                        modifier = Modifier.size(72.dp),
                        contentScale = ContentScale.Fit
                    )
                    Text(
                        stringResource(id = R.string.app_name),
                        fontWeight = FontWeight.Bold,
                        style = MaterialTheme.typography.headlineLarge
                    )
                }
            },
            navigationIcon = {}, // 清空默认导航图标区域
            actions = {} // 清空默认动作图标区域
        )
    }
) { innerPadding ->
    // 页面内容
    Box(modifier = Modifier.padding(innerPadding)) {
        // ...
    }
}

通过Modifier.height(IntrinsicSize.Min)让TopAppBar根据内容的最小高度调整，同时移除title区域的默认垂直padding，避免额外的高度占用。不过这种方式仍可能受系统组件的部分默认样式限制，灵活性不如自定义方案。

内容的提问来源于stack exchange，提问作者NullPointerException