Kuikly基础之Kuikly DSL基础组件实战:构建青蛙主界面

说明:本文是关于Kuikly自研DSL基础组件实战的文章,通过分析"孤寡青蛙"App主界面来介绍页面写法、组件使用和布局系统,重点展示DSL语法特点和基础组件的实际应用,不含深入的架构和原理性分析,望道友知晓。

引子

各位道友,上回我们体验了Kuikly自研DSL的优雅,是不是已经摩拳擦掌,准备大干一场了?别急,饭要一口一口吃,代码要一行一行写(虽然主要是AI帮我们写的,但我们还是要理解每一行代码的含义)。

今天,我们就从最基础的组件开始,逐步Review下AI实现的"孤寡青蛙"的主界面,看看Kuikly的页面写法、组件写法和布局系统。正所谓"万丈高楼平地起",打好基础才能让我们的App更稳固。准备好了吗?GO!

页面结构分析

通过查看FrogMainPage.kt的代码,我们发现这个界面结构清晰,主要包含以下几个区域:

  1. 标题区域:显示"孤寡青蛙"的名称和说明文字
  2. 计数显示区域:显示"孤寡"的次数
  3. 青蛙主体区域:可点击的青蛙按钮和音效提示
  4. 底部功能区:成就、循环、设置三个按钮

这个实现展现了Kuikly DSL的页面组织能力和组件使用方式,让我们一起来深入学习!

Kuikly页面写法

页面定义

在Kuikly中,页面通过@Page注解和继承BasePager来定义:

kotlin 复制代码
@Page("FrogMain", supportInLocal = true)
internal class FrogMainPage : BasePager() {
    
    override fun body(): ViewBuilder {
        return {
            // 页面内容
        }
    }
}
  • @Page注解定义页面名称和配置
  • BasePager提供页面基础功能
  • body()方法返回页面的UI结构

ViewBuilder结构

ViewBuilder是Kuikly的核心概念,用于构建UI层次结构:

kotlin 复制代码
override fun body(): ViewBuilder {
    val ctx = this
    return {
        View {
            attr {
                // 属性配置
            }
            // 子组件
        }
    }
}

Kuikly组件写法

View组件

View是Kuikly的基础容器组件,类似于HTML的div:

kotlin 复制代码
View {
    attr {
        width(200f)
        height(200f)
        backgroundColor(Color(0xFF4CAF50L))
        borderRadius(100f)
    }
    
    // 子组件
}

Text组件

Text组件用于显示文本:

kotlin 复制代码
Text {
    attr {
        text("🐸 孤寡青蛙")
        fontSize(32f)
        fontWeight700()
        color(Color(0xFF2D5016L))
        textAlignCenter()
    }
}

组件属性配置

Kuikly组件的属性通过attr块来配置,简单列举一些我们用到的:

  • 尺寸属性width(), height(), minWidth(), minHeight()
  • 颜色属性color(), backgroundColor()
  • 文字属性fontSize(), fontWeight700(), textAlignCenter()
  • 边距属性margin(), padding(), marginTop(), paddingTop()
  • 边框属性borderRadius(), border()
  • 背景属性backgroundLinearGradient()

事件处理

组件的事件通过event块来处理:

kotlin 复制代码
View {
    attr {
        // 属性配置
    }
    
    event {
        click {
            // 点击事件处理
        }
    }
}

Kuikly布局系统

Flexbox布局

Kuikly采用Flexbox布局模型,通过以下属性控制布局:

主轴方向

kotlin 复制代码
View {
    attr {
        flexDirectionColumn()  // 垂直排列(默认)
        // 或
        flexDirectionRow()     // 水平排列
    }
}

主轴对齐

kotlin 复制代码
View {
    attr {
        justifyContentCenter()      // 居中对齐
        justifyContentSpaceBetween() // 两端对齐
        justifyContentSpaceAround()  // 环绕对齐
    }
}

交叉轴对齐

kotlin 复制代码
View {
    attr {
        alignItemsCenter()  // 居中对齐
    }
}

绝对定位

kotlin 复制代码
View {
    attr {
        absolutePositionAllZero()  // 填满父容器
    }
}

实际布局示例

让我们看看青蛙主界面的布局结构:

