Jetpack Compose 将文本内容对齐到脚手架的中心

Question

我的问题：

我想将我的 Text() 内容放在脚手架中的页面中心。

我试过“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
            )
        })
}

注意：我没有将这段文字放入专栏。我直接用了。

我的输出：

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

Answer 1

您需要将其放在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)
    )
}

Answer 2

将 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)),
    )
}

Answer 3

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

Answer 4

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

Jetpack Compose 将文本内容对齐到脚手架的中心

Jetpack Compose align Text content to center of the Scaffold

android

android-jetpack-compose

android-jetpack-compose-text