项目地址：[GitHub](https://github.com/Tencent-TDS/KuiklyUI/tree/main/demo/src/commonMain/kotlin/com/tencent/kuikly/demo/pages/WeatherCanvasPage.kt)

从最早的 Android 入门教程，到 iOS SwiftUI 官方示例，再到 React、Flutter、鸿蒙... 天气应用几乎是所有 UI 框架的"Hello World Plus"——它足够简单，能让你快速上手；又足够丰富，涵盖了数据展示、图表绑定等核心技能。

今天，我们用 Kuikly 来完成这个demo：**用一套 Kotlin 代码，画一个能在 Android、iOS、鸿蒙三端运行的雨量预测图表**。

别担心，这篇文章专门为新手准备，我们会从最基础的概念讲起。准备好了吗？Let's go！

## 我们要做什么？

先看看最终效果：一张带毛玻璃效果的卡片，上面有一条蓝色的曲线，展示未来 90 分钟的雨量变化。左边是雨量等级（暴雨、大雨、中雨、小雨），底部是时间轴（现在、30分钟、60分钟、90分钟）。

![image.png](https://developer.qcloudimg.com/http-save/yehe-11358903/fec741bf4b34a00e28b418c18a0269c9.png)
是不是很眼熟？没错，这就是各大天气 App 里那个"分钟级降水预报"的同款！

## 第一步：搭建页面骨架

在 Kuikly 中，一个页面就是一个继承自 `BasePager` 的类：

```kotlin
@Page("WeatherCanvasPage")  // 给页面取个名字，用于路由跳转
internal class WeatherCanvasPage : BasePager() {
    
    override fun body(): ViewBuilder {
        return {
            // 页面内容写在这里
        }
    }
}
```

**tips**：

*   `@Page("xxx")` 就像给页面起了个门牌号

*   `body()` 方法返回页面的 UI 结构，所有组件都写在大括号里

## 第二步：铺一张好看的背景图

天气应用嘛，氛围感很重要！

```kotlin
override fun body(): ViewBuilder {
    return {
        attr {
            flex(1f)  // flex 弹性布局
            backgroundColor(Color(0x436082, 1f))  // 蓝灰色底色
        }

        // 背景图
        Image {
            attr {
                src("https://qq-weather.cdn-go.cn/weather/latest/rain-bg/rain-comming.png")
                positionAbsolute()  // 绝对定位
                left(0f); right(0f); top(0f); bottom(0f)  // 铺满全屏
            }
        }
    }
}
```

**tips**：

*   `attr { }` 用来设置组件样式，类似 CSS

*   `positionAbsolute()` + 四边为 0 = 铺满父容器

## 第三步：自定义组件

接下来我们要添加图表卡片。但 `RainFallNodeCanvas` 不是内置组件，而是我们自己造的！

这就是 Kuikly 的魅力：**把复杂 UI 封装成可复用的积木块**。

一个自定义组件需要三样东西：

| 组成部分              | 作用         |
| ----------------- | ---------- |
| 属性类 (Attr)        | 定义组件接收什么数据 |
| 组件类 (ComposeView) | 定义组件长什么样   |
| 扩展函数              | 让组件用起来更顺手  |

### 3.1 定义属性：这个组件需要什么数据？

```kotlin
class RainFallNodeAttr : ComposeAttr() {
    // 雨量数据：24个点，代表未来90分钟的降水量
    var nodes: List<Float> by observable(
        listOf(1.3f, 2.6f, 4.2f, 5.1f, 3.5f, ...)
    )
    
    // 顶部提示文字
    var title: String by observable("雨渐大，30分钟后雨会停")
    
    // Y轴标签
    var rainLevel1Title: String by observable("暴雨")
    var rainLevel2Title: String by observable("大雨")
    var rainLevel3Title: String by observable("中雨")
    var rainLevel4Title: String by observable("小雨")
}
```

**划重点**：`by observable(...)` 是 Kuikly 的响应式魔法！数据一变，UI 自动刷新，不用手动调用任何刷新方法。

### 3.2 定义组件：它长什么样？

```kotlin
class WeatherRainFallNodeCanvas : ComposeView<RainFallNodeAttr, ComposeEvent>() {
    private val nodeAttr = RainFallNodeAttr()

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                size(335f, 250f)  // 卡片大小
                borderRadius(BorderRectRadius(16f, 16f, 16f, 16f))  // 圆角
            }

            // 1. 毛玻璃背景
            Blur {
                attr {
                    absolutePosition(0f, 0f, 0f, 0f)
                    blurRadius(10.0f)
                }
            }

            // 2. 顶部提示文字
            Text { attr { text(ctx.nodeAttr.title) } }

            // 3. Canvas 画布（核心！）
            Canvas({ ... }) { context, width, height ->
                // 在这里画曲线
            }

            // 4. Y轴标签：暴雨、大雨...
            // 5. X轴标签：现在、30分钟...
        }
    }
    
    override fun createAttr() = nodeAttr
    override fun createEvent() = ComposeEvent()
}
```

## 第四步：用 Canvas 画曲线（核心！）

Canvas 就是一块"画布"，你可以在上面画任何东西。

### 4.1 Canvas 基本用法

```kotlin
Canvas(
    { attr { absolutePosition(55f, 0f, 24f, 0f) } }
) { context, width, height ->
    // context = 画笔
    // width, height = 画布尺寸
}
```

### 4.2 画一条丝滑的曲线

直接用直线连接数据点会很丑（像心电图），我们用**贝塞尔曲线**让它丝滑：

```kotlin
// 1. 设置画笔
context.beginPath()
context.strokeStyle(Color(0x0085FF, 1f))  // 天空蓝
context.lineWidth(5.0f)                    // 线条粗细
context.lineCapRound()                     // 圆头端点
context.moveTo(0f, height)                 // 起点：左下角

// 2. 遍历数据点，画曲线
for ((index, node) in nodeAttr.nodes.withIndex()) {
    val x = index * width / 24                  // X坐标
    val y = height - node * height / 10         // Y坐标（数据映射）
    
    // 用贝塞尔曲线连接，比直线更丝滑
    context.quadraticCurveTo(controlX, controlY, nextX, nextY)
}

// 3. 完成绑定
context.stroke()
```

**什么是贝塞尔曲线？** 简单说：

*   直线：A → B，走直线

*   贝塞尔：A → B，但要"绕过"控制点 C，形成弧线

### 4.3 画虚线（参考线）

没有虚线 API？没关系，手搓一个：

```kotlin
private fun renderDashLine(context: CanvasContext, width: Float, y: Float) {
    context.beginPath()
    context.strokeStyle(Color(0xffffff, 0.2f))  // 半透明白
    
    var x = 10f
    while (x < width) {
        context.lineTo(x + 5f, y)   // 画 5 像素
        x += 7.5f
        context.moveTo(x, y)        // 跳过 2.5 像素
    }
    context.stroke()
}
```

原理：画一段、跳一段、画一段、跳一段...

## 第五步：让组件更好用

写个扩展函数，让自定义组件用起来和内置组件一样：

```kotlin
internal fun ViewContainer<*, *>.RainFallNodeCanvas(
    init: WeatherRainFallNodeCanvas.() -> Unit
) {
    addChild(WeatherRainFallNodeCanvas(), init)
}
```

现在可以这样用了：

```kotlin
RainFallNodeCanvas {
    attr {
        positionAbsolute()
        top(178.5f)
        left(20f)
    }
}
```

和 `Text`、`Image` 一模一样的写法！

## 总结

恭喜完成 Kuikly "天气App"！回顾一下核心技能：

| 技能                                     | 总结                                       |
| -------------------------------------- | ---------------------------------------- |
| 页面定义                                   | 继承 `BasePager` + `@Page` 注解              |
| 布局系统                                   | `attr { }` 设样式，`positionAbsolute()` 绝对定位 |
| 自定义组件                                  | 继承 `ComposeView`，定义 Attr + body()        |
| 响应式数据                                  | `by observable()` 数据变 → UI 自动刷新          |
| Canvas bindbindbindbindbindbindbindind | 回调式 API，拿到 context 就能画                   |
| 贝塞尔曲线                                  | `quadraticCurveTo()` 让曲线更丝滑              |
| 毛玻璃效果                                  | `Blur` 组件一行搞定                            |

下次产品经理甩给你"参考天气 App 做个图表"的需求，你就可以自信地说：**小场面！**

代码已经躺在 GitHub 上了，还不快去 Clone 下来跑一跑？


从最早的 Android 入门教程，到 iOS SwiftUI 官方示例，再到 React、Flutter、鸿蒙... 天气应用几乎是所有 UI 框架的"Hello World Plus"——它足够简单，能让你快速上手；又足够丰富，涵盖了数据展示、图表绑定等核心技能。

用 KuiklyUI Canvas 打造天气预测图表

前端

客户端

开发工具

学习使用Kuikly框架开发跨平台天气应用，从Android、iOS到鸿蒙三端兼容。教程涵盖页面搭建、自定义组件、Canvas绘制雨量曲线等核心技能，适合新手快速掌握响应式UI开发。通过贝塞尔曲线实现丝滑数据可视化，轻松完成天气App中的雨量预测图表功能。

Android

Flutter

容器

路由

Kotlin

GitHub

AI驱动 智领未来

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 KuiklyUI Canvas 打造天气预测图表-腾讯云开发者社区-腾讯云

用 KuiklyUI Canvas 打造天气预测图表

用 KuiklyUI Canvas 打造天气预测图表

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