按钮与 Jetpack Compose 中的视图重叠

Question

I want to make a button to bottom of screen, but I am seeing overlap with my button. I don't understand why this is happening in my application.

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() }
                }
            }
        }
    }
}

I divided all views into simple function. I am adding simple code in each function.

PairScreenImage

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

PairDeviceDescription

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

PressAndHoldDescription

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

WaitingToPair

@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 
        }
    }
}

UnableToPair

I am adding this function code which is overlap through my view. Can anyone know why TryAgainButtonView view overlap with WarningBoxView() ?

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

        }
    }
}

View overlap look like this

I want TryAgainButtonView to bottom of screen.

My Component tree from Layout inspector

Anyone guide me what I am doing here wrong? Thanks

Answer 1

I believe this is because you are using Column and not correctly fitting everything on the screen. You hide the image and description composables and it is ok but I think you are giving static dp values in these composables. Rather than giving a size with either .width , . height or .size modifiers, use.padding and / or calculate width|height of the composables by using LocalConfiguration.current to properly size the composables. I believe you will see better results.

Additionally, your Column takes space of the whole screen and tries to fit every child on the possible available space. If you are ok with a scrolling screen, use LazyColumn.