如何在 Jetpack Compose 中删除 RadioButton 的填充？

Question

我的 Jetpack Compose 应用程序中的 RadioButton 组件出现问题。我有一些带有文本的单选按钮，默认情况下有很多填充。我可以删除此填充或设置自定义填充以避免每个填充之间存在大量空间吗？

目前我有这个：

我的代码是：

Column {
    MyEnum.values().filter { rb -> rb.visible }.forEach { rb ->
        Row(
            Modifier
                .fillMaxWidth()
                .padding(horizontal = 0.dp, vertical = 0.dp)
                .clickable(
                    interactionSource = interactionSource,
                    indication = null
                ) {
                    TODO()
                },
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = (rb.position == selectedOption),
                onClick = {
                    TODO()
                },
                colors = RadioButtonDefaults.colors(
                    selectedColor = DialogOutlinedTextFocus,
                    unselectedColor = DialogOutlinedTextUnfocus
                )
            )
    
            Text(
                text = stringResource(id = rb.idText),
                color = Color.Black,
                fontSize = 14.sp,
                modifier = Modifier
                    .padding(horizontal = 3.dp, vertical = 2.dp)
            )
        }
    }
}

我尝试使用 contentPadding，但 RadioButton 组件中不存在此属性。

Answer 1

源代码RadioButton.kt在第 108 行设置填充修饰符。使用修饰符时，顺序很重要。即使您提供自己的填充修饰符，它也会被第 108 行覆盖。

大小值硬编码在文件底部。

如果您确实想“减少填充”，请应用size修改器。我使用它20.dp是因为它等于radioButtonSizeinRadioButton.kt所以按钮不会被剪切。这应该适合您的目的，因为整行都是可单击的。

RadioButton(
    modifier = Modifier.size(20.dp),
    selected = selected,
    onClick = { TODO() },
)

尽管如此，从长远来看，制作您可以控制的自定义组件可能会更好。幸运的是，源代码已经可用。只需复制、粘贴并根据您的需要进行调整即可。