用 Compose 实现个空调，为你的夏日带去清凉

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

热

夏天到了，体验就如小标题的那一个字，于是乎，就想着画个空调吧，看着就能凉快点。。。

先来看看成品样式吧。

哈哈哈，看着是不是挺凉快。

搞空调

先来捋一下需要实现的功能吧：

1、首先要有开关，用来控制空调的开关状态；

2、然后可以设置冷风和暖风，保证冬天和夏天都能用嘛；

3、最后就是增加和减小温度了；

OK，需求差不多就是这样，接下来就该码代码了。

写标题

先来写下空调的标题吧：

Column(
    modifier = Modifier
        .fillMaxSize()
        .statusBarsPadding()
        .navigationBarsPadding(),
    verticalArrangement = Arrangement.Top,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Spacer(modifier = Modifier.height(50.dp))

    Text(text = "便携小空调", fontSize = 25.sp)
    Text(
        text = "Tip: 为你的夏日带去清凉！",
        fontSize = 15.sp,
        modifier = Modifier.padding(bottom = 20.dp)
    )
}

上面代码没什么，只是一个线性布局包裹着两个Text，没啥可说的。

画空调样式

再来画下空调的样式吧：

@Composable
private fun Conditioner() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .padding(horizontal = 20.dp),
        shape = RoundedCornerShape(
            topStart = 18f,
            topEnd = 18f,
            bottomStart = 36f,
            bottomEnd = 36f
        )
    ) {
        Column {
            Divider(
                modifier = Modifier.padding(top = 6.dp),
                thickness = 0.4.dp,
            )
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.White)
                    .padding(6.dp)
            ) {
                Image(
                    painter = painterResource(id = R.mipmap.logo),
                    contentDescription = "",
                )
                Column(
                    modifier = Modifier
                        .fillMaxSize(),
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.End,
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.ic_snow),
                        contentDescription = "",
                        modifier = Modifier.size(25.dp)
                    )

                    Spacer(modifier = Modifier.height(5.dp))

                    Text(
                        text = "23°C",
                        fontSize = 20.sp,
                        fontFamily = FontFamily(Font(R.font.lcd, FontWeight.SemiBold))
                    )
                }

            }
        }
    }
}

这块简单说下吧，空调的样式会有圆角，这里使用Card来实现，然后有一个节能能效的一个图片，右边放着冷风还是暖风的标识和温度。

控制空调

空调样式已经画好，只剩控制空调了：

// 空调开关
val airSwitch = rememberSaveable { mutableStateOf(false) }
// 温度
val temperature = rememberSaveable { mutableStateOf(23) }
// 类型，制冷还是制热
val airType = rememberSaveable { mutableStateOf(true) }
    
Row(modifier = Modifier.padding(10.dp)) {
    Button(onClick = { airType.value = true }, shape = RoundedCornerShape(15.dp)) {
        Text(text = "冷风")
    }

    Switch(checked = airSwitch.value, onCheckedChange = {
        airSwitch.value = !airSwitch.value
    })

    Button(onClick = { airType.value = false }, shape = RoundedCornerShape(15.dp)) {
        Text(text = "热风")
    }

}

Button(onClick = {
    if (temperature.value >= 31) {
        showToast(context, "温度不能再高了！！！")
        Log.e(TAG, "AirConditioner: 太热了")
        return@Button
    }
    temperature.value = temperature.value + 1
}, shape = RoundedCornerShape(15.dp)) {
    Text(text = "+")
}

Button(onClick = {
    if (temperature.value <= 16) {
        showToast(context, "温度不能再低了！！！")
        Log.e(TAG, "AirConditioner: 太冷了")
        return@Button
    }
    temperature.value = temperature.value - 1
}, shape = RoundedCornerShape(15.dp)) {
    Text(text = "-")
}

控制空调就需要State来进行控制了，代码也很简单，只是修改了下状态值。

吹空调

整个应用代码很简单，加上各种空行和imports都不到二百行。不到二百行就能写一个小空调，虽然没有实际的温度体验。。。。但是，心静自然凉嘛😂

大家可以复制下代码，然后自己在手机上也吹一吹试试效果，哈哈哈

我把这个小Demo上传到Github了，大家可以自行取代码和图片：github.com/zhujiang521…

后记

代码都很简单，但是希望大家在炎热的夏天都能保持一颗平静的心，未来也能从容的面对生活中的各种事情，努力，共勉。