如何在Jetpack Compose中实现按钮屏幕底部居中且适配全尺寸屏幕

我尝试在Jetpack Compose的Column组件中将按钮对齐到屏幕底部居中，但一直未能成功。当前代码在大屏幕上按钮无法居中，小屏幕因尺寸限制看似正常，但之前的方案在小屏幕上按钮会不可见。需要一种能在全尺寸屏幕上都让按钮正确显示在底部居中的方案。

现有代码 #

NutritionHabitsScreen #

@Composable
fun NutritionHabitsRoute(
    navHostController: NavHostController,
    sharedViewModel: SharedViewModel,
    viewModel: NutritionHabitsViewModel = hiltViewModel()
) {

    val state by viewModel.state.collectAsState()

    NutritionHabit(
        navHostController = navHostController,
        sharedViewModel = sharedViewModel,
        state = state,
        buttonEnabled = viewModel::buttonEnabled
    )
}

@Composable
fun NutritionHabit(
    navHostController: NavHostController,
    sharedViewModel: SharedViewModel,
    state: NutritionHabitsScreenState,
    buttonEnabled: (MutableList<Int>, MutableList<Int>) -> Unit
) {


    val firstChoicesItems = sharedViewModel.registerItems?.choices?.get(0)?.items
    val secondChoicesItems = sharedViewModel.registerItems?.choices?.get(1)?.items

    var firstSelectedIndexes = remember { mutableListOf<Int>() }
    var secondSelectedIndexes = remember { mutableListOf<Int>() }

    Scaffold(
        topBar = { BackPopUp(navController = navHostController, route = null) },
        backgroundColor = Color.Transparent
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {

            CustomText(
                padding = 15.dp,
                text = sharedViewModel.registerItems!!.choices[0].title ?: "",
                textStyle = MaterialTheme.typography.h3
            )

            firstChoicesItems?.let {
                it.forEachIndexed { index, element ->
                    CustomButton(
                        selectedIndexes = firstSelectedIndexes,
                        index = index,
                        borderDp = 2.dp,
                        textPadding = 15.dp,
                        topPadding = 5.dp,
                        bottomPadding = 5.dp,
                        startPadding = 15.dp,
                        endPadding = 15.dp,
                        text = firstChoicesItems[index].key ?: "",
                        selectedBorderColor = DefaultDYTColor,
                        unselectedBorderColor = MaterialTheme.colors.grayColor,
                        onSelected = { list ->
                            firstSelectedIndexes = list
                            buttonEnabled(firstSelectedIndexes, secondSelectedIndexes)
                        }
                    )
                }
            }
            
            CustomText(
                padding = 15.dp,
                text = sharedViewModel.registerItems!!.choices[1].title ?: "",
                textStyle = MaterialTheme.typography.h3
            )

            secondChoicesItems?.let {
                it.forEachIndexed { index, items ->
                    CustomButton(
                        selectedIndexes = secondSelectedIndexes,
                        index = index,
                        borderDp = 2.dp,
                        textPadding = 15.dp,
                        topPadding = 5.dp,
                        bottomPadding = 5.dp,
                        startPadding = 15.dp,
                        endPadding = 15.dp,
                        text = secondChoicesItems[index].key ?: "",
                        selectedBorderColor = DefaultDYTColor,
                        unselectedBorderColor = MaterialTheme.colors.grayColor,
                        onSelected = { list ->
                            secondSelectedIndexes = list
                            buttonEnabled(firstSelectedIndexes, secondSelectedIndexes)
                        }
                    )
                }
            }

            DYTLoginAndContinueButton(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                text = stringResource(id = R.string.devam),
                navController = navHostController,
                route = null,
                enabled = state.buttonEnabled
            ) {}
        }
    }
}

自定义按钮DYTLoginAndContinueButton #

@Composable
fun DYTLoginAndContinueButton(
    modifier:Modifier,
    text: String,
    navController: NavController?,
    route: String?,
    enabled: Boolean,
    onClick: () -> Unit
) {

    Button(
        onClick = {
            onClick()
            if(navController != null && route !=null)
                navController.navigate(route)
        },
        modifier = modifier,
        enabled = enabled,
        elevation = ButtonDefaults.elevation(0.dp, 0.dp),
        colors = ButtonDefaults.buttonColors(backgroundColor = DefaultDYTColor),
        shape = RoundedCornerShape(25.dp)
    ) {
        Text(
            modifier = Modifier.padding(8.dp),
            text = text,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.button,
            color = Color.White
        )
    }
}

解决方案 #

