如何在Jetpack Compose中组合两个Box组件实现目标侧边UI

我想要实现如下UI组件：

我将任务拆分为曲线凸起和矩形两个部分，各自的实现代码及效果如下：

曲线凸起组件代码 #

@Composable
fun TriangularCurve() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .rotate(-90f),
        contentAlignment = Alignment.Center
    ) {
        val curvePath = createGaussianPath(0.5f, 0.65f, 0.44f)
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(onboardingSideBarColour, shape = curvePath),
            contentAlignment = Alignment.Center
        ) {
            ConcentricCircles(
                innerRadius = 39.dp,
                outerRadius = 44.dp,
                innerColor = onboardingSideBarColour,
                outerColor = Color.White
            )
            Icon(
                painter = painterResource(id = R.drawable.arrowdouble),
                contentDescription = stringResource(id = R.string.arrow_icon_description),
                tint = Color.White,
                modifier = Modifier
                    .size(50.dp)
                    .rotate(270f)
            )
        }
    }
}

效果：

矩形组件代码 #

@Composable
fun Rectangle() {
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .width(20.dp)
            .background(onboardingSideBarColour) // Background color for the rectangle
    )
}

效果：

请问如何将这两个组件并排组合成目标样式？

要组合出目标样式，核心是调整布局结构和TriangularCurve的尺寸约束，具体实现如下：

1. 修正曲线凸起组件的尺寸 #

原代码中fillMaxSize()会让组件占满父布局，需要改为固定尺寸以匹配矩形的高度，避免布局错位：

@Composable
fun TriangularCurve() {
    Box(
        modifier = Modifier
            .size(60.dp) // 调整为适配矩形的凸起尺寸
            .rotate(-90f),
        contentAlignment = Alignment.Center
    ) {
        val curvePath = createGaussianPath(0.5f, 0.65f, 0.44f)
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(onboardingSideBarColour, shape = curvePath),
            contentAlignment = Alignment.Center
        ) {
            ConcentricCircles(
                innerRadius = 39.dp,
                outerRadius = 44.dp,
                innerColor = onboardingSideBarColour,
                outerColor = Color.White
            )
            Icon(
                painter = painterResource(id = R.drawable.arrowdouble),
                contentDescription = stringResource(id = R.string.arrow_icon_description),
                tint = Color.White,
                modifier = Modifier
                    .size(50.dp)
                    .rotate(270f)
            )
        }
    }
}

2. 用Row布局横向组合组件 #

通过Row容器将两个组件并排，同时保证垂直方向对齐：

@Composable
fun TargetSidebarComponent() {
    Row(
        verticalAlignment = Alignment.CenterVertically, // 让凸起与矩形垂直居中对齐
        modifier = Modifier.fillMaxHeight()
    ) {
        // 曲线凸起组件
        TriangularCurve()
        // 矩形组件，占满剩余高度
        Rectangle()
    }
}

3. 细节微调 #

• 若需要凸起在矩形右侧，只需调换TriangularCurve和Rectangle在Row中的顺序；
• 确保onboardingSideBarColour颜色统一，避免视觉断层；
• 可根据实际需求调整TriangularCurve的size参数，优化凸起与矩形的匹配度。

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