为什么浮动动作按钮是透明的，即使它是彩色的，并显示它背后的列表Jetpack撰写

Question

我有一个懒惰列表和一个浮动动作按钮在底部，FAB有一个颜色。但是jetpack compose中的浮动动作按钮在背景中显示列表，即使它有颜色。即使添加了标高，它也不工作。如何解决?

Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
) {
androidx.compose.material3.FloatingActionButton(
containerColor = appColors.primary,
contentColor = appColors.primary,
elevation = FloatingActionButtonDefaults.elevation(8.dp),
shape = CircleShape,
onClick = {},
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp),
) {
Icon(Icons.Filled.Add, null, tint = Color.White)
}
if (viewModel.state.value.patientsList.isEmpty()) {
Text(
text = "No Patients Available",
style = FontLibrary.regularBody16(textAlign = TextAlign.Center)
)
} else {
LazyColumn(
modifier = Modifier
.padding(start = 8.dp, end = 8.dp)
.fillMaxSize()
) {
items(
items = viewModel.state.value.patientsList,
key = { patient ->
patient.id
}
) { patient ->
PatientCard(patient)
Divider(color = appColors.secondary, thickness = 1.dp)
}
}
}
}

Answer 1

在Jetpack中，组合UI组件是按照你放置它们的顺序放置的，所以在box中你首先放置浮动动作按钮，然后是列表。你应该把FAB放在最后，也就是说，把它的代码移到底部。

Answer 2

Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
) {
if (viewModel.state.value.patientsList.isEmpty()) {
Text(
text = "No Patients Available",
style = FontLibrary.regularBody16(textAlign = TextAlign.Center)
)
} else {
LazyColumn(
modifier = Modifier
.padding(start = 8.dp, end = 8.dp)
.fillMaxSize()
) {
items(
items = viewModel.state.value.patientsList,
key = { patient ->
patient.id
}
) { patient ->
PatientCard(patient)
Divider(color = appColors.secondary, thickness = 1.dp)
}
}
}
androidx.compose.material3.FloatingActionButton(
containerColor = appColors.primary,
contentColor = appColors.primary,
shape = CircleShape,
onClick = {},
modifier = Modifier
.align(BottomEnd)
.padding(16.dp),
) {
Icon(Icons.Filled.Add, null, tint = Color.White)
}
}