Yan Pujante
03/20/2021, 2:57 PMRow
lets you define which one occupies all the space available.. For example, I wanted to display some text, and on the right side (=end) of the row, I want an icon, and I was able to achieve it like this:
@Composable
fun TestLayout() {
val border = Modifier.border(1.dp, color = Color.Red)
Row(modifier = Modifier.fillMaxWidth().padding(10.dp)) {
Text("Text", modifier = border.weight(1f)) // weighted
Icon(Icons.Outlined.Refresh, contentDescription = "refresh", modifier = border) // unweighted
}
}
Vadim
03/20/2021, 3:46 PM.weight(1f)
on the Text - then text will be snapped or wrapped correctly.TheMrCodes
03/21/2021, 2:54 PMRow(
modifier = Modifier.fillMaxWidth().padding(10.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text("Text", modifier = border)
Icon(Icons.Outlined.Refresh, contentDescription = "refresh", modifier = border)
}
Yan Pujante
03/22/2021, 7:01 PM// works
Row {
Column(modifier = Modifier.padding(5.dp).weight(1f)) { ... }
IconButton(onClick = {}) {
Icon(
Icons.Outlined.Delete,
contentDescription = null,
)
}
}
// doesn't work
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Column(modifier = Modifier.padding(5.dp)) { ... }
IconButton(onClick = {}) {
Icon(
Icons.Outlined.Delete,
contentDescription = null,
)
}
}
TheMrCodes
03/22/2021, 9:40 PMval border = Modifier.border(1.dp, color = Color.Red)
Row(
modifier = Modifier.fillMaxWidth().padding(10.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Column(modifier = Modifier.padding(5.dp)) {
Text("Text 1", modifier = border)
Text("Text 2", modifier = border)
}
IconButton(onClick = {}) {
Icon(
Icons.Outlined.Delete,
contentDescription = null,
)
}
}
Yan Pujante
03/23/2021, 6:56 PM