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

Question

我row有几个图标

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

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

Answer 1

2 个图标之间的空间不是填充，取决于IconButton的默认大小。
这是由于可访问性触摸目标并允许正确的最小触摸目标大小。
您可以更改它以禁用LocalMinimumTouchTargetEnforcement并将Modifier.size(24.dp)应用于IconButton ：

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false)
    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 = {} )
        )
}

Answer 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
*/
}

应该是这个！