Jetpack Compose的Modifier增加逻辑判断以及Kotlin的三元表达式

先从三元表达式讲起吧。

在一般的编程语言中，都会有对三元表达式的支持，三元表达式的语法一般是这样的

condition ? a : b

如果condition表达式条件成立，则返回a，否则返回b。

如php中运用三元表达式

$result = $data ? "123" : "456";
// 如果$data为真，则将123赋值给$result，否则将456赋值给$result。

在Jetpack Compose的Modifier或者SwiftUI的修饰器中，常常会有这样的需求，根据条件不同，动态判断修饰符的值。

假设有这一个场景，在文章详情页面，有一个文本，用来显示当前的作者，需求是，当作者是vip时，这个文本下边距为20，否则下边距为10。

在Swift中，实现起来非常简单：

Text("马大哈").padding(.bottom, author.isVip == true ? 10 : 0)

上面这里就用到了Swift的三元表达式，和php的语法用起来是一样的，非常方便。

当想将上面功能用Jetpack Compose实现时，Modifier是这样的

Text(
    text = "马大哈",
    modifier = Modifier
        .padding(bottom = 10.dp)
)

经过尝试后发现，在这里不能写表达式，所以只能退而求其次，我们先定义一个变量

val paddingBottom = if (author.isVip == true) 20 else 10

Text(
    text = "马大哈",
    modifier = Modifier
        .padding(bottom = paddingBottom.dp)
)

这样就解决了我们的问题。

然后没多久，在研究Button和Checkbox大小的时候，跟踪Checkbox的源码，又发现了这样一个定义

@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) {
    val toggleableModifier =
        if (onClick != null) {
            Modifier.triStateToggleable(
                state = state,
                onClick = onClick,
                enabled = enabled,
                role = Role.Checkbox,
                interactionSource = interactionSource,
                indication = rememberRipple(
                    bounded = false,
                    radius = CheckboxTokens.StateLayerSize / 2
                )
            )
        } else {
            Modifier
        }
    CheckboxImpl(
        enabled = enabled,
        value = state,
        modifier = modifier
            .then(
                if (onClick != null) {
                    Modifier.minimumTouchTargetSize()
                } else {
                    Modifier
                }
            )
            .then(toggleableModifier)
            .padding(CheckboxDefaultPadding),
        colors = colors
    )
}

这段源码提供了一个思路，可以使用then方法，在then方法里面增加判断，所以上面的代码可以再改一下，使用then来进行处理：

Text(
    text = "马大哈",
    modifier = Modifier
        .then(
            if (author.isVip == true) {
                Modifier.padding(bottom = 20.dp)
            } else {
                Modifier.padding(bottom = 10.dp)
            }
        )
)

最后小结一下，Kotlin中貌似没有三元表达式，当需要使用三元表达式的时候，使用if else 替代即可。