【PersimmonUI柿饼学习营】+ DaZhou + 仿MacOS风格平板界面

发布于 2018-09-12 17:50:32 浏览：3568 订阅该版

时间过的真快，不知不觉间学习柿饼UI半个月了，这是我发表的第四篇帖子了。这次任务是做一款平板界面，用到了很多新特性，让我们闲话少叙，一起来再次见识柿饼UI工具的强大。国际惯例，下面是我此次的工程代码和效果视频，大家可以先下载查看。小道消息，柿饼UI工具马上就要公开了，大家先学先受益呦。
       [GitHub工程代码、视频仓](https://github.com/2SCZhou/PersimUI_learn)

这次还是介绍操作的关键部分，即一些新的技能。其他基础操作请查阅我之前的相关帖子。一个是ListCtrl组件，它实现了和安卓ListView类似的列表拖拽功能，详见视频（弹，弹，弹，弹走鱼尾纹。就是这种感觉）我就问一下，其他基于单片机的UI设计工具，有这样的功能吗？或者能这样简单实现吗？另外一个是，柿饼UI允许自定义UI模块，供其他窗口调用，详见视频Seting那段的实现效果。

首先，再一个窗口上，铺满整个ListCtrl,做成透明的效果，这个ListCtrl就是一个大载体，这个大载体实现列表左右或者上下的拖动效果。然后再在它上面铺满一个Panel,可以把它理解为一个能装很多控件的大容器，在里面放置我们项目需要的很多Button。效果如下图：
        ![1536745051(1).jpg](/uploads/201809/12/173830mkwa4alxa46p0wx4.jpg)

我们再来看一下，自定义面板的功能，先看下面的图，方框中为自定义的界面图，我的美工水平比较低，在专业的美工做下来，做的肯定非常有质感。
        ![1536745185(1).jpg](/uploads/201809/12/174105yk47y5o4o5d7loof.jpg)
        请自行脑补一下，拖动安卓手机设置列表的感受，柿饼UI做出来的效果能同样提供给你。
        这里主要讲一下自定义UI怎么在JS中被调用，下面是关键代码：
        ![1536745540(1).png](/uploads/201809/12/174557gkyppp3m44yua226.png)
        在哪个界面调用，就在那个page.js文件内加上上述代码。onLoad键在该页面被加载的时候被执行。

感觉这次帖子写的有点水，实在是心里有种“祥林嫂“的感觉。

DaZhou