kotlin - 修改器的属性是什么，我需要更改以使角变圆且宽度更小？喷气背包组合

Question

我的问题与建议的问题不同，因为我是根据投票百分比的参数使投票条生效。因此我需要左列的大小动态变化，右列的大小动态变化，因此我发现很难用 Stroke 对象实现。

要使角变圆，我需要更改修改器的属性是什么？并且宽度比 Row() 元素小一些

我正在尝试使用 Jetpack Compose 制作一个安卓应用，在实现投票栏的过程中，中间的栏有红色和蓝色两种颜色。我找不到要修改的正确属性，因此条形的角将变圆并使宽度不同于修饰符中的 .fillMaxWidth() 所以我最终使用它直到找到解决方案。如果您有任何见解 :) 提前致谢 ~!

Figma 设计

android中的实现

我的代码

@Composable
fun VotingBar(
    modifier: Modifier = Modifier, leftyPercent: Int, rightyPercent: Int
) {
    var leftyPercentWeight: Float = (leftyPercent / 10).toFloat()
    var rightyPercentWeight: Float = (rightyPercent / 10).toFloat()
    Row(
        modifier = modifier
            .fillMaxWidth()
            .height(50.dp)
            .background(Color.White)
            .border(1.dp, Color.Black, CircleShape)
    ) {
        Column(
            // add rounded corners to the left side
            modifier = Modifier
                .background(Color(0xFFA60321))
                .height(50.dp)
                .weight(leftyPercentWeight)
                .clip(CircleShape),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally

        ) {

        }
        Column(
            modifier = Modifier
                .background(Color(0xFF03588C))
                .height(50.dp)
                .weight(rightyPercentWeight)
                .clip(CircleShape),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
            // add rounded corners to the right side
        ) {}
    }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .background(Color.White),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Row {
            Box(
                modifier = Modifier
                    .size(30.dp)
                    .clip(CircleShape)
                    .background(Color(0xFFA60321))
            )
            Spacer(modifier = Modifier.width(10.dp))
            Text(
                text = "Right $rightyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
            )
        }

        Row() {
            Box(
                modifier = Modifier
                    .size(30.dp)
                    .clip(CircleShape)
                    .background(Color(0xFF03588C))
            )
            Spacer(modifier = Modifier.width(10.dp))
            Text(
                text = "Left $leftyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
            )
        }


    }

}

我遵循了领先开发者网站上的 5 个步骤教程，但我仍然是一个初学者。

Answer 1

您可以将第 2 个 Row 包裹在 Column 中，应用 padding 修饰符(以避免全宽)和 horizo​​ntalAlignment。
然后在第一行 Row 中应用 clip 修饰符来实现圆形。

类似于:

val shape = RoundedCornerShape(32.dp)

Column(
    Modifier.padding(16.dp),
    horizontalAlignment= Alignment.CenterHorizontally
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .height(32.dp)
            .background(Color.White)
            .clip(shape)
            .border(1.dp, Color.Black, shape)
    ) {
        Column(
            // add rounded corners to the left side
            modifier = Modifier
                .background(Color(0xFFA60321))
                .weight(leftyPercentWeight)
                .clip(CircleShape),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally

        ) {

        }
        Column(
            modifier = Modifier
                .background(Color(0xFF03588C))
                .weight(rightyPercentWeight)
                .clip(CircleShape),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
            // add rounded corners to the right side
        ) {}
    } 
    //2nd Row

}