第 4 章 · 基础组件 — View / Text / Image / Input / Button / Scroller

点击 Tab 浏览组件 · 在登录 demo 里输入手机号体验响应式校验

Kuikly 基础组件分类

没有 RN 那种 50+ 内置组件，而是用「少量基础组件 + Flexbox」组合出 90% 的页面。

容器类（可包子组件）

View

通用容器，最常用

Scroller

可滚动容器

List

长列表（第 6 章）

叶子类（无子组件）

Text

文本

Image

图片

Input

单行输入

TextArea

多行输入

Button

按钮（View 封装）

绘制类

Canvas

2D 绘图（折线 / 圆 / 动态）

设计哲学：少而精

对比一下各框架的内置组件数量：

框架	内置组件数	设计取向
React Native	~50	常用场景全包
Flutter	500+ (含 Material/Cupertino)	跨端一致性强
Compose	200+ (含 Material 3)	覆盖 Android 生态
Kuikly	~10 基础组件	组合 + 可扩展，简洁

组件实战画廊

1. View · 渐变 + 阴影

backgroundLinearGradient + boxShadow

Premium

2. Image · 圆形头像

size + borderRadius(size/2)

张

张三

Kuikly 学习中

3. Image · blurRadius 模糊

高斯模糊背景图

毛玻璃标题

4. Text · 多行省略

numberOfLines + textOverFlowEllipsis

Kuikly 是腾讯开源的、基于 Kotlin Multiplatform 的跨端 UI 框架。支持 Android / iOS / HarmonyOS / Web / 小程序 / macOS 6 端通用，采用原生控件渲染，包体小、性能贴近原生。

5. View + Text · 标签胶囊

borderRadius + border

Kotlin Compose KMP Flexbox

6. View · 按钮三态

backgroundColor + opacity 控制状态

✓ 正常按钮

✕ 禁用按钮

⟳ 加载中

「登录页」实时演示

试试输入：手机号位数不对会变红框；输入合法手机号 + 6 位验证码后登录按钮才会亮起来。

对应 Kuikly DSL（节选）

private var phone by observable("")
private var code by observable("")
private val canLogin get() = phone.length == 11 && code.length == 6

Input {
    attr {
        value(ctx.phone)
        keyboardTypeNumber()
        maxLength(11)
        border(Border(1f, BorderStyle.SOLID,
            if (ctx.phoneInvalid) Color.RED else Color(0xFFE0E0E0L)))
    }
    event { onTextChange { v -> ctx.phone = v.text } }
}

View {                                  // 登录按钮
    attr {
        backgroundColor(if (ctx.canLogin) Color(0xFF1976D2L) else Color(0xFFBDBDBDL))
        opacity(if (ctx.canLogin) 1f else 0.6f)
    }
    event { click { if (ctx.canLogin) submit() } }
    Text { attr { text("登 录"); color(Color.WHITE) } }
}

组件 attr 速查表

View 高频 attr

API	作用
`size(w, h)`	固定宽高
`backgroundColor(Color)`	背景色
`backgroundLinearGradient(dir, *stops)`	线性渐变
`borderRadius(8f)`	圆角
`border(Border(1f, SOLID, color))`	描边
`boxShadow(BoxShadow(dx, dy, blur, color))`	阴影
`padding(8f)` / `marginTop(20f)`	间距
`flexDirectionRow()`	横向 Flex
`justifyContentSpaceBetween()`	主轴对齐
`absolutePosition(top, left, right, bottom)`	绝对定位
`transform { rotate(45f); scale(1.2f) }`	变换

Text 高频 attr

API	作用
`text("...")`	文字内容
`fontSize(16f)`	字号
`color(Color.BLACK)`	文字颜色
`fontWeightBold()`	粗体
`lineHeight(24f)`	行高
`numberOfLines(2)`	最多行数
`textOverFlowEllipsis()`	溢出 ...
`textAlignCenter()`	居中对齐

Image 高频 attr

API	作用
`src("url 或本地资源")`	图片来源
`size(80f, 80f)`	必填，没尺寸图片不显示
`borderRadius(40f)`	圆角（半径=size/2 → 圆形）
`resizeContain() / resizeCover() / resizeStretch()`	缩放模式
`tintColor(Color.RED)`	图片着色（icon 常用）
`blurRadius(10f)`	高斯模糊

Input 高频 attr / event

API	作用
`value(ctx.text)`	受控值（实现双向绑定的关键）
`placeholder("...")`	占位提示
`keyboardTypeNumber()`	数字键盘
`inputTypePassword()`	密码模式
`maxLength(11)`	最大字符数
`onTextChange { v -> ... }`	内容变化
`onFocus / onBlur { e -> }`	焦点

Scroller 高频 attr

API	作用
`flexDirectionColumn() / Row()`	滚动方向
`pagingEnable(true)`	整页翻动（轮播图）
`showScrollerIndicator(true)`	显示滚动条
`bounceEnable(true)`	iOS 弹性效果
`scrollEnd { e -> }`	滚动结束

⚠️ 长列表（>20 个 item）请用 List / PageList，不要用 Scroller，第 6 章详讲。