你的体重健康吗？用Jetpack做一个BMI应用测试一下吧！

早上发现几年前做的一个BMI显示盘有些问题，一想到Jetpack Compose Desktop做这个效果也不错，虽然不可能用这个去代替网页上的系统，但感觉效果肯定也是不错的，值得尝试一下。

Jetpack Compose Desktop依赖部分就不说了，可以参考前文用Jetpack Compose Desktop极简配置做一个Windows桌面时间显示器和用Jetpack Compose Desktop做一个推箱子小游戏，还是默认的依赖，其实也就是一个compose.desktop.currentOs。

基本布局

然后首先还是修订下基本窗口，做个竖着的矩形：

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        state = rememberWindowState(
            size = DpSize(300.dp, 500.dp),
            position = WindowPosition.Aligned(Alignment.Center)
        ),
        title = "BMI指数"
    ) {
        app()
    }
}

然后在app()里画上主体部分，也就是一个居中的Box，里面用Colunm来排列两个TextField分别接受身高和体重：

@Composable
@Preview
fun app() {
    MaterialTheme {
        Box(
            modifier = Modifier.padding(20.dp).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column {
                TextField(value = "", onValueChange = {}, label = { Text("身高") })
                TextField(value = "", onValueChange = {}, label = { Text("体重") })
            }
        }
    }
}

然后就能看到这个效果了：

记录输入

然后就是要保存身高体重的数据，并且做验证，所以先定义两个状态变量：

var weight = remember { mutableStateOf("") }
var height = remember { mutableStateOf("") }

这里可以做个通用的方法generateInput()：

@Composable
fun generateInput(label: String, model: MutableState<String>) {
    return TextField(
        value = model.value,
        //手机上要输入数字用这个keyboardOptions就行了，但桌面应用不行
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        onValueChange = {
            //因为有可能输入法错误，把小数点输入成句号，所以做下替换，将“。”替换成“.”
            val number = it.replace('。', '.')
            //这个判断我是经过一定考虑的，可以清空文本框，但不应该输入0或者以0开头的数
            if (number.isNotBlank() && !number.matches(Regex("[1-9](\\d+)?(\\.(\\d+)?)?"))) {
                return@TextField
            }
            model.value = number
        },
        label = { Text(label) })
}

然后把刚才的两个TextField换成用generateInput()重新生成文本框：

Column {
    generateInput("身高", height)
    generateInput("体重", weight)
}

这样就能把数据保存起来并且可以验证是数字了。

计算BMI

这里要专门做一个方法计算，方法名可以就叫calcBMI()：

fun calcBMI(height: String, weight: String): BigDecimal {
    if (weight.isEmpty() || height.isEmpty())
        return BigDecimal.ZERO
    val weight = BigDecimal(weight).setScale(2, RoundingMode.HALF_UP)
    val height = BigDecimal(height).setScale(2, RoundingMode.HALF_UP)
    if (weight < BigDecimal.ONE || height < BigDecimal.ONE)
        return BigDecimal.ZERO
    return (weight / (height / BigDecimal(100)).pow(2)).setScale(1, RoundingMode.HALF_UP)
}

这里可以重新定义weight和height是kotlin的语法特性名称遮蔽(Name shadowed)，可以了解一下，后面的计算看上去很清爽也要得益于kotlin为BigDecimal提供了直接/的操作。 然后再在Column下面做一个Text()进行显示：

Text(
    modifier = Modifier.padding(10.dp),
    text = calcBMI(height.value, weight.value).toString(),
    style = TextStyle(fontSize = 21.sp)
)

这个文本其实才是整个窗口的核心，所以大小我特意调大一点点，然后就能看到效果了：

但仅仅是这样肯定不行，总不能让人背下BMI标准或者每次算了还去找个表对照吧，所以下面再做个图提供说明参考。

标准值参考图像制作

下面要放一个Canvas用来显示BMI指数以及一个列图，众所周知BMI分4个级别（偏瘦、正常、超重、肥胖），所以我们先把标签画上。然后还要再画个框套着，4个级别就是4个框，框之间应该留些空白，4个框就应该有3道空白，每个空白定位10：

