Jetpack Compose中为Row设置等效于XML中wrap_content的高度

嘿，我发现你的代码里有两个关键问题导致移除固定高度后Row消失，这就来帮你搞定自适应高度的需求：

问题根源 #

1. Button用法错误：Compose的Button第一个参数必须是onClick回调，你直接把文本作为第一个参数，不仅会编译报错，还会让Button没有实际可渲染的内容，高度直接坍缩成0。
2. 垂直分割线无高度约束：你的自定义Divider(whichType = "vertical")没有设置高度，当Row没有固定高度时，它的高度也会是0，进一步导致整个Row的高度被压缩到最小。

解决方案（实现类似XML的wrap_content） #

只需要两步修正，就能让Row自动适应子元素的高度：

1. 修正Button的正确用法 #

把文本内容放到Button的content lambda中，用Text组件包裹，这样Button会根据文本自动计算高度。

2. 让垂直分割线匹配Button高度 #

给分割线添加fillMaxHeight()修饰符，让它自动继承Row的高度（也就是Button的高度），同时设置合适的宽度。

修正后的完整代码 #

Row(
    modifier = Modifier 
        .fillMaxWidth() 
        .padding(horizontal = 5.dp)
    // 移除固定height，Row会自动适配子元素的高度
) { 
    Button( 
        onClick = { /* 在这里添加你的点击事件逻辑 */ },
        modifier = Modifier.weight(1f)
    ) {
        Text(stringResource(id = R.string.ha_topos_button_description))
    }
    
    // 调整自定义分割线的修饰符，匹配Row高度并设置宽度
    Divider(
        whichType = "vertical",
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp) // 可根据需求调整分割线宽度
    )
    
    Button( 
        onClick = { /* 在这里添加你的点击事件逻辑 */ },
        modifier = Modifier.weight(1f)
    ) {
        Text(stringResource(id = R.string.ha_gyms_button))
    }
}

额外说明 #

• 现在Row的高度会完全由内部Button的高度决定，Button的高度又来自于Text的内容，完美实现了类似XML中wrap_content的自适应效果，不需要任何硬编码高度。
• 如果你的自定义Divider组件不支持通过Modifier设置高度，那你需要修改Divider的实现，让它能够接收高度参数或者响应父布局的高度约束。

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