kotlin 复制代码
// 根容器 - 垂直布局
View {
    attr {
        absolutePositionAllZero()
        flexDirectionColumn()           // 垂直排列
        justifyContentSpaceBetween()    // 内容两端对齐
    }
    
    // 标题区域
    View {
        attr {
            alignItemsCenter()          // 水平居中
            paddingTop(60f)
        }
        
        Text { /* 标题文字 */ }
    }
    
    // 计数显示区域
    View {
        attr {
            alignItemsCenter()          // 水平居中
        }
        
        Text { /* 计数显示 */ }
    }
    
    // 底部功能区 - 水平布局
    View {
        attr {
            flexDirectionRow()          // 水平排列
            justifyContentSpaceAround() // 环绕对齐
        }
        
        View { /* 成就按钮 */ }
        View { /* 循环按钮 */ }
        View { /* 设置按钮 */ }
    }
}

样式和视觉效果

颜色系统

Kuikly支持多种颜色定义方式:

kotlin 复制代码
// 十六进制颜色(注意使用L后缀)
color(Color(0xFF4CAF50L))

// 预定义颜色
color(Color.WHITE)

// 半透明颜色
backgroundColor(Color(0x33FFFFFFL))

渐变背景

kotlin 复制代码
backgroundLinearGradient(
    Direction.TO_BOTTOM,
    ColorStop(Color(0xFF66BB6AL), 0f),   // 起始颜色
    ColorStop(Color(0xFF4CAF50L), 0.5f), // 中间颜色
    ColorStop(Color(0xFF388E3CL), 1f)    // 结束颜色
)

阴影效果

kotlin 复制代码
boxShadow(BoxShadow(
    offsetX = 0f,
    offsetY = 2f,
    shadowRadius = 8f,
    shadowColor = Color(0x4C4CAF50L)
))

边框样式

kotlin 复制代码
border(Border(
    lineWidth = 3f,
    lineStyle = BorderStyle.SOLID,
    color = Color(0xFF2D5016L)
))

完整组件示例

让我们看一个完整的按钮组件实现:

kotlin 复制代码
// 成就按钮
View {
    attr {
        backgroundColor(Color(0xFF4CAF50L))
        borderRadius(25f)
        padding(top = 14f, bottom = 14f, left = 24f, right = 24f)
        boxShadow(BoxShadow(
            offsetX = 0f,
            offsetY = 2f,
            shadowRadius = 8f,
            shadowColor = Color(0x4C4CAF50L)
        ))
        minWidth(80f)
        alignItemsCenter()
        justifyContentCenter()
    }
    
    Text {
        attr {
            text("成就")
            fontSize(14f)
            fontWeight700()
            color(Color(0xFFFFFFFFL))
            textAlignCenter()
        }
    }
    
    event {
        click {
            // TODO: 跳转到成就页面
        }
    }
}

总结

通过分析实际的FrogMainPage.kt代码,我们学习了Kuikly DSL的核心特性:

  1. 页面写法 :使用@Page注解和BasePager基类定义页面
  2. 组件写法 :通过attr块配置属性,event块处理事件
  3. 布局系统:基于Flexbox的布局模型,支持灵活的排列和对齐
  4. 样式系统:丰富的颜色、渐变、阴影、边框等视觉效果

相比传统的UI框架,Kuikly DSL提供了更加直观和简洁的开发体验,让我们能够用声明式的方式构建复杂的用户界面。下一篇文章,我们将深入学习Kuikly的交互和动画特性。敬请期待!

相关推荐
Digitally3 小时前
5种将iPhone同步到iPhone的简单方法
ios·iphone
2501_916013745 小时前
iOS 混淆与 App Store 审核兼容性 避免被拒的策略与实战流程(iOS 混淆、ipa 加固、上架合规)
android·ios·小程序·https·uni-app·iphone·webview
无风听海7 小时前
HarmonyOS之 @Provide 装饰器实现跨组件双向状态同步
华为·harmonyos
安卓开发者7 小时前
鸿蒙NEXT传统蓝牙开发指南:从基础到实战的完整解决方案
harmonyos
代码79728 小时前
使用会话存储时,处理存储信息加密问题
深度学习·算法·自动化·散列表·harmonyos
爱笑的眼睛1110 小时前
深入解析 List 容器组件:构建高效、可交互的列表解决方案
华为·harmonyos
FreeBuf_10 小时前
思科IOS零日RCE漏洞正遭野外利用(CVE-2025-20352)
macos·ios·cocoa
威哥爱编程10 小时前
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
harmonyos
2501_9197490313 小时前
鸿蒙:PickerDialog 日期选择弹窗实现流程
华为·harmonyos
鸿蒙小白龙13 小时前
【OpenHarmony实战】系统参数SystemParameter完全指南:param get/set调试技巧与案例精解
harmonyos·鸿蒙·open harmony