按钮与 Jetpack Compose 中的视图重叠

Question

我想在屏幕底部制作一个按钮，但我看到与我的按钮重叠。 我不明白为什么在我的应用程序中会发生这种情况。

PairContentStateLess

@Composable
fun PairContentStateLess(
    viewModel: XyzViewModel,
    scanning: State<Boolean>,
    onResume: () -> Unit,
    onPause: () -> Unit,
    tryAgainAction: () -> Unit,
    openSettingAction: () -> Unit,
    onResumeScan: () -> Unit,
    onPauseScan: () -> Unit,
) {
    AnimatedVisibility(visible = true) {
        AppBarScaffold() {
            Column(
                modifier = Modifier
                    .padding(10.dp)
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState()),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = if (viewModel.isBluetoothEnabled) {
                    Arrangement.Top
                } else {
                    Arrangement.SpaceBetween
                }
            ) {
                DisposeOnLifecycleManager(
                    onCreate = {
                        onResumeScan()
                    },
                    onResume = {
                        onResume()
                    },
                    onPause = {
                        onPause()
                        onPauseScan()
                    }
                )
                PairScreenImage()
                PairDeviceDescription()
                if (viewModel.isBluetoothEnabled) {
                    PressAndHoldDescription()
                    WaitingToPair(scanning.value)
                    UnableToPair(scanning.value)
                } else {
                    BluetoothTurnOnWarning()
                    Spacer(modifier = Modifier.weight(1f))
                    TryAgainButtonView { tryAgainAction() }
                    OpenDeviceSettingsButtonView { openSettingAction() }
                }
            }
        }
    }
}

我将所有视图划分为简单的 function。我在每个 function 中添加简单代码。

配对屏幕图像

@Composable
fun PairScreenImage() {
    // image only
}

配对设备描述

@Composable
fun PairDeviceDescription() {
    // text only
}

长按说明

@Composable
fun PressAndHoldDescription() {
   // text only
}

等待配对

@Composable
fun ColumnScope.WaitingToPair(scanning: Boolean) {
    Spacer(modifier = Modifier.height(10.dp))
    AnimatedVisibility(scanning) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(OffWhite),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
           // more items here 
        }
    }
}

无法配对

我正在添加这个 function 代码，它在我看来是重叠的。 谁能知道为什么TryAgainButtonView视图与WarningBoxView()重叠？

@Composable
fun ColumnScope.UnableToPair(scanning: Boolean) {
    AnimatedVisibility(!scanning) {
        WarningBoxView()
        TryAgainButtonView {

        }
    }
}

查看重叠看起来像这样

我想要TryAgainButtonView到屏幕底部。

布局检查器中的我的组件树

有人指导我在这里做错了什么吗？ 谢谢

Answer 1

我相信这是因为您使用的是 Column 而不是正确地适合屏幕上的所有内容。 您隐藏了图像和描述可组合项，这没问题，但我认为您在这些可组合项中提供了 static dp 值。 而不是给一个尺寸.width ， . height或.size修饰符，使用 .padding 和/或通过使用LocalConfiguration.current来计算可组合项的宽度|高度以正确调整可组合项的大小。 我相信你会看到更好的结果。

此外，您的 Column 会占据整个屏幕的空间，并尝试让每个孩子都适应可能的可用空间。 如果您对滚动屏幕没问题，请使用 LazyColumn。