Jetpack Compose自定义SelectableListItem组件单选按钮跨设备显示异常问题

这种跨设备的UI不一致问题在Jetpack Compose开发里确实挺头疼的，尤其是涉及到图标尺寸和布局约束的时候，我来帮你梳理几个可能的原因和对应的解决办法：

1. 单选按钮尺寸未明确约束，依赖系统默认值 #

不同Android设备的系统默认图标尺寸、密度适配逻辑可能存在差异，如果你没有给单选按钮指定明确的尺寸，就容易出现有的设备显示过小甚至消失的情况。

解决办法：
直接给单选按钮组件设置固定的dp尺寸，避免依赖系统默认值。比如使用Compose Material库的RadioButton时，通过Modifier.size()强制指定大小：

RadioButton(
    selected = isSelected,
    onClick = onClick,
    modifier = Modifier.size(24.dp) // 用dp单位保证跨设备尺寸一致
)

2. 布局约束冲突导致单选按钮被挤压 #

如果你的SelectionListItem内部用了Row布局，标题/副标题的文本可能因为长度过长，挤压了单选按钮的空间，尤其是在屏幕宽度较小的设备上，第二个条目可能因为文本内容更多，导致单选按钮被完全挤掉。

解决办法：
给单选按钮的容器设置最小尺寸约束，同时让文本区域占据剩余空间，避免挤压单选按钮：

Row(
    modifier = Modifier.fillMaxWidth().clickable(onClick = onClick).padding(16.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    // 用requiredSize保证单选按钮的空间不会被压缩
    Box(modifier = Modifier.requiredSize(24.dp)) {
        RadioButton(selected = isSelected, onClick = onClick)
    }
    Spacer(modifier = Modifier.width(16.dp))
    // 给文本区域设置weight，让它占据剩余空间
    Column(modifier = Modifier.weight(1f)) {
        Text(text = title, style = MaterialTheme.typography.titleMedium)
        Text(text = subTitle, style = MaterialTheme.typography.bodySmall, color = Color.Gray)
    }
}

3. 状态更新不及时导致UI未正确重组 #

如果你的onItemSelected不是用mutableStateOf定义的，Compose无法感知状态变化，会导致部分条目的选中状态没有正确更新，进而出现单选按钮显示异常的情况。

解决办法：
确保onItemSelected是可观察的状态变量：

// 在父组件中定义状态
val onItemSelected = remember { 
    mutableStateOf(valuePoll.first()) 
}

// 点击更新状态
onClick = {
    onItemSelected.value = saveCustomerRequest
}

4. 自定义图标未做密度适配 #

如果你是用自定义的单选图标（而非Material的RadioButton），要确保图标资源已经针对不同密度的设备（mdpi/hdpi/xhdpi等）提供了对应尺寸的资源，否则在高密度设备上图标会显示过小，低密度设备上可能过大。

解决办法：
优先使用Compose Material库提供的RadioButton组件，它已经做好了跨设备的适配；如果必须用自定义图标，确保在res/drawable-xxxhdpi等目录下都放置对应尺寸的图标文件。

另外，建议你在不同密度的真机上测试，比如覆盖hdpi、xhdpi、xxhdpi等常见密度，确保UI在各种设备上都能正常显示。

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