Android Compose 中基於特定條件的鏈式修飾符

Question

我想以這樣的方式應用修飾符，如果提供了寬度，它應該使用提供的寬度，否則使用可用的最大寬度。

我以以下方式應用修改器，但結果不如預期。 視圖寬度變得混亂。 在這里請求指導。

val myModifier = Modifier.padding(
    start = 4.dp, end = 4.dp, top = 8.dp, bottom = 8.dp
)

if (viewWidth == null)
    myModifier.then(Modifier.fillParentMaxWidth(1f))
else
    myModifier.then(Modifier.width(viewWidth))

myModifier.then(
    Modifier.height(viewHeight ?: 100.dp)
        .clickable(onClick = { listener.onItemClick(item) })
)

Answer 1

Modifier有一個then function 將當前修飾符與另一個修飾符連接起來。 這then function 返回一個您沒有使用過的新修飾符。 您必須使用返回的修飾符重新初始化myModifier變量。

檢查以下代碼：

var myModifier = Modifier.padding(
    start = 4.dp, end = 4.dp, top = 8.dp, bottom = 8.dp
)

if (viewWidth == null)
  myModifier = myModifier.then(Modifier.fillParentMaxWidth(1f))
else
  myModifier = myModifier.then(Modifier.width(viewWidth))

myModifier = myModifier.then(
  Modifier
    .height(viewHeight ?: 100.dp)
    .clickable(onClick = { listener.onItemClick(item) })
)

Answer 2

您可以通過擴展 function 創建條件修飾符：

fun Modifier.conditional(condition : Boolean, modifier : Modifier.() -> Modifier) : Modifier {
    return if (condition) {
        modifier.invoke(this)
    } else {
        this
    }
}

這使您可以在conditional塊中鏈接修飾符，如下所示：

val applySpecialBackground : Boolean = [...]
Column(
    modifier = Modifier
        .fillMaxWidth()
        .conditional(applySpecialBackground) {
            background(Color.Red)
        }
        .padding(16.dp)

) { [...] }

它只會在條件為true時應用條件修飾符。

Answer 3

您還可以使用Modifier.then以更緊湊的方式：

val modifier = Modifier
            .padding(start = 4.dp, end = 4.dp, top = 8.dp, bottom = 8.dp)
            .then(if(viewWidth == null) Modifier.fillMaxWidth(1f) else Modifier.width(viewWidth))
            .height(viewHeight ?: 100.dp)
            .clickable(onClick = { listener.onItemClick(item) })

參見： https://jetc.dev/slack/2020-12-13-conditional-modifiers.html

Answer 4

以上所有答案都足夠好，但我想加一分錢。 我發現這個片段更具可讀性和簡潔性。

   ClickableText(
                modifier = Modifier
                    .let {
                        if (selectedPosition == index) {
                            return@let it
                                .background(
                                    Green200,
                                    shape = RoundedCornerShape(12.dp)
                                )

                        }
                        it
                    }
                    .padding(horizontal = 12.dp, vertical = 4.dp),
                text = AnnotatedString(categories[index]),
                style = TextStyle(
                    fontSize = 14.sp,
                    textAlign = TextAlign.Center
                ),
                onClick = {
                    selectedPosition = index
                }
            )