RT-Thread-【12月原创】柿饼UI作业（一）——范进中举RT-Thread问答社区

【12月原创】柿饼UI作业（一）——范进中举

发布于 2020-12-29 15:39:04 浏览：828 订阅该版

[tocm]

# Persimmon UI作业（一）——范进中举（1）

## 概述

介绍：
> Persimmon 是一套运行在RT-Thread嵌入式实时操作系统上的图形用户组件界面，用于提供图形界面的用户交互。
> 它采用C++语言编写，基于C语言实现的底层图形像素引擎，为上层应用提供了控件、窗口、signal/slot，手势动画等机制。 为了提高UI的开发灵活性、降低用户开发时间和成本，Persimmon 提供了所见即所得的UI设计器。用户可通过设计器轻松实现UI界面设计，并利用JavaScript脚本实现对界面逻辑的控制。

![柿饼派](https://oss-club.rt-thread.org/uploads/20220714/6ecba7e1a18a06e9529b0356e1fcf92c276a2981.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

柿饼UI为我们提供了丰富的UI控件，例如Button,label,ProgressBar...等等，拖拽式设计UI布局可以让开发者更加快速的投入到设计中。它很类似Android的UI可以通过拖拽式进行布局，但又不同于Android，因为柿饼UI使用JS脚本语言进行编程，这对于有微信小程序，web前端经验的开发者而言，可以更加快速的上手柿饼UI。

![控件](https://oss-club.rt-thread.org/uploads/20220714/88b69d8d332d8161b28678e2f0d978bf62384336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

---
代码已经放到了我的 [Gitee](https://gitee.com/Rbb996/persimmon-ui-operation)上面了，需要的小伙伴可以自己去下载，欢迎交流。

---

视频地址：[bilibili](https://www.bilibili.com/video/BV1dA411x7LC/)

## 作业题目
直接上图：

---
![范进中举](https://oss-club.rt-thread.org/uploads/20220714/11cc82979a8f1e76810b103cfab705054a21270f.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

作业要求：作业可以在设计器模拟器内完成，也可以在柿饼派内完成。最终提交的作业是功能完成的设计器工程文件。

## 作业思路

说一下大体的思路吧：
* 1.范进中举：通过MultiTextBox控件，该控件可以显示多行文本，所以最简单的方式当然就是直接将文本copy到控件文本中了。
* ![范进中举](https://oss-club.rt-thread.org/uploads/20220714/a12ba6a952213d0a01188147fd20176341918d9e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)
* 2.电子相册：将整个page中设置一个card卡片控件，通过在card中设置imagebox，从而达到轮播图效果。
* ![电子相册](https://oss-club.rt-thread.org/uploads/20220714/23e5b5193b31e5b3f2052944683a72ca18238a72.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)
* 3.电子计时器：通过clock，button，progressbar控件实现。
* ![电子计时器](https://oss-club.rt-thread.org/uploads/20220714/02ee56abc0106a9ab3b845e6f7d033b6ffbecff8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjEwNDMw,size_16,color_FFFFFF,t_70)

>页面切换时card变化显示的JS代码：
```javascript
    card_change: function (event) {
        console.dir(event)
        if ("change" == event.type) {
            switch (event.detail.value) {
                case 0:
                    this.setData({ btn_title: { norImg: 'book_of.png' } });
                    this.setData({ btn_photo: { norImg: 'photo_on.png' } });
                    this.setData({ btn_my: { norImg: 'alarm_on.png' } });
                    break;
                case 1:
                    this.setData({ btn_title: { norImg: 'book_on.png' } });
                    this.setData({ btn_photo: { norImg: 'photo_of.png' } });
                    this.setData({ btn_my: { norImg: 'alarm_on.png' } });
                    break;
                case 2:
                    this.setData({ btn_title: { norImg: 'book_on.png' } });
                    this.setData({ btn_photo: { norImg: 'photo_on.png' } });
                    this.setData({ btn_my: { norImg: 'alarm_off.png' } });
                    break;
            }
        }
    },
```
> 页面切换时，button图片切换JS代码：

```javascript
    onclick: function (event) {
        var that = this;
        switch (event.target.id) {
            case "btn_title":
                console.log('btn_1')
                this.setData({ main_card: 0 });
                this.setData({ btn_title: { norImg: 'book_of.png' } });
                this.setData({ btn_photo: { norImg: 'photo_on.png' } });
                this.setData({ btn_my: { norImg: 'alarm_on.png' } });
                break;
            case "btn_photo":
                console.log('btn_2')
                this.setData({ main_card: 1 });
                this.setData({ btn_title: { norImg: 'book_on.png' } });
                this.setData({ btn_photo: { norImg: 'photo_of.png' } });
                this.setData({ btn_my: { norImg: 'alarm_on.png' } });
                break;
            case "btn_my":
                console.log('btn_3')
                this.setData({ main_card: 2 });
                this.setData({ btn_title: { norImg: 'book_on.png' } });
                this.setData({ btn_photo: { norImg: 'photo_on.png' } });
                this.setData({ btn_my: { norImg: 'alarm_off.png' } });
                break;
            case "btn_stime":
                console.log('btn_stime')
                that.timer = setInterval(function () {
                    that.setData({ Clock1: { value: that.time } });
                    that.time++;
                    if (that.time > 60) {
                        /*更新完成的文本提示，清除定时器*/
                        that.setData({ label1: { value: "Time's up !!!" } });
                    } else {
                        /*更新progressbar的进度和label的显示文本*/
                        that.setData({ label1: { value: "Time: " + that.time + "%" } });
                        that.setData({ progressbar1: { value: that.time } });
                        that.progress++;
                    }
                }, 1000)
                break;
            case "btn_sptime":
                console.log('btn_sptime')
                clearInterval(that.timer);
                break;
            case "btn_retime":
                console.log('btn_retime')
                that.time = 0
                that.setData({ Clock1: { value: that.time } });
                that.setData({ label1: { value: "Time: " + that.time + "%" } });
                that.setData({ progressbar1: { value: that.time } });
                break;
        }
    },
```

>clock控件样式设置JS代码：
```javascript
        this.setData({
            Clock1: {
                hour: { x: 7, y: 53 },
                minute: { x: 5, y: 64 },
                second: { x: 3, y: 77 },
            }
        })
```

---

大体上的需求就是这么些，这次作业让我对更多的控件使用有了深刻的认识，尤其clock控件，未来再制作电子手表是不是可以使用上了呢？