Android Jetpack 组合 IconButton 填充答案

【问题标题】：Android Jetpack compose IconButton paddingAndroid Jetpack 组合 IconButton 填充
【发布时间】：2020-10-06 09:14:20
【问题描述】：

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

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

【问题讨论】：

标签： android android-button android-jetpack-compose

【解决方案1】：

对于1.0.x，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。

【讨论】：

如果我想要触摸目标的宽度和高度来包裹内容怎么办？我试过 Modifier.then(Modifier.wrapContentSize() 但这不起作用

【解决方案2】：

用CompositionLocalProvider 包裹IconButton 以覆盖LocalMinimumTouchTargetEnforcement 的值，从而强制最小触摸目标为48.dp。

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

【讨论】：