android - 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
            )
        })
}

注意：我没有将此文本放入 Column。我直接用过。

我的输出：

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

score 3 · Accepted Answer

分配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)),
    )
}

score 1 · Accepted Answer

您需要将其放在 aBox中，并指定contentAlignment

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

如果您想以不同方式对齐不同的Box子项，可以.align对每个项目使用修饰符。请注意，它仅在内部可用，并且对于andBoxScope也有相同的修饰符。ColumnRow

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

score 1 · Accepted Answer

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 的更多示例代码，请查看此

score 0 · Accepted Answer

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

android - Jetpack Compose 将文本内容对齐到 Scaffold 的中心

4 回答 4

Related

Reference