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

原创

在下厉飞雨

发布于 2025-09-15 10:51:35

1030

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

引子

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

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

页面结构分析

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

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

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

Kuikly页面写法

页面定义

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

@Page("FrogMain", supportInLocal = true)
internal class FrogMainPage : BasePager() {
    
    override fun body(): ViewBuilder {
        return {
            // 页面内容
        }
    }
}

@Page注解定义页面名称和配置
BasePager提供页面基础功能
body()方法返回页面的UI结构

ViewBuilder结构

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

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

Kuikly组件写法

View组件

View是Kuikly的基础容器组件，类似于HTML的div：

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

Text组件

Text组件用于显示文本：

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块来处理：

View {
    attr {
        // 属性配置
    }
    
    event {
        click {
            // 点击事件处理
        }
    }
}

Kuikly布局系统

Flexbox布局

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

主轴方向

View {
    attr {
        flexDirectionColumn()  // 垂直排列（默认）
        // 或
        flexDirectionRow()     // 水平排列
    }
}

主轴对齐

View {
    attr {
        justifyContentCenter()      // 居中对齐
        justifyContentSpaceBetween() // 两端对齐
        justifyContentSpaceAround()  // 环绕对齐
    }
}

交叉轴对齐

View {
    attr {
        alignItemsCenter()  // 居中对齐
    }
}

绝对定位

View {
    attr {
        absolutePositionAllZero()  // 填满父容器
    }
}

实际布局示例

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

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

样式和视觉效果

颜色系统

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

// 十六进制颜色（注意使用L后缀）
color(Color(0xFF4CAF50L))

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

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

渐变背景

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

阴影效果

boxShadow(BoxShadow(
    offsetX = 0f,
    offsetY = 2f,
    shadowRadius = 8f,
    shadowColor = Color(0x4C4CAF50L)
))

边框样式

border(Border(
    lineWidth = 3f,
    lineStyle = BorderStyle.SOLID,
    color = Color(0xFF2D5016L)
))

完整组件示例

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

// 成就按钮
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: 跳转到成就页面
        }
    }
}