撰写：向（惰性）列添加足够的底部填充以避免 FAB 覆盖其内容的正确方法是什么？

Question

该问题与此处讨论的问题非常相似Flutter

有没有一种方法可以动态地将底部填充添加到（惰性）列，以便其内容永远不会被 FAB 遮挡？

FAB 已添加到脚手架中，因此我希望有某种方法来动态获取此填充。

Answer 1

你可以尝试一下，虽然这可能不是一个好的解决方案，

@Composable
fun MyScreen() {
    
    var fabHeight by remember {
        mutableStateOf(0)
    }

    val heightInDp = with(LocalDensity.current) { fabHeight.toDp() }

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                modifier = Modifier.onGloballyPositioned {
                    fabHeight = it.size.height
                },
                shape = CircleShape,
                onClick = {},
            ) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "icon")
            }
        },
        floatingActionButtonPosition = FabPosition.End
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(it),
            contentPadding = PaddingValues(bottom = heightInDp + 16.dp)
        ) {
            items(100) {
                Text(text = " Hello world Hello world Hello world Hello world  Hello world")
            }
        }
    }
}

编辑：只需将修改后的填充添加到 contentPadding 中LazyColumn

添加硬编码16.dp是因为在内部实现具有从底部Scaffold偏移的私有属性。fab

因此，拥有所有这些将产生这样的结果：