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

简介: 用 Compose 实现个空调

先来看看成品样式吧。

d2f9f19ea84c7ac46b7d096dee46f0b3.png

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

搞空调

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

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

后记

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


目录
相关文章
|
2天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
12天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
6天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
491 201
|
4天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
627 157
|
10天前
|
人工智能 自然语言处理 安全
国内主流Agent工具功能全维度对比:从技术内核到场景落地,一篇读懂所有选择
2024年全球AI Agent市场规模达52.9亿美元,预计2030年将增长至471亿美元,亚太地区增速领先。国内Agent工具呈现“百花齐放”格局,涵盖政务、金融、电商等多场景。本文深入解析实在智能实在Agent等主流产品,在技术架构、任务规划、多模态交互、工具集成等方面进行全维度对比,结合市场反馈与行业趋势,为企业及个人用户提供科学选型指南,助力高效落地AI智能体应用。
|
4天前
|
数据采集 消息中间件 人工智能
跨系统数据搬运的全方位解析,包括定义、痛点、技术、方法及智能体解决方案
跨系统数据搬运打通企业数据孤岛,实现CRM、ERP等系统高效互通。伴随数字化转型,全球市场规模超150亿美元,中国年增速达30%。本文详解其定义、痛点、技术原理、主流方法及智能体新范式,结合实在Agent等案例,揭示从数据割裂到智能流通的实践路径,助力企业降本增效,释放数据价值。
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
634 46