Jetpack Compose中Text与LinearProgressIndicator布局对齐问题求助

我尝试将显示百分比的Text放置在LinearProgressIndicator进度条上方，试过多种方法都未成功，可查看下方截图：

以下是我的代码，我曾尝试调整位置但无效，或许需要重新设计布局，恳请Jetpack Compose设计专家提供解决方案：

@Composable
@ExperimentalMaterialApi
fun CoursesItem(
    courses: Courses,
    process: Processes,
    onCourseItemClick: (String) -> Unit,
    id : String,
    viewModel: CoursesViewModel = hiltViewModel()
) {
    Card(
        modifier = Modifier
            .cardCourses()
            .clickable { viewModel.onCourseItemClick(onCourseItemClick, id) },
        elevation = 4.dp
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxSize()
                    .align(Alignment.TopStart) // Đặt cách trên cùng
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    AsyncImage(
                        model = courses.image,
                        contentDescription = null,
                        modifier = Modifier
                            .AsyncImageCardCourses()
                            .background(MaterialTheme.colors.onPrimary)
                    )
                    Spacer(modifier = Modifier.width(16.dp))
                    Column(
                        modifier = Modifier
                            .weight(1f)
                            .fillMaxHeight()
                    ) {
                        Text(
                            text = courses.nameCourses,
                            color = Color.DarkGray,
                            style = MaterialTheme.typography.h6
                        )
                        Spacer(modifier = Modifier.height(4.dp))
                        Text(
                            text = courses.description,
                            color = Color.Gray,
                            style = MaterialTheme.typography.body2
                        )
                        // this is part to fix
                        Row(
                            modifier = Modifier
                                .align(Alignment.CenterHorizontally)
                                .padding(top = 10.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            LinearProgressIndicator(
                                progress = (process.processesLearn.toFloat()),
                                modifier = Modifier.weight(1f)
                            )
                            Text(
                                text = "${(process.processesLearn * 100).toInt()}%",
                                color = Color.Black,
                                style = MaterialTheme.typography.caption,
                                modifier = Modifier.alignByBaseline()
                            )
                        }

                    }
                    IconButton(
                        onClick = { viewModel.onCourseItemClick(onCourseItemClick, id) },
                        modifier = Modifier.size(24.dp)
                    ) {
                        Icon(
                            imageVector = Icons.Default.ArrowForward,
                            contentDescription = null,
                            tint = Color.Gray
                        )
                    }
                }
            }
            Spacer(modifier = Modifier.height(8.dp))
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter) // Đặt ở dưới cùng
            ) {

            }
        }
    }
}

问题出在你用Row包裹进度条和文本导致横向排列，改成Column即可实现垂直布局，调整后的关键代码如下：

// 修改后的进度条与文本布局部分
Column(
    modifier = Modifier
        .align(Alignment.CenterHorizontally)
        .padding(top = 10.dp),
    horizontalAlignment = Alignment.End // 百分比文本靠右对齐，可改为CenterHorizontally实现居中
) {
    Text(
        text = "${(process.processesLearn * 100).toInt()}%",
        color = Color.Black,
        style = MaterialTheme.typography.caption,
        modifier = Modifier.padding(bottom = 4.dp) // 文本与进度条之间添加间距
    )
    LinearProgressIndicator(
        progress = (process.processesLearn.toFloat()),
        modifier = Modifier.fillMaxWidth() // 进度条占满可用宽度
    )
}

核心调整说明： #

• 将外层容器从Row改为Column，实现文本在上、进度条在下的垂直排列
• 给文本添加底部内边距，避免和进度条紧贴
• 进度条使用fillMaxWidth()替代weight(1f)，确保在垂直布局中占满宽度
• 通过horizontalAlignment控制百分比文本的对齐方向，按需选择靠右或居中

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