kotlin 我需要修改moddifier的什么属性来使角变圆,宽度变小一点?jetpack Compose

v09wglhw  于 2022-11-30  发布在  Kotlin
关注(0)|答案(1)|浏览(127)

我的问题与建议的问题不同,建议的问题与我的问题类似,因为我使投票栏根据投票百分比的参数而变化。因此,我需要左列的大小动态变化,右列的大小动态变化,因此,我发现很难用Stroke对象实现。
要使角变圆,需要修改的修饰符的属性是什么?Row()元素的宽度要小一点
我正在尝试用jetpack编写一个android应用程序,在实现投票栏的过程中,投票栏是中间的红色和蓝色两种颜色的栏。我找不到正确的属性来修改,所以栏的角落将被圆角,使宽度不同于修改器中的.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个步骤教程,但我仍然是一个初学者。

gkn4icbw

gkn4icbw1#

您可以应用padding修饰符(以避免全宽)和horizontalAlignment将2个Row Package 在Column中。
然后在第一个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

}

相关问题