Jetpack Compose 将文本内容对齐到 Scaffold 的中心答案

【问题标题】：Jetpack Compose align Text content to center of the ScaffoldJetpack Compose 将文本内容对齐到 Scaffold 的中心
【发布时间】：2021-08-25 06:43:23
【问题描述】：

我的问题：

我想将我的 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
            )
        })
}

注意：我没有将此文本放入列中。我直接用了。

我的输出：

问题： 如何将文本放置到父级的中心？

【问题讨论】：

另请查看：stackoverflow.com/questions/59713224/…

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

【解决方案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)),
    )
}

【讨论】：

谢谢！你正在帮助我们的社区。我的疑问 - 没有容器（列）它不会工作？
@RanjithKumar No
我更新了问题中的代码。如果可能的话，你能检查我的代码吗？
@RanjithKumar 在新代码中，您使用的是列外的文本

【解决方案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)
    )
}

【讨论】：

对齐修饰符在撰写版本 1.0.1 中不可用。没有任何容器它不会工作？
@RanjithKumar 是的，它是 BoxScope 修饰符，你仍然需要将你的项目放在 Box 中

【解决方案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示例代码，查看this

【讨论】：

【解决方案4】：

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

【讨论】：