Zoltan Demant
11/08/2023, 7:30 AMIntrinsicSize
might help, but no bueno. Current layout is below:
Column(
modifier = Modifier.padding(
vertical = KeylineSmall,
horizontal = KeylineMedium,
),
content = {
Row(
verticalAlignment = CenterVertically,
horizontalArrangement = spacedBy(SpaceMedium),
content = {
Text(
text = label(AllAccounts),
style = Theme.type.overline,
emphasis = Subtle,
variant = Strong,
)
repeat(15) { // TODO: Remove
portfolio.accounts.forEach { account ->
Circle(
color = colorize(account.color),
size = CircleMini,
)
}
}
},
)
Amount(
value = portfolio.total,
currencyCode = portfolio.currencyCode,
size = Large,
)
},
)
Alexander Zhirkevich
11/08/2023, 8:12 AMZoltan Demant
11/08/2023, 8:20 AMAnastasia [G]
11/08/2023, 8:25 AMZoltan Demant
11/08/2023, 8:49 AMyschimke
11/08/2023, 9:32 AMefemoney
11/08/2023, 9:35 AMColumn(
Modifier
.padding(vertical = 12.dp, horizontal = 16.dp)
.width(IntrinsicSize.Min)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
Text(
text = "All accounts",
style = MaterialTheme.typography.labelSmall,
)
Canvas(
Modifier
.weight(1f)
.height(8.dp)
) {
val minDimen = size.minDimension
val radius = minDimen / 2
val sectionLen = minDimen + 4.dp.toPx()/*spacing*/
val count = (size.width / sectionLen).roundToInt()
repeat(count) { index ->
drawCircle(
color = Color.Blue,
center = Offset(x = (index * sectionLen) + radius, y = radius),
)
}
}
}
Text(
text = money,
style = MaterialTheme.typography.headlineSmall,
)
}
Intrinsic size on the Column. Custom drawing using the measured size.FlowRow
might be a solution too, since it composes content as far as there is space!Zoltan Demant
11/08/2023, 9:46 AMefemoney
11/08/2023, 9:47 AMZoltan Demant
11/08/2023, 10:49 AMyschimke
11/08/2023, 11:00 AM@Composable
@Preview
fun Test() {
Box(modifier = Modifier.size(400.dp)) {
Column(modifier = Modifier.width(IntrinsicSize.Min)) {
Row(modifier = Modifier.fillMaxWidth()) {
Text(text = "All Accounts", style = MaterialTheme.typography.caption3)
Box(modifier = Modifier.background(Color.Red).fillMaxWidth().height(10.dp))
}
Text(text = "$1,098,397.00", style = MaterialTheme.typography.title1)
}
}
}
efemoney
11/08/2023, 11:01 AMyschimke
11/08/2023, 11:12 AMefemoney
11/08/2023, 11:12 AMyschimke
11/08/2023, 11:13 AMZoltan Demant
11/08/2023, 1:38 PMColumn {
Row(Modifier.width(Min)) {
AllAccounts() + Row(Modifier.weight(1f)) { Circles )
Amount()
}
}
efemoney
11/08/2023, 1:54 PMLayout
is the way to go. With custom Layout you will compose all accounts normally but then you can place only those you have space for and more importantly, you will report the correct constrained size back. Its a shame though, because you’d have to reimplement Row measurement & layout in the process.Zoltan Demant
11/08/2023, 2:44 PMZach Klippenstein (he/him) [MOD]
11/08/2023, 3:43 PM