Persimmon UI作業（一）——范進中舉（1）

概述

介紹：

Persimmon 是一套運行在RT-Thread嵌入式實時操作系統上的圖形用戶組件界面，用于提供圖形界面的用戶交互。
它采用C++語言編寫，基于C語言實現的底層圖形像素引擎，為上層應用提供了控件、窗口、signal/slot，手勢動畫等機制。 為了提高UI的開發靈活性、降低用戶開發時間和成本，Persimmon 提供了所見即所得的UI設計器。用戶可通過設計器輕松實現UI界面設計，并利用JavaScript腳本實現對界面邏輯的控制。

柿餅UI為我們提供了豐富的UI控件，例如Button,label,ProgressBar…等等，拖拽式設計UI布局可以讓開發者更加快速的投入到設計中。它很類似Android的UI可以通過拖拽式進行布局，但又不同于Android，因為柿餅UI使用JS腳本語言進行編程，這對于有微信小程序，web前端經驗的開發者而言，可以更加快速的上手柿餅UI。

---

代碼已經放到了我的 Gitee上面了，需要的小伙伴可以自己去下載，歡迎交流。

---

作業題目

直接上圖：

---

作業要求：作業可以在設計器模擬器內完成，也可以在柿餅派內完成。最終提交的作業是功能完成的設計器工程文件。

作業思路

說一下大體的思路吧：

• 1.范進中舉：通過MultiTextBox控件，該控件可以顯示多行文本，所以最簡單的方式當然就是直接將文本copy到控件文本中了。
• 2.電子相冊：將整個page中設置一個card卡片控件，通過在card中設置imagebox，從而達到輪播圖效果。
• 3.電子計時器：通過clock，button，progressbar控件實現。

頁面切換時card變化顯示的JS代碼：

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代碼：

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 = 0that.setData({ Clock1: { value: that.time } });that.setData({ label1: { value: "Time: " + that.time + "%" } });that.setData({ progressbar1: { value: that.time } });break;}},

clock控件樣式設置JS代碼：

this.setData({Clock1: {hour: { x: 7, y: 53 },minute: { x: 5, y: 64 },second: { x: 3, y: 77 },}})

---

????大體上的需求就是這么些，這次作業讓我對更多的控件使用有了深刻的認識，尤其clock控件，未來再制作電子手表是不是可以使用上了呢？

總結

以上是生活随笔為你收集整理的【12月原创】RT-thread - 柿饼UI ——范进中举的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。