android 列中父项的匹配宽度(Jetpack合成)

u4dcyp6a  于 2023-01-15  发布在  Android
关注(0)|答案(6)|浏览(150)

默认情况下,Column {}的宽度是它最大的子元素的宽度。我如何使所有其他元素适应父元素Column的宽度?如果我使用Modifier.fillMaxWidth(),这些元素将占用整个可用空间,并使父元素Column变大。我如何实现与Modifier.matchParentWidth()修饰符相同的行为?

fumotvh3

fumotvh31#

您可以使用修饰符**.width(IntrinsicSize.Max)**

Column(Modifier.width(IntrinsicSize.Max)) {
        Box(Modifier.fillMaxWidth().background(Color.Gray)) {
            Text("Short text")
        }
        Box(Modifier.fillMaxWidth().background(Color.Yellow)) {
            Text("Extremely long text giving the width of its siblings")
        }
        Box(Modifier.fillMaxWidth().background(Color.Green)) {
            Text("Medium length text")
        }
    }

nkcskrwz

nkcskrwz2#

解决方案是利用intrinsic measurements的强大功能。
我们不使用Modifier.fillMaxWidth(),而是使用width(IntrinsicSize.Min)来匹配最大元素的最小宽度

chy5wohz

chy5wohz3#

这里我使用的是Modifier.fillMaxWidth,这些项不会使父列变大:

@Composable
fun Demo() {
Column(modifier = Modifier.width(300
    .dp)) {
    Text(text = "with fillMaxWidth modifier",modifier = Modifier.fillMaxWidth().background(Color.Red))
    Text(text = "without fillMaxWidth modifier",modifier = Modifier.background(Color.Gray))
 }

}

我通常是这样实现matchParentWidth的(虽然很脏,但可以完成任务):

val context = AmbientContext.current.resources
val displayMetrics = context.displayMetrics
val scrWidth = displayMetrics.widthPixels / displayMetrics.density

Column(modifier = Modifier.width(300
    .dp)) {
    Text(text = "with fillMaxWidth modifier",modifier = Modifier.fillMaxWidth().background(Color.Red))
    Text(text = "without fillMaxWidth modifier",modifier = Modifier
        .preferredWidth(scrWidth.dp)
        .background(Color.Gray))
}
a5g8bdjr

a5g8bdjr4#

您可以简单地使用fillMaxWidth()

Row(modifier = Modifier
        .fillMaxWidth()
        .background(Color.Cyan),) {
        Spacer(modifier = Modifier.padding(start = 4.dp))
        Image(
            painter = painterResource(R.drawable.tom_jerry),
            contentDescription ="this is image",

            modifier = Modifier
                .size(40.dp)
                .clip(shape = CircleShape).align(CenterVertically),
            alignment = Alignment.Center,
            contentScale = ContentScale.FillHeight

        )
        Column(modifier = Modifier.padding(start = 10.dp)) {
            Text(text = "Name : ${msg.name}")
            Text(text = "age : ${msg.age.toString()}")

        }

abithluo

abithluo5#

Surface(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentWidth(Alignment.CenterHorizontally)
        .wrapContentHeight(Alignment.CenterVertically)
) {
    Column(
        modifier = Modifier.width(300.dp)
    ) {
        // ...
        Button(
            { /*TODO*/ },
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
        ) {
            Text(stringResource(R.string.log_in))
        }
    }
}

7rfyedvj

7rfyedvj6#

您正在父列上应用Modifier.width(300.dp),该列中的子项可以占用的最大宽度为300.dp
在此上下文中,在Text可组合对象上使用Modifier.fillMaxWidth()与使用Modifier.preferredWidth(300.dp)同义,因为它只能获得与其父可组合对象相同的宽度。

相关问题