热
先来看看成品样式吧。
哈哈哈,看着是不是挺凉快。
搞空调
先来捋一下需要实现的功能吧:
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了,大家可以自行取代码和图片:https://github.com/zhujiang521/AirConditioner
后记
代码都很简单,但是希望大家在炎热的夏天都能保持一颗平静的心,未来也能从容的面对生活中的各种事情,努力,共勉。