如何在 TopAppBar 下方显示 BodyScreen？答案

【问题标题】：How to show BodyScreen below TopAppBar?如何在 TopAppBar 下方显示 BodyScreen？
【发布时间】：2020-10-18 06:04:36
【问题描述】：

所以我尝试在我的代码中包含一个 TopAppBar，但后来我让我的所有组件向上推并进入 TopAppBar 像这样 enter image description here

 TopAppBar(
            title = {
                Text(text = "Jetpack Compose")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.ArrowBack)
                }
            }
    )
    Card(
            shape = CircleShape,
            border = BorderStroke(2.dp, color = MaterialTheme.colors.primary),
            modifier = Modifier.preferredSize(48.dp),
            elevation = 16.dp
    ) {
        Image(
                imageResource(id = R.drawable.header),
                contentScale = ContentScale.Crop,
                modifier = Modifier.preferredSize(48.dp)
        )
    }
    Column(modifier = Modifier
            .padding(start = 8.dp)
    ) {
        Text("Catalin Ghita", fontWeight = FontWeight.Bold)
        Text(
                text = "Active now",
                style = MaterialTheme.typography.body2
        )
    }

如何只添加 topappbar 并同时使用中间体屏幕/背景？

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

问题可能是您的根组件是堆栈/框，或者您没有任何父组件。尝试添加Column作为你的根组件，你可以像这样添加，

Column {
    TopAppBar(
        title = {
            Text(text = "Jetpack Compose")
        },
        navigationIcon = {
            IconButton(onClick = { }) {
                Icon(Icons.Filled.ArrowBack)
            }
        }
    )
    Card(
        shape = CircleShape,
        border = BorderStroke(2.dp, color = MaterialTheme.colors.primary),
        modifier = Modifier.preferredSize(48.dp),
        elevation = 16.dp
    ) {
        Image(
            imageResource(id = R.drawable.header),
            contentScale = ContentScale.Crop,
            modifier = Modifier.preferredSize(48.dp)
        )
    }
    Column(
        modifier = Modifier
            .padding(start = 8.dp)
    ) {
        Text("Catalin Ghita", fontWeight = FontWeight.Bold)
        Text(
            text = "Active now",
            style = MaterialTheme.typography.body2
        )
    }
}

或者您可以使用Scaffold 显示顶部栏和正文内容，如下所示。

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "Jetpack Compose")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.ArrowBack)
                }
            }
        )
    }) {
    Column {
        Card(
            shape = CircleShape,
            border = BorderStroke(2.dp, color = MaterialTheme.colors.primary),
            modifier = Modifier.preferredSize(48.dp),
            elevation = 16.dp
        ) {
            Image(
                imageResource(id = R.drawable.header),
                contentScale = ContentScale.Crop,
                modifier = Modifier.preferredSize(48.dp)
            )
        }
        Column(
            modifier = Modifier
                .padding(start = 8.dp)
        ) {
            Text("Catalin Ghita", fontWeight = FontWeight.Bold)
            Text(
                text = "Active now",
                style = MaterialTheme.typography.body2
            )
        }
    }
}

【讨论】：

绝对最佳答案

【解决方案2】：

你应该使用Scaffold 可组合：

    Scaffold(
    topBar = TopAppBar()
){ innerPadding -> // content body goes here }

【讨论】：