七夕将至，AI用Kuikly打造孤寡青蛙App，一码五端真丝滑，你试了吗？

别怕，今年七夕，我们来点不一样的！与其刷着手机吃狗粮， 不如动手写个 孤寡青蛙 App让它陪你一起呱呱呱，解压又好玩！

这个项目的灵感，就来源于七夕节的“孤寡青蛙”热潮。作为一个热爱技术的开发者，我寻思着，能不能用一种全新的方式，来“孤寡”得更有创意一点？于是我把目光投向了腾讯今年开源的跨端框架——Kuikly。听说它能用Kotlin一套代码， 一边搞定Android、iOS、鸿蒙、Web甚至小程序，这不就是为我这种“懒人”量身定做的吗，换位思考...？

Kuikly框架初体验

在正式开搞之前，我们先来简单认识一下今天的主角——Kuikly。简单Kuikly是腾讯开源的一套基于Kotlin Multiplatform 技术的跨端开发框架。 绝绝子... 它的核心思想是“一套代码， 多端运行”，让开发者可以用熟悉的Kotlin语言，一次性开发出能在Android、iOS、鸿蒙、Web、小程序等多个平台上运行的应用。

为什么选择Kuikly？

说干就干！我决定， 今年的七夕，就让AI当我的“结对编程”伙伴，用Kuikly来打造一个“孤寡青蛙”App， 得了吧... 看看我们能碰撞出怎样的火花！

万事俱备，只欠东风。接下来我们开始搭建Kuikly的开发环境。整个过程还是比较顺利的，Kuikly的官方文档写得非常详细。这里我简单一下步骤：

• 安装Kotlin Multiplatform插件
• 配置Gradle构建脚本
• 初始化项目结构
• 添加Kuikly依赖

AI助力设计与编码

对吧？ 在动手写代码之前，我们得先有个像样的设计图。作为一个“审美有限”的程序员，我果断把这个任务交给了AI。

我给AI的提示词大概是这样的：

一开始我并没抱太大希望，毕竟AI画画这事儿，有时候挺“抽象”的。但后来啊出来的那一刻， 操作一波... 我惊了！这质感、这配色、这构图，简直是专业设计师的水准！

这很明显是主要原因是生成导入的包名时AI产生了一点小幻觉。问题不大，我把错误信息直接丢给AI，它马上就识别出了问题所在并给出了修复方案，蚌埠住了！。

代码实现与运行效果

盘它。 作为一个“懒人”， 自然是继续让AI给我们打工了开始编码吧！

得益于Kuikly支持使用广泛的Compose语法， 加上比较详实的文档，AI编码的还是比较顺利的， 对吧？ 整个生成首页代码的过程只在再说说出现了一点小的编译问题：

@Composable
internal fun FrogMainPageContent {
    // 状态管理
    var clickCount by remember { mutableStateOf }
    var isAnimating by remember { mutableStateOf }
    // 动画状态
    val frogScale by animateFloatAsState(
        targetValue = if  1.2f else 1.0f,
        animationSpec = tween,
        finishedListener = { isAnimating = false }
    )
    // 青蛙点击处理
    Box(
        modifier = Modifier
            .size
            .scale
            .background(
                brush = Brush.radialGradient(
                    colors = listOf, Color)
                ),
                shape = CircleShape
            )
            .clickable {
                // 点击处理
                clickCount = clickCount + 1
                isAnimating = true
                // 播放音效提示
                Toast.makeText.show
            },
        contentAlignment = Alignment.Center
    ) {
        Text
    }
}

这段代码展示了Kuikly Compose的几个核心特性， PUA。 和使用compose官方没有太大区别：

• 状态管理
• 动画支持
• 点击事件处理
• UI组件

第一天的开发体验，可以说是相当震撼。看到一套代码，在这么多平台上都完美运行，而且UI的一致性还是挺高的，我只想说：Kuikly，牛啊，试试水。！

跨端框架对比

算是吧... 在下一篇文章中， 我将继续让AI亿点点改进它，分享vibe coding过程中的一些经验。一边继续学习下Kuikly， 深入对比一下Kuikly、Flutter和React Native这三大主流跨端框架，看看它们各自都有哪些优缺点。

框架	语言	性能	生态	学习成本
Kuikly	Kotlin	高	中	低
Flutter	Dart	高	高	中
React Native	JavaScript/TypeScript	中	高	中

什么鬼？ 再说说 经过一番小小折腾，我们的“孤寡青蛙”App的首页终于在五个端上都跑起来了！

抄近道。 当然我们的“孤寡青蛙”App现在还只是一个非常初级的版本，很多功能都还没有完善。不过真有说的那么好？我决定把它拉出来遛遛～

而Kuikly框架，也让我对国产的跨端框架有了很大改观。它不仅用一套代码就实现了五个端的覆盖，而且开发体验极其顺滑，几乎没有遇到什么难以解决的“天坑”。对于我们这种追求效率的开发者 Kuikly无疑是一个极具吸引力的选择，真心希望未来国产框架做的越来越好，说白了...！

再说说祝天下有情人终成眷属，暂时单身的也每天潇洒幸福，七夕快乐！