如何在 TopAppBar 下面显示 BodyScreen？

Question

所以我尝试在我的代码中包含一个 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？

Answer 1

你应该使用 Scaffold 组合：

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

Answer 2

问题可能是您的根组件是 Stack/Box 或者您没有任何父组件。尝试添加 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
            )
        }
    }
}

如何在 TopAppBar 下面显示 BodyScreen？

How to show BodyScreen below TopAppBar?

android

android-jetpack

android-jetpack-compose