用 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都不到二百行。不到二百行就能写一个小空调，虽然没有实际的温度体验。。。。但是，心静自然凉嘛

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

云空调，GitHub 的专属冷气——GitHub 热点速览 v.21.20
作者:HelloGitHub-小鱼干万物皆可上云,air-conditioner 是上周火爆小鱼干朋友圈和公众号信息流的云空调项目.第一眼的时候,你会觉得和这个云空调还挺别致的,第二眼,si~~感到 ...
炎炎夏日，小酱送你一个便携小空调
Tip: 为你的夏日带去[清凉] 最新随着夏天的一步步走近,天气也开始变得非常炎热起来,最近微信朋友圈内开始流行起了便携小空调的梗,出于好奇心小酱率先体验了一下,除了使用过后有种智商被侮辱的感觉, ...
炎炎夏日打造一个属于自己的“便携小空调”吧
"便携小空调"曾经火遍朋友圈与空间,今天我们就用web来打造一个属于自己的夏日小空调吧! 下面是效果图: 这是点击"独立遥控器"后的效果: 这是空调打开后的效果 ...
vector 不初始化时什么状态_练车时，教练为什么不给你开空调？
许多小伙伴会觉得冬天不适合练车!天气越来越冷了,还在坚持学车的你是不是觉得很辛苦?更辛苦的是在练习科目二的时候教练还不给你开空调.教练为什么不给开空调呢?节约成本还是磨练意志?其实这真的是误会,教练不 ...
海外直播、聊天交友APP的开发及上架GooglePlay体验【Compose版】
前言 Jetpack Compose在2021年7月底的时候正式发布了Release 1.0版本,在8月中旬的时候正好赶上公司海外项目计划重构,于是主动请缨向领导申请下来了此次开发的机会.由于之前一直 ...
Android 我的第一个Jetpack Compose应用
目录 1. 背景 2. Jetpack Compose 是什么? 3. 开始前的准备 4. 创建DEMO 4.1 New Project 4.2 项目配置 5. 项目整体变化 5.1 布局部分 5.2 ...
空调行业如何破局？TCL空调双十一战绩可窥见端倪
来源 | 螳螂观察作者|佘凯文 11月7日立冬,正式拉开冬季的帷幕,但除了北方的个别城市,全国绝大部分地区仍能感受到阳光的和煦.相比之下,在受到整体大环境反复施压后,国内某些行业所经历的" ...
空调市场“三连降”背后，经销商们早已退无可退
文|智能相对论作者|佘凯文 1月份,世界气象组织发布通告称"尽管全球平均气温因2020年至2022年的拉尼娜事件而有所下降,但2021年为有记录以来最暖的七个年份之一."国内方面 ...
Java程序实现一个空调的类,基于jsp的空调电费管理系统-JavaEE实现空调电费管理系统 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的空调电费管理系统, 该项目可用各类java课程设计大作业中, 空调电费管理系统的系统架构分为前后台两部分, 最终实 ...

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

热

搞空调

写标题

画空调样式

控制空调

吹空调

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

最新文章

热门文章