https://kotlinlang.org logo
m

Mehdi Haghgoo

09/02/2020, 1:52 PM
The following code has some problem that causes the FAB to be located at the bottom-left of screen when app runs and once a new item is added to the lazy list, it jumps to the bottom-center.
Copy code
@Composable
fun TodoScreen(
    items: List<TodoItem>,
    onAddItem: (TodoItem) -> Unit,
    onRemoveItem: (TodoItem) -> Unit
) {
    Column {
        LazyColumnFor(
            items = items,
            modifier = Modifier.weight(1f),
            contentPadding = InnerPadding(top = 8.dp)
        ) { todo ->
            TodoRow(
                todo = todo,
                onItemClicked = { onRemoveItem(it) },
                modifier = Modifier.fillParentMaxWidth()
            )
        }

        // For quick testing, a random item generator button
        FloatingActionButton(
                shape = CircleShape,
                elevation = 8.dp,
                icon = {
                    Row(modifier = Modifier.padding(16.dp)){
                        Icon(asset = vectorResource(id = R.drawable.add))
                        Text("Add New Item")
                    }
                         },
                onClick = { onAddItem(generateRandomTodoItem()) },
                modifier = Modifier.gravity(Alignment.CenterHorizontally),
        )
    }
}
Any ideas why this happens? Do I need a constraint mechanism or something for the FAB?
m

Michał Jurczyk

09/02/2020, 1:56 PM
Try replacing the top Colum with a Stack as @ppvi suggested and add this modifier:
Copy code
Stack(
    modifier = Modifier.fillMaxSize()
) {
 ...  
}
f

flosch

09/02/2020, 2:05 PM
Or even better: a Scaffold
m

Mehdi Haghgoo

09/02/2020, 2:06 PM
Could you please explain why Scaffold is better for this purpose?
t

Timo Drick

09/02/2020, 2:06 PM
In theory you do not need to use Stack. Just add this Modifier.fillMaxSize to the Column. It happens because the Column is wrap content by default. And when there is no item than the Column is just as width as the FAB
f

flosch

09/02/2020, 2:08 PM
Could you please explain why Scaffold is better for this purpose?
Since you also get the
innerPadding
for your bodyContent. Although I am not quite sure now, if that also accounts the FAB or just the top and bottom bars But apart from that there is also the convenient
floatingActionButtonPosition
parameter there
t

Timo Drick

09/02/2020, 2:11 PM
Also it looks like the LazyColumnFor does not respect the width of the Column. Maybe a bug?
So better specify the width of the Column so you do not get some undefined behaviour
5 Views