Jetpack Compose如何将文本内容居中对齐到Scaffold？

Question

我的问题：

我想把Text()内容放在Scaffold页面的中心。

我尝试了“textAlign = TextAlign.Center” - 它只能水平对齐文本，不能垂直对齐文本。

我的代码：

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

            }
            Text(
                text = "Content of the page",
                fontSize = 30.sp,
                color = Color.White
            )
        })
}

注意：我没有把这段文字放入列中，而是直接使用了它。 我的输出：

问题：如何将文本置于父元素的中心？

- Ranjithkumar

---

请查看：https://dev59.com/_lIH5IYBdhLWcg3wa9lo#62152703 - undefined

Answer 1

将fillMaxSize()分配给父容器，而不是Text本身：

   Box(Modifier.fillMaxSize(),
       contentAlignment = Center
   ) {
       Text(
           text = "Content of the page",
           fontSize = 30.sp,
           modifier = Modifier
               .background(Color(0xffb3e5fc)),
       )
   }

或者：

Column(Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "Content of the page",
        fontSize = 30.sp,
        modifier = Modifier
            .background(Color(0xffb3e5fc)),
    )
}

- Gabriele Mariotti

---

谢谢！你正在帮助我们的社区。我有疑问-如果没有容器（栏目），它就不能工作？ - undefined

@RanjithKumar 不 - undefined

我在我的问题中更新了代码。如果可能的话，你能帮我检查一下我的代码吗？ - undefined

@RanjithKumar 在新的代码中，你正在使用列外的文本。 - undefined

Answer 2

你需要将它放在一个Box中，并指定contentAlignment。

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxSize()
) {
    Text(
        text = "Content of the page",
        fontSize = 30.sp,
        modifier = Modifier
            .background(Color(0xffb3e5fc)),
    )
}

如果您想要对不同的Box子项进行不同的对齐方式，可以为每个项目使用.align修饰符。请注意，它仅在BoxScope内部可用，同时Column和Row也有相同的修饰符。

Box(
    modifier = Modifier
        .fillMaxSize()
) {
    Text(
        text = "Content of the page", textAlign = TextAlign.Center,
        fontSize = 30.sp,
        modifier = Modifier
            .background(Color(0xffb3e5fc))
            .align(Alignment.Center)
    )
}

- Phil Dukhov

---

在Compose版本1.0.1中，无法使用align修饰符。没有任何容器，它将无法工作。 - undefined

@RanjithKumar 是的，这是BoxScope修饰符，你仍然需要将你的项目放在一个Box中。 - undefined

Answer 3

Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(
            text = stringResource(id = R.string.social_list_empty),
            style = TextStyle(fontSize = 16.sp),
            modifier = Modifier
                .padding(8.dp)
                .align(Alignment.Center),
            textAlign = TextAlign.Center
        )
    }

参考：如需更多Jetpack Compose示例代码，请查看此处

- Android Developer

Answer 4

Scaffold 中的内容是一个可组合函数，其中默认情况下没有项目的位置信息。在您的情况下，Text 的默认位置是其父视图的左上角。将 Text 放入 Box/Colum 中的解决方案有效，因为现在 Text 被放置在占据整个屏幕的 Box 或 Colum 的中心位置。我们看到 Text 在屏幕中央，但实际上 Text 在 Box 或 Colum 的中心位置。

- Freddie