如何在 Jetpack Compose 中将列中的元素居中

Question

如何将嵌入行内的第一列内的元素居中：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Row {
                    Column(modifier = LayoutPadding(top = 16.dp)) {
                        Text(text = "Centered ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                    }
                    Column {
                        Text(text = "Line One ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                        Text(text = "Line Two ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                    }
                 }
             }
         }
     }
}

在此示例中，我对填充进行了硬编码，但无法弄清楚如何立即将元素居中。如果没有这个选项，如何获取整行的高度？

Answer 1

Container(alignment = Alignment.TopCenter) 或 Center{} 会帮助你。

试试这个，

    MaterialTheme {
        Row {
            Container(width = 200.dp) {
                Center {
                    Column() {
                        Text(text = "Centered ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                    }
                }
            }
            Column {
                Text(text = "Line One ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                Text(text = "Line Two ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
            }
        }
    }

或

    MaterialTheme {
        Row {
            Container(width = 200.dp, alignment = Alignment.TopCenter) {
                    Column() {
                        Text(text = "Centered ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                    }
            }
            Column {
                Text(text = "Line One ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
                Text(text = "Line Two ", style = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold))
            }
        }
    }

Answer 2

使用 1.0.0 在 Column

中使用 Modifier.align

Row (){
    Column( modifier = Modifier.align(Alignment.CenterVertically)){
        Text(text = "Centered ", style = textStyle)
    }
    Column {
        Text(text = "Line One ", style = textStyle)
        Text(text = "Line Two ", style = textStyle)
    }
}

或者您可以在 Row 元素中使用 verticalAlignment = Alignment.CenterVertically：

Row (verticalAlignment = Alignment.CenterVertically){
    Column(){
        Text(text = "Centered ", style = textStyle)
    }
    Column() {
        Text(text = "Line One ", style = textStyle)
        Text(text = "Line Two ", style = textStyle)
    }
}

如何在 Jetpack Compose 中将列中的元素居中

How to center elements inside a column in Jetpack Compose

android

android-layout

kotlin

android-jetpack

android-jetpack-compose