如何在Jetpack Compose中使用Box实现指定组件布局？

需求：

• 图片与文字以Column组件垂直居中显示在页面上方区域
• 按钮与文字以Column组件排列在页面底部

当前代码存在的问题 #

1. BottomBar结构错误：使用两个独立Row导致按钮和文字无法形成垂直排列，且内部Text的fillMaxWidth()会让每个文本占满整行，无法在同一行展示。
2. 图文区域对齐偏差：StartScreen中嵌套的Box设置了Alignment.Center，但内部组件又指定Alignment.BottomCenter，导致图文组未真正垂直居中。
3. 未处理Scaffold内边距：忽略了Scaffold自带的innerPadding，可能导致内容被顶部栏遮挡。

修正后的代码 #

1. BottomBar组件

@Composable
fun BottomBar(
    navHostController: NavHostController,
    text: String,
    route: String?,
    enabled: Boolean,
    onClick: () -> Unit
) {
    // 用Column包裹按钮与文字行，实现底部垂直排列
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        DYTLoginAndContinueButton(
            text = text,
            navController = navHostController,
            route = route,
            enabled = enabled
        ) {
            onClick()
        }

        Spacer(modifier = Modifier.height(8.dp))

        // 用Row包裹两个文本，实现同一行展示
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "已有账号？",
                modifier = Modifier
                    .padding(end = 4.dp)
                    .clickable {
                        navHostController.navigate(RegisterScreen.SignInRegisterScreen.route)
                    },
                style = MaterialTheme.typography.h6
            )
            Text(
                text = "登录",
                modifier = Modifier
                    .clickable {
                        navHostController.navigate(RegisterScreen.SignInRegisterScreen.route)
                    },
                style = MaterialTheme.typography.body1,
                color = DefaultDYTColor
            )
        }
    }
}

2. StartScreen组件

@Composable
fun StartScreen2(navHostController: NavHostController) {
    Scaffold(
        topBar = {
            // 顶部栏内容
        },
        bottomBar = {},
        backgroundColor = Color.Transparent
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // 图文区域：用weight(1f)占据剩余空间，实现垂直居中
            VegetableImageAndText(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth(),
                text = "Good Food",
                textStyle = MaterialTheme.typography.subtitle1
            )

            // 底部操作栏：固定在页面底部
            BottomBar(
                navHostController = navHostController,
                text = "Let's start",
                route = null,
                enabled = true,
                onClick = {}
            )
        }
    }
}

3. VegetableImageAndText组件（保持原样）

@Composable
fun VegetableImageAndText(
    modifier:Modifier,
    text:String,
    textStyle: TextStyle
) {
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_vegetable),
            contentDescription = "蔬菜图标")
        Spacer(modifier = Modifier.height(5.dp))
        Text(
            text = text,
            style = textStyle)
    }
}

关键修改说明 #

• BottomBar：用Column统一底部垂直布局，文字行改用Row包裹并移除Text的fillMaxWidth()，确保两个文本在同一行显示。
• StartScreen：移除多余Box嵌套，直接用Column作为根布局；通过weight(1f)让图文区域占据剩余空间，结合组件内部的垂直居中设置实现预期效果；添加Scaffold的innerPadding避免内容被顶部栏遮挡。

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