jetpack compose 使用总结

最近在学习开发 app，了解传统的 view 方式开发，上手操作甚是麻烦，使用 xml 拼凑 UI 的方式着实让人恼火，好几次差点半途而废。于是我开始了解其他开发 app 的方式，首先了解了一个低代码平台—— YonBuilder，看介绍时确实让我眼前一亮，开发一套代码，即可生成安卓，IOS，小程序等多个平台，这样的话，一个人管理维护起来会方便不少，然而我想象中的低代码是拖拽即可，实际中是需要用到 H5，CSS或者他们自己开发的一种 DSL。本人不想因为要开发一款 app 而要先去学习一下前端的相关知识，所以这个 pass 掉了。而后我又了解了 react native。RN最近是很火的，说实话我差点就选择这个技术了（当然我没选择这项技术并不是说它不好），但是额外学习 react 语法的成本又把我劝退了。就在我迷茫之际，安卓亲儿子 jetpack compose 悄悄出现了。它使用声明式 UI ，开发语言为 kotlin（其实我也不太了解 kotlin，但是有 java 基础，学习这个还是蛮快的）。遂记录一下我这几天研究 jetpack compose 的一点小心得。

TextField

这是一个输入框组件，类似与传统开发中的 EditView。在开发 app 时我有一个需求：保证用户输入的是数字。最开始我对这个组件并不熟悉，只能代码中对用户输入的内容做正则校验，如果不是数字就弹出警告。后来我发现这个组件可以对键盘做限制。

OutlinedTextField(
            ...
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            ...
        )

即上述代码中的 keyboardOptions 属性，不但可以限制输入数字，还可以限制输入Phone、Uri、Email等

TextField 组件是通过监控变量状态来刷新组件的。所以在显示用户新输入的内容时可以这么写。

@Composable
fun AmountBar() {
    var amount by remember {
        mutableStateOf("")
    }

    var isErr by remember {
        mutableStateOf(false)
    }
    OutlinedTextField(
        value = amount,
        onValueChange = {
            amount = it
            isErr = !(amount.matches(Regex("\\d+(\\.\\d{1,2})?")) || amount == "")
        },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        isError = isErr,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.Blue,
            unfocusedBorderColor = Color.Gray,
            errorBorderColor = Color.Red
        )
    )
}

另外请注意 colors 属性，里面可以设置内容错误时边框颜色，聚焦时边框颜色，失去焦点时边框颜色。