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的交互和动画特性。敬请期待!

相关推荐
鹏多多.5 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
HarmonyOS小助手5 小时前
HEIF:更高质量、更小体积,开启 HarmonyOS 图像新体验
harmonyos·鸿蒙·鸿蒙生态
self_myth6 小时前
[特殊字符] 深入理解操作系统核心特性:从并发到分布式,从单核到多核的全面解析
windows·macos·wpf·harmonyos
他们都不看好你,偏偏你最不争气7 小时前
【iOS】多界面传值
ios
安卓开发者15 小时前
鸿蒙NEXT主题设置指南:应用级与页面级主题定制详解
华为·harmonyos
深盾科技21 小时前
鸿蒙ABC开发中的名称混淆与反射处理策略:安全与效率的平衡
安全·华为·harmonyos
2501_919749031 天前
鸿蒙:获取UIContext实例的方法
华为·harmonyos
MaoJiu1 天前
Flutter混合开发:在iOS工程中嵌入Flutter Module
flutter·ios
王佳斌1 天前
tp报错解决
harmonyos