Jetpack Compose中修改Row的Modifier实现圆角与自定义宽度？

要实现带圆角的非全屏动态投票栏，你需要调整Modifier的宽度约束、圆角裁剪和布局分配这几个核心属性，以下是具体方案和代码调整：

核心Modifier修改点 #

• 非全屏宽度设置：
  把原来的fillMaxWidth()替换成fillMaxWidth(0.8f)（占屏幕宽度80%）或者width(320.dp)（固定宽度），直接作用在最外层的Row容器上，避免全屏显示。

• 圆角效果实现：
  在最外层Row添加clip(RoundedCornerShape(12.dp))，这里的圆角半径按你的设计图调整。别用Stroke，Stroke是描边，而clip是裁剪容器内的所有内容，让整个投票栏的四个角呈现圆角效果，符合你要的填充式圆角。

• 动态宽度分配：
  放弃子元素的fillMaxWidth()，改用weight()按百分比分配空间：

  • 左列用weight(votePercent)（votePercent是0~1的浮点数，比如30%就是0.3）
  • 右列用weight(1 - votePercent)
    这种方式不需要手动计算宽度，Compose会自动按比例分配Row的可用空间。

完整实现代码 #

@Composable
fun VoteBar(votePercent: Float) {
    // 非全屏宽度：占屏幕80%，可替换为固定dp如width(320.dp)
    Row(
        modifier = Modifier
            .fillMaxWidth(0.8f)
            .height(24.dp) // 投票栏高度，按设计图调整
            .clip(RoundedCornerShape(12.dp)) // 圆角半径，按设计图调整
    ) {
        // 左列：投票占比区域
        Box(
            modifier = Modifier
                .weight(votePercent.coerceIn(0f, 1f)) // 限制百分比在0~1之间
                .background(Color(0xFF2196F3)) // 替换为设计图中的左列颜色
        )
        // 右列：剩余区域
        Box(
            modifier = Modifier
                .weight((1 - votePercent).coerceIn(0f, 1f))
                .background(Color(0xFFE0E0E0)) // 替换为设计图中的右列颜色
        )
    }
}

// 使用示例：展示35%的投票占比
@Composable
fun VoteScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        VoteBar(votePercent = 0.35f)
    }
}

特殊场景调整 #

如果你的设计要求左列仅显示左圆角、右列仅显示右圆角（而非整体圆角），可以去掉外层Row的clip，给左右列分别设置裁剪：

// 左列修改
Box(
    modifier = Modifier
        .weight(votePercent.coerceIn(0f, 1f))
        .clip(RoundedCornerShape(topStart = 12.dp, bottomStart = 12.dp))
        .background(Color(0xFF2196F3))
)
// 右列修改
Box(
    modifier = Modifier
        .weight((1 - votePercent).coerceIn(0f, 1f))
        .clip(RoundedCornerShape(topEnd = 12.dp, bottomEnd = 12.dp))
        .background(Color(0xFFE0E0E0))
)

设计图与效果对应 #

设计图：[投票栏设计图]
当前效果截图：[当前实现效果]

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