我的问题与建议的问题不同,建议的问题与我的问题类似,因为我使投票栏根据投票百分比的参数而变化。因此,我需要左列的大小动态变化,右列的大小动态变化,因此,我发现很难用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个步骤教程,但我仍然是一个初学者。
1条答案
按热度按时间gkn4icbw1#
您可以应用
padding
修饰符(以避免全宽)和horizontalAlignment将2个Row
Package 在Column
中。然后在第一个
Row
中应用clip
修改器以实现圆角形状。类似于: