Jhonatan Sabadi
06/03/2022, 2:14 PMDivider
and LazyRow
hides Divider
?lilypuchi
06/03/2022, 2:21 PMJhonatan Sabadi
06/03/2022, 2:22 PMColumn(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 24.dp, top = 24.dp)
) {
Column(
modifier = Modifier.padding(start = 24.dp)
) {
Text(volume.name)
Text(volume.consumption.toString())
}
Divider(color = Color.Black, thickness = 1.dp)
Row(
horizontalArrangement = Arrangement.SpaceAround,
modifier = Modifier
.fillMaxWidth()
.padding(start = 24.dp, end = 32.dp, top = 16.dp)
) {
Text(
text = stringResource(R.string.poc_profile_kpi_volume_title_month),
textAlign = TextAlign.Center
)
Spacer(Modifier.width(16.dp))
Text(
text = stringResource(R.string.poc_profile_kpi_volume_title_year),
textAlign = TextAlign.Center
)
}
Row(
horizontalArrangement = Arrangement.spacedBy(64.dp),
modifier = Modifier.align(CenterHorizontally)
) {
DonutProgress(
backgroundColor = colorResource(R.color.color_neutral_03),
foregroundColor = colorResource(R.color.color_primary_02),
progress = volume.percentageCurrentMonthToMonthOfPreviousYear?.toInt() ?: 0,
progressText = volume.percentageCurrentMonthToMonthOfPreviousYear.toString(),
strokeWidth = 10.dp,
)
DonutProgress(
backgroundColor = colorResource(R.color.color_neutral_03),
foregroundColor = colorResource(R.color.color_primary_02),
progress = volume.percentageCurrentMonthToPreviousMonth?.toInt() ?: 0,
progressText = volume.percentageCurrentMonthToPreviousMonth.toString(),
strokeWidth = 10.dp,
)
}
}
LazyRow(
contentPadding = PaddingValues(24.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(volumes) { volume ->
VolumeItem(volume = volume)
}
}
lilypuchi
06/03/2022, 2:59 PMModifier.fillMaxWidth()
to the parent Column
in VolumeItem, instead of passing it as a parameter like
@Composable
fun VolumeItem(
modifier: Modifier = Modifier,
data: Data,
)
Modifier.fillMaxWidth()
emits a FillModifier
whose internal implementation shows it needing well defined constraints to place the children properly.
So, when you simply use it as a single item, it’s constraints are well defined (I guess you must be using it as a child of AppTheme { Box { .. }}
In case of lazy dynamic layout, I guess you have to provide the constraints of height or width (depending on orientation) like a fixed value or weighted constraints for proper calculation of parent’s layout bounds. Which is why it falls back to 0 width.
Here was my fix,
LazyRow(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(start = 24.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(10) {
VolumeItem(
modifier = Modifier.width(100.dp),
name = "Beer",
consumption = 10,
)
}
}
Volume Item
@Composable
fun VolumeItem(
modifier: Modifier = Modifier,
name: String,
consumption: Int,
) {
Column(
modifier = modifier
.background(Color.LightGray)
.padding(bottom = 10.dp, top = 24.dp)
) {
Column(
modifier = Modifier.padding(start = 24.dp)
) {
Text(name)
Text(consumption.toString())
}
..
}
}
Jhonatan Sabadi
06/03/2022, 4:06 PMitems(volumes) { volume ->
VolumeItem(
modifier = Modifier.width(IntrinsicSize.Max),
volume = volume
)
}
Thanks for explainlilypuchi
06/03/2022, 4:16 PMJhonatan Sabadi
06/03/2022, 4:20 PM