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

應該是這個！