说明:本文是关于Kuikly自研DSL基础组件实战的文章,通过分析"孤寡青蛙"App主界面来介绍页面写法、组件使用和布局系统,重点展示DSL语法特点和基础组件的实际应用,不含深入的架构和原理性分析,望道友知晓。
引子
各位道友,上回我们体验了Kuikly自研DSL的优雅,是不是已经摩拳擦掌,准备大干一场了?别急,饭要一口一口吃,代码要一行一行写(虽然主要是AI帮我们写的,但我们还是要理解每一行代码的含义)。
今天,我们就从最基础的组件开始,逐步Review下AI实现的"孤寡青蛙"的主界面,看看Kuikly的页面写法、组件写法和布局系统。正所谓"万丈高楼平地起",打好基础才能让我们的App更稳固。准备好了吗?GO!
页面结构分析
通过查看FrogMainPage.kt
的代码,我们发现这个界面结构清晰,主要包含以下几个区域:
- 标题区域:显示"孤寡青蛙"的名称和说明文字
- 计数显示区域:显示"孤寡"的次数
- 青蛙主体区域:可点击的青蛙按钮和音效提示
- 底部功能区:成就、循环、设置三个按钮
这个实现展现了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的核心特性:
- 页面写法 :使用
@Page
注解和BasePager
基类定义页面 - 组件写法 :通过
attr
块配置属性,event
块处理事件 - 布局系统:基于Flexbox的布局模型,支持灵活的排列和对齐
- 样式系统:丰富的颜色、渐变、阴影、边框等视觉效果
相比传统的UI框架,Kuikly DSL提供了更加直观和简洁的开发体验,让我们能够用声明式的方式构建复杂的用户界面。下一篇文章,我们将深入学习Kuikly的交互和动画特性。敬请期待!