核心思路是用Box替代外层Column，让滚动内容占满屏幕空间，按钮固定在底部。同时处理滚动内容和按钮的间距，避免内容被按钮遮挡：

1. 将原来的外层Column替换为Box，并应用Scaffold的innerPadding，避免内容被TopBar遮挡。
2. 滚动内容区用Column包裹，设置verticalScroll，并添加足够的底部内边距（大于按钮高度+内边距），确保滚动到底部时内容不会被按钮挡住。
3. 按钮通过align(Alignment.BottomCenter)固定在屏幕底部，同时保持fillMaxWidth和内边距。

修改后的NutritionHabit函数代码：

@Composable
fun NutritionHabit(
    navHostController: NavHostController,
    sharedViewModel: SharedViewModel,
    state: NutritionHabitsScreenState,
    buttonEnabled: (MutableList<Int>, MutableList<Int>) -> Unit
) {
    val firstChoicesItems = sharedViewModel.registerItems?.choices?.get(0)?.items
    val secondChoicesItems = sharedViewModel.registerItems?.choices?.get(1)?.items

    var firstSelectedIndexes = remember { mutableListOf<Int>() }
    var secondSelectedIndexes = remember { mutableListOf<Int>() }

    Scaffold(
        topBar = { BackPopUp(navController = navHostController, route = null) },
        backgroundColor = Color.Transparent
    ) { innerPadding ->
        // 用Box替代外层Column，实现内容滚动+底部固定按钮
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding) // 应用Scaffold的内边距，避免被TopBar遮挡
        ) {
            // 可滚动的内容区
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState())
                    .padding(bottom = 80.dp) // 底部内边距，确保内容不会被按钮遮挡，值可根据按钮高度调整
            ) {
                CustomText(
                    padding = 15.dp,
                    text = sharedViewModel.registerItems!!.choices[0].title ?: "",
                    textStyle = MaterialTheme.typography.h3
                )

                firstChoicesItems?.let {
                    it.forEachIndexed { index, element ->
                        CustomButton(
                            selectedIndexes = firstSelectedIndexes,
                            index = index,
                            borderDp = 2.dp,
                            textPadding = 15.dp,
                            topPadding = 5.dp,
                            bottomPadding = 5.dp,
                            startPadding = 15.dp,
                            endPadding = 15.dp,
                            text = firstChoicesItems[index].key ?: "",
                            selectedBorderColor = DefaultDYTColor,
                            unselectedBorderColor = MaterialTheme.colors.grayColor,
                            onSelected = { list ->
                                firstSelectedIndexes = list
                                buttonEnabled(firstSelectedIndexes, secondSelectedIndexes)
                            }
                        )
                    }
                }
                
                CustomText(
                    padding = 15.dp,
                    text = sharedViewModel.registerItems!!.choices[1].title ?: "",
                    textStyle = MaterialTheme.typography.h3
                )

                secondChoicesItems?.let {
                    it.forEachIndexed { index, items ->
                        CustomButton(
                            selectedIndexes = secondSelectedIndexes,
                            index = index,
                            borderDp = 2.dp,
                            textPadding = 15.dp,
                            topPadding = 5.dp,
                            bottomPadding = 5.dp,
                            startPadding = 15.dp,
                            endPadding = 15.dp,
                            text = secondChoicesItems[index].key ?: "",
                            selectedBorderColor = DefaultDYTColor,
                            unselectedBorderColor = MaterialTheme.colors.grayColor,
                            onSelected = { list ->
                                secondSelectedIndexes = list
                                buttonEnabled(firstSelectedIndexes, secondSelectedIndexes)
                            }
                        )
                    }
                }
            }

            // 底部居中的按钮
            DYTLoginAndContinueButton(
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter) // 对齐到底部居中
                    .padding(16.dp),
                text = stringResource(id = R.string.devam),
                navController = navHostController,
                route = null,
                enabled = state.buttonEnabled
            ) {}
        }
    }
}

关键修改点说明 #

• Box布局：利用Box的层叠特性，让滚动内容和按钮在同一层级，按钮可以通过align固定位置。
• 内容区底部内边距：设置padding(bottom = 80.dp)，确保当内容滚动到底部时，最后一个选项不会被按钮遮挡，这个值可以根据按钮的实际高度调整。
• 应用Scaffold内边距：将innerPadding应用到Box上，避免内容被TopBar覆盖。

这样修改后，按钮会在所有屏幕尺寸下固定在底部居中，同时内容可以完整滚动查看，不会出现遮挡或按钮不可见的问题。

内容的提问来源于stack exchange，提问作者NewPartizal