減小jetpack compose中圖標的大小以匹配行高

Question

我有以下可組合的。

@Composable
fun Temp() {
    Row(
        modifier = Modifier
            .background(Color.Red)
            .height(IntrinsicSize.Min)
            .fillMaxWidth()
    ) {
        Text(text = "Hello", fontSize = 10.sp)
        Icon(
            imageVector = Icons.Default.Star,
            contentDescription = "Star",
            modifier = Modifier.fillMaxHeight()
        )
    }
}

圖標的高度沒有從 24.dp 減少。 有什么辦法可以實現這種行為。 我希望圖標大小只是父行的高度。 如果文字很大。 圖標大小增加。 我認為它的圖標最小尺寸必須為 24.dp。 如何讓圖標變小？

Answer 1

您的代碼實際上按預期工作 - 這就是內在計算的工作方式。

Compose 檢查每個視圖的最小高度並選擇這些值的最大值。 在您的情況下，圖像的最小高度與圖像的固有大小有關，在Icons.Default的情況下您無法控制。

一個可能的解決方案是使用Modifier.layout 。 當 Compose 計算固有高度時，高度約束將是無限的，在這種情況下，您可以將其布局為零尺寸視圖，以便您的文本最高。 確定固有高度后，您可以測量和定位圖標：

Row(
    modifier = Modifier
        .background(Color.Red)
        .height(IntrinsicSize.Min)
        .fillMaxWidth()
) {
    Text(text = "Hello", fontSize = 10.sp)
    Icon(
        imageVector = Icons.Default.Star,
        contentDescription = null,
        modifier = Modifier
            .layout { measurable, constraints ->
                if (constraints.maxHeight == Constraints.Infinity) {
                    layout(0, 0) {}
                } else {
                    val placeable = measurable.measure(constraints)
                    layout(placeable.width, placeable.height) {
                        placeable.place(0, 0)
                    }
                }
            }
    )
}

使用Modifier.layout您可以更改視圖的大小及其位置。 通常你會這樣使用它：

1. 第一個參數， measurable是一個對象，您可以在其上調用帶有constraints的measure - 第二個layout參數。 measure將計算您的視圖將采用的大小，並計算constraints 。
2. 在layout中，您需要傳遞所需的視圖大小 - 通常可以從上一步的placeable中獲取。
3. 在layout內部，您需要在具有所需偏移量的placeable上調用place 。

隨着height(IntrinsicSize.Min) layout內容被多次調用：

1. 在第一次調用期間，最大高度約束等於Infinity ，因此內在計算可以選擇正確的尺寸而忽略父尺寸。
2. 在最后一次調用中，最大高度約束等於計算出的父級固有高度。

在我第一次調用的代碼中，當高度約束等於Infinity時，我說這個視圖的大小為零，所以它不計入內在測量中。 定義固有高度后，我可以使用最終約束對其進行布局。