android 如何将屏幕分成两半,并让所有Composable子对象遵守此约束?

rryofs0p  于 2023-03-28  发布在  Android
关注(0)|答案(2)|浏览(154)

我在Kotlin中有这样的代码:

Column {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            Text("String1")
            Text("String2")
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            Text("String3")
            Column {
                OutlinedTextField(modifier = Modifier.height(30.dp), value = "", onValueChange = {})
                OutlinedTextField(modifier = Modifier.height(30.dp), value = "", onValueChange = {})
            }
        }
    }

它产生了这样的布局:

我希望“String3”与“String1”对齐,同时让两个OutlinedTextField的大小是屏幕的一半。基本上,我需要屏幕精确地分为两半,并让每个子元素都遵守这一要求。有没有一种方法可以做到这一点,而不显式地指定子元素的宽度?

bn31dyow

bn31dyow1#

您必须在Row中的两个子节点上对Modifier应用weight

Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceAround,
        ) {
            Text("String3", modifier = Modifier.weight(1F))
            Column(modifier = Modifier.weight(1F)) {
                OutlinedTextField(modifier = Modifier.height(30.dp), value = "", onValueChange = {})
                OutlinedTextField(modifier = Modifier.height(30.dp), value = "", onValueChange = {})
            }
        }

你会看到这样

然后Alignment部分你必须在String3文本上应用textAlign = TextAlign.Center

Text("String3", modifier = Modifier.weight(1F), textAlign = TextAlign.Center)

最后你会得到。

vybvopom

vybvopom2#

你可以尝试使用Modifier.weight(..)修饰符,试试看

Row() {
    Column(
        Modifier.weight(1f).background(Blue)
    ){
        Text(text = "Weight = 1", color = Color.White)
    }
    Column(
        Modifier.weight(2f).background(Yellow)
    ) {
        Text(text = "Weight = 2")
    }
}

相关问题