JetPack Compose - 从视图中删除额外的填充答案

【问题标题】：JetPack Compose - remove extra padding from viewJetPack Compose - 从视图中删除额外的填充
【发布时间】：2021-09-10 15:56:56
【问题描述】：

我在row 中有几个图标

    Row {
    IconButton {
        Icon(
            painter = painterResource(R.drawable.im1)
        )
    },
    IconButton {
        Icon(
            painter = painterResource(R.drawable.im2)
        )
    }
}

但是当它显示时，row 中两个图标之间的距离比我预期的要大。我觉得它们之间有 32dp 的间隔。如何减少 row 内 2 个图标之间的距离？

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

两个图标之间的空间不是填充，它取决于IconButton 的默认大小。
这是由于可访问性触摸目标并允许正确的最小触摸目标大小。

您可以将Modifier.size(24.dp) 应用到IconButton 来更改它，但单击该图标会出现与另一个图标重叠的波纹。

Row {
    IconButton(modifier = Modifier.size(24.dp),
        onClick = {}) {
        Icon(
            painter = painterResource(R.drawable.ic_add_24px),""
        )
    }
    IconButton(modifier = Modifier.size(24.dp),
        onClick = {}) {
        Icon(
            painter = painterResource(R.drawable.ic_add_24px),""
        )
    }
}

您还可以将Icon 与Modifier.clickable 一起使用：

Row {
    Icon(
            painter = painterResource(R.drawable.ic_add_24px),"",
        modifier = Modifier.clickable (onClick = {} )
        )
    Icon(
            painter = painterResource(R.drawable.ic_add_24px),"",
        modifier = Modifier.clickable (onClick = {} )
        )
}

【讨论】：

Modifier.then(Modifier.size(24.dp) 工作。谢谢！
@Rainmaker Modifier.then(Modifier.size(24.dp)) 完全没有意义。完全等同于Modifier.size(24.dp)，试试看

【解决方案2】：

如果您希望控制精确的距离，可以实现Layout，让您完全控制偏移（是的，您也可以只使用偏移修改器，但我发现这更有希望。

Layout(
 content = {
  IconButton {
        Icon(
            painter = painterResource(R.drawable.im1)
        )
    },
    IconButton {
        Icon(
            painter = painterResource(R.drawable.im2)
        )
    }
 }
){ measurables, constraints ->
 val icon1 = measurables[0].measure(constraints)
 val icon2 = measurables[1].measure(constraints)
 
 layout(constraints.maxWidth, constraints.maxHeight){ //Change these to suit your requirements
 //Use place(x, y) to specify exact co-ordinates within the container
 icon1.place(0, 0)
 icon2.place(icon1.width, 0) //Places Directly where icon1 ends

/*If padding still appears, you can subtract some function from the second icon's starting point to make it even closer than the edge of iicon1
*/
}

应该就是这个了！

【讨论】：