默认情况下,Column {}的宽度是它最大的子元素的宽度。我如何使所有其他元素适应父元素Column的宽度?如果我使用Modifier.fillMaxWidth(),这些元素将占用整个可用空间,并使父元素Column变大。我如何实现与Modifier.matchParentWidth()修饰符相同的行为?
Column {}
Column
Modifier.fillMaxWidth()
Modifier.matchParentWidth()
fumotvh31#
您可以使用修饰符**.width(IntrinsicSize.Max)**
.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") } }
nkcskrwz2#
解决方案是利用intrinsic measurements的强大功能。我们不使用Modifier.fillMaxWidth(),而是使用width(IntrinsicSize.Min)来匹配最大元素的最小宽度
width(IntrinsicSize.Min)
chy5wohz3#
这里我使用的是Modifier.fillMaxWidth,这些项不会使父列变大:
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的(虽然很脏,但可以完成任务):
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)) }
a5g8bdjr4#
您可以简单地使用fillMaxWidth()
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()}") }
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)) } } }
7rfyedvj6#
您正在父列上应用Modifier.width(300.dp),该列中的子项可以占用的最大宽度为300.dp。在此上下文中,在Text可组合对象上使用Modifier.fillMaxWidth()与使用Modifier.preferredWidth(300.dp)同义,因为它只能获得与其父可组合对象相同的宽度。
Modifier.width(300.dp)
300.dp
Text
Modifier.preferredWidth(300.dp)
6条答案
按热度按时间fumotvh31#
您可以使用修饰符**
.width(IntrinsicSize.Max)
**nkcskrwz2#
解决方案是利用intrinsic measurements的强大功能。
我们不使用
Modifier.fillMaxWidth()
,而是使用width(IntrinsicSize.Min)
来匹配最大元素的最小宽度chy5wohz3#
这里我使用的是
Modifier.fillMaxWidth
,这些项不会使父列变大:我通常是这样实现
matchParentWidth
的(虽然很脏,但可以完成任务):a5g8bdjr4#
您可以简单地使用
fillMaxWidth()
abithluo5#
7rfyedvj6#
您正在父列上应用
Modifier.width(300.dp)
,该列中的子项可以占用的最大宽度为300.dp
。在此上下文中,在
Text
可组合对象上使用Modifier.fillMaxWidth()
与使用Modifier.preferredWidth(300.dp)
同义,因为它只能获得与其父可组合对象相同的宽度。