//这个TextMeasurer给字体用，每个字体都要有
val measurer = rememberTextMeasurer()
val standardArray = listOf("偏瘦 <=18.4", "正常 18.5 ~ 23.9", "超重 24.0 ~ 27.9", "肥胖 >= 28.0")
Canvas(
    modifier = Modifier.fillMaxSize()
) {
    //总体高度应该减去中间(3*10)的空白间隙
    val calcHeight = size.height - 30
    for (index in 0..3) {
        //计算好每块的Y轴定位，给文字和框定位用
        val offsetY = calcHeight / 4 * index + index * 10
        drawText(
            measurer,
            standardArray[index],
            style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold),
            topLeft = Offset(5f, offsetY + 5),
        )
        drawRect(
            color = Color.Blue,
            topLeft = Offset(0f, offsetY),
            size = Size(size.width, calcHeight / 4),
            style = Stroke(2f)
        )
    }
}

然后就能看到一个比较简单的效果：

然后需要再给每个区域填充不同的颜色，比喻说健康就是绿色，肥胖应该是橙色。但是框线还是需要保留的，不过drawRect没办法同时Fill和Stroke，所以只能画两个rect，所以上面的代码可以进行如下修改：

val colorArray = listOf(Color(0xff93b5cf), Color(0xff20a162), Color(0xfffcc515), Color(0xfff86b1d))
Canvas(
    modifier = Modifier.fillMaxSize()
) {
    val calcHeight = size.height - 30
    for (index in 0..3) {
        val offsetY = calcHeight / 4 * index + index * 10
        drawRect(
            color = colorArray[index],
            topLeft = Offset(0f, offsetY),
            size = Size(size.width, calcHeight / 4),
            style = Fill
        )
        drawRect(
            color = Color.DarkGray,
            topLeft = Offset(0f, offsetY),
            size = Size(size.width, calcHeight / 4),
            style = Stroke(1f)
        )
        drawText(
            measurer,
            standardArray[index],
            style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.DarkGray),
            topLeft = Offset(5f, offsetY + 5),
        )
    }
}

为什么这里我把drawText挪下来了呢？其实就是因为被Fill的rect遮住了，如果在rect画好之后再画字就没问题了，所以要把drawText挪下来，文字颜色也稍微设置了一下，效果就是这样：

接下来要做的就是让rect默认都透明一些，如果上面的BMI数值属于它的区间，那么就颜色加深，边框也加厚，这就跟上面整个联动起来了，中间那一行Text()的赋值也应该取出来便于后面的判断了：

val bmi = calcBMI(height.value, weight.value)
Text(
    modifier = Modifier.padding(10.dp),
    text = bmi.toString(),
    style = TextStyle(fontSize = 23.sp)
)
var selectIndex = if (bmi == BigDecimal.ZERO) -1 else 0
if (bmi > BigDecimal("18.5")) selectIndex++
if (bmi > BigDecimal("23.9")) selectIndex++
if (bmi > BigDecimal("27.9")) selectIndex++
val measurer = rememberTextMeasurer()
val standardArray = listOf("偏瘦 <=18.4", "正常 18.5 ~ 23.9", "超重 24.0 ~ 27.9", "肥胖 >= 28.0")
val colorArray = listOf(Color(0xff93b5cf), Color(0xff20a162), Color(0xfffcc515), Color(0xfff86b1d))
Canvas(
    modifier = Modifier.fillMaxSize()
) {
    val calcHeight = size.height - 30
    for (index in 0..3) {
        val offsetY = calcHeight / 4 * index + index * 10
        drawRect(
            color = colorArray[index],
            topLeft = Offset(0f, offsetY),
            size = Size(size.width, calcHeight / 4),
            style = Fill,
            alpha = if (index == selectIndex) 1f else .5f
        )
        drawRect(
            color = Color.DarkGray,
            topLeft = Offset(0f, offsetY),
            size = Size(size.width, calcHeight / 4),
            style = Stroke(if (index == selectIndex) 3f else 1f)
        )
        drawText(
            measurer,
            standardArray[index],
            style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.DarkGray),
            topLeft = Offset(5f, offsetY + 5),
        )
    }
}

然后输入数字，可以看到计算出19.3，是符合BMI正常水平的：

下面进行一些动画演示：

最终效果演示

输入不同的数值：

调节窗口大小：

还是挺好玩的，写起来也不怎么费事，可以动手来试一试！

本文于2023年7月20日写作并同时发布在lyrieek的稀土掘金社区与阿里云开发者社区。