Android Jetpack 组合 IconButton 填充

Question

如何删除 IconButton 中的填充？ 我希望我的列中的项目具有相同的开始填充

Column(
    modifier = Modifier
        .fillMaxWidth() 
        .padding(horizontal = 16.dp)
) {
    IconButton(onClick = { }) {
        Icon(asset = Icons.Filled.Search)
    }
    Text("Some text")
} 

Answer 1

在1.0.0 ， IconButton应用了这个修饰符： IconButtonSizeModifier = Modifier.size(48.dp) 。
这是由于可访问性触摸目标并允许正确的最小触摸目标大小。

您可以使用以下内容对其进行修改：

IconButton(modifier = Modifier.
        then(Modifier.size(24.dp)),
    onClick = { }) {
    Icon(
        Icons.Filled.Search,
        "contentDescription",
        tint = Color.White)
}

使用.then以正确的顺序应用size很重要。

Answer 2

用CompositionLocalProvider包装IconButton以覆盖LocalMinimumTouchTargetEnforcement的值，该值强制执行最小触摸目标48.dp 。

CompositionLocalProvider(
    LocalMinimumTouchTargetEnforcement provides false,
) {
    IconButton(onClick = { }) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search",
        )
    }
}

Answer 3

如果您使用IconButton只是为了处理点击侦听器，而不是：

IconButton(onClick = { // Todo -> handle click }) {
    Icon(asset = Icons.Filled.Search)
}

您可以使用：

Icon(
    asset = Icons.Filled.Search,
    modifier = Modifier.clickable { // Todo -> handle click },
)

通过这种方式，您无需删除额外的填充。