How can I avoid defining a fixed height
for the Box
that I have inside a Row
? You can see it in the image, it is the yellow view that is the Box
. If I use fillMaxWidth()
or wrapContentHeight()
, the Box
has height of 0
. Why is this happening?
Code:
@Composable
fun ProfileScreen(
profileInfo: ProfileUi = generateInfo()
) {
LazyColumn(
modifier = Modifier
.systemBarsPadding()
.navigationBarsPadding()
.fillMaxSize(),
contentPadding = PaddingValues(bottom = 15.dp),
verticalArrangement = Arrangement.spacedBy(15.dp),
) {
item {
HeaderProfile(
modifier = Modifier.background(MovieWhiteColor).padding(top = 15.dp),
avatarUrl = profileInfo.avatarUrl,
name = profileInfo.name,
carouselItems = profileInfo.carouselItems
)
}
items(profileInfo.followsItems) { follow ->
Spacer(modifier = Modifier.height(15.dp))
Column(
modifier = Modifier
.fillMaxWidth()
.background(MovieWhiteColor)
.padding(18.dp),
verticalArrangement = Arrangement.spacedBy(18.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Box(
modifier = Modifier
.width(6.dp)
.height(25.dp)
.clip(RoundedCornerShape(25.dp))
.background(MovieYellowColor)
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = follow.title,
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
}
Text(
text = follow.description,
fontSize = 14.sp,
)
if(follow.buttonData != null) {
Button(
onClick = {},
colors = ButtonDefaults.buttonColors(
containerColor = MovieYellowColor,
contentColor = MovieButtonTextColorFollow
),
shape = RoundedCornerShape(10.dp),
modifier = Modifier.fillMaxWidth()
) {
Text(text = follow.buttonData.text)
}
}
}
}
items(profileInfo.menuOptionsItems) { menuOption ->
Row(
modifier = Modifier
.fillMaxWidth()
.background(MovieWhiteColor)
.clickable { }
.padding(vertical = 15.dp, horizontal = 24.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = menuOption.text,
fontWeight = FontWeight.Bold
)
Icon(
Icons.AutoMirrored.Filled.NavigateNext,
contentDescription = null,
tint = MovieGray15Color
)
}
}
}
}
I am not sure if I properly understood your question, as your code seems not to match what you are showing on the screenshot.
However, if you are asking how to achieve a headline like this:
You can use a combination of fillMaxHeight
and InstrinsicSize.Min
, as described in the official documentation:
@Preview(showBackground = true)
@Composable
fun Headline() {
Row(
modifier = Modifier
.height(IntrinsicSize.Min) // set height of Row to smallest child Composable
.padding(4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Box(
modifier = Modifier
.width(6.dp)
.fillMaxHeight() // match height of Row
.clip(RoundedCornerShape(25.dp))
.background(Color.Red) // use your MovieYellowColor here
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Personas Favoritas",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
}
}
With this code, the red / yellow line will match the height of the Text
Composable.
You can't use wrapContentHeight()
in this case because the Box
has no content. To use a Box with a content, you would need to pass the content
like this:
Box(
modifier = Modifier.wrapContentHeight()
) {
// pass content here
// Text("This is the content of the Box")
}