Reputation: 16449
I would like my screen to show a scrolling list and a button below it. The button should always be visible. I tried the following, but it did does not work. The LazyColumn
takes the entire screen. I want the Button
to take it's space at the bottom, and then the LazyColumn
has the rest of the screen.
Column(Modifier.fillMaxSize()) {
LazyColumn {
items(50) { i ->
Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
}
}
Button(onClick = { println("hi") }) {
Text("Hello")
}
}
Upvotes: 52
Views: 20734
Reputation: 2966
You can apply the weight modifier to the lazyColumn:
Column(Modifier.fillMaxSize()) {
LazyColumn(Modifier.weight(1f)) {
items(50) { i ->
Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
}
}
Button(onClick = { println("hi") }) {
Text("Hello")
}
}
This is also explained in the Jetpack Compose basics codelab
Upvotes: 102
Reputation: 7862
Not entirely an answer to the question, but I had an issue where LazyColum()
took up the entire width of the screen. All credit to "Sinner of the System".
Added .padding(8.dp)
to Modifier.fillMaxWidth()
to add some space.
Column (
modifier = Modifier
.fillMaxSize()
.background(Color.White),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Top
) {
LazyColumn(
modifier = Modifier
.fillMaxWidth().padding(8.dp)
.border(width = 1.dp, color = Color.Gray, shape = RoundedCornerShape(5.dp))
) {
item {
Row(
modifier = Modifier.fillMaxWidth()
) {
Spacer(modifier = Modifier.width(15.dp))
Text(text = "foo,")
Spacer(modifier = Modifier.width(5.dp))
Text(text = "bar")
}
}
}
}
Upvotes: 0