Toggle navigation
首页
问答
文章
积分商城
专家
专区
更多专区...
文档中心
返回主站
搜索
提问
会员
中心
登录
注册
柿饼_PersimmonUI
【PersimmonUI柿饼学习营】基于柿饼平板电脑的微实现---二牛哥
发布于 2018-09-12 09:14:37 浏览:2100
订阅该版
* 本帖最后由 二牛哥 于 2018-9-13 21:32 编辑 * 基于柿饼对平板电脑UI的微实现 一、目标: 用PersimmonUI 实现平板电脑UI的基本框架---通过按桌面图标从而跳转执行对应APP, 并制作一个图片浏览器APP, 本程序采用Persimmon UI Builder 在PC上模拟实现。 **二、方法:**** 在页面中放置card控件,在card控件中包含imagebox控件,在imagebox控件中显示图片。通过触摸事件触发页面跳转方法跳转到card页面,滑动控件浏览图片。** 三、步骤: ** 1准备素材,** 1)图标图片两张,分别是正常显示时的“显示图片”、被触摸后有力反馈视觉效果的“点击图片”,分辨率此例为86x86 2)桌面背景图片1张,分辨率根据自己的硬件情况而定,此处为800x480 3)被浏览的图片4张 2 建立工程,如下图所示: ![1.png](/uploads/201809/12/235541x6so5ghsh98hq9tq.png) 3 新建页面page1,设置页面page1属性(修改背景图),如下图所示 ![2.png](/uploads/201809/12/235626akgbejeiblmu9wub.png) 4 在页面page1中放置button控件并设置其属性,如下图所示 ![3.png](/uploads/201809/12/235641c10w7k01ew7hj891.png) 5 新建页面page2,在页面中放置card控件并设置其属性,如下图所示 ![4.png](/uploads/201809/12/235703hoqqpp99owddn9rr.png) 6 在“card”控件中添加“ImageBox”控件,如下图所示: ![5.png](/uploads/201809/12/235742wd7w57fzc4cruw45.png) 7 在“ImageBox”控件中添加图片,如下图所示: ![6.png](/uploads/201809/12/235804lay1jjwag7maa1ki.png) 8 重复执行第6与第7步3次,即再添加3张图片 9 在页面中添加按钮并设置属性,如下图所示: ![7.png](/uploads/201809/12/235822cs2hlh22y9ed88sy.png) 10 在页面中添加lable标签,并根据需要设置标签属性,此例设置标签的文字内容为“ 请滑动窗口 ”。 11 编写程序:在page1.js中输入如下代码 var page = {onButton : function(e) { console.dir(e); pm.navigateTo({url: "page2/page2"}); }, }; Page(page); 在page2.js中输入如下代码 var page = { onButton : function(e) { console.dir(e); pm.navigateBack(); }, }; Page(page); 12 在PersimmonUI Builder 工具栏中点击运行按钮运行程序,效果如下图所示,按各页面中的按钮能实现正常跳转与显示 ![10.png](/uploads/201809/13/000052ddkd75euj5she7je.png) ![11.png](/uploads/201809/13/000117qqrmsrrr1mrz7js0.png) 至此,目标达成。 拓展: 在熟悉了以上简单UI的制作后,可通过增加控件种类、灵活应用空间组合、控件隐藏与显示、后台编程等技巧设计制作更绚丽更复杂的UI,如下图所示,是一个简单展示PersimmonUI模拟windows与android风格的程序视频: [视频](http://v.youku.com/v_show/id_XMzgyMjUzNjc0OA==.html?spm=a2h0j.11185381.listitem_page1.5!2~A)-A 、 [视频](http://v.youku.com/v_show/id_XMzgyMjU0NjEwOA==.html?spm=a2h3j.8428770.3416059.1)-B ![12.png](/uploads/201809/13/001200rg01505ghz4g046n.png) 下载附件 [PhotoBrowser.rar](https://oss-club.rt-thread.org/uploads/201809/13/212814mwv7wbs1zgg3j1w9.rar)
查看更多
0
个回答
默认排序
按发布时间排序
暂无答案,快来添加答案吧
撰写答案
登录
注册新账号
关注者
0
被浏览
2.1k
关于作者
二牛哥
这家伙很懒,什么也没写!
提问
10
回答
4
被采纳
0
关注TA
发私信
相关问题
1
【PersimmonUI柿饼学习营】+ A Byte of China + 环境搭建&20W年薪广告
2
【柿饼学习营】+werrysuzhen+20W年薪作业
3
【PersimmonUI柿饼学习营】+ meetwit + 20W年薪广告&lesson01
4
【PersimmonUI柿饼学习营】+ DaZhou + 20W年薪作业+视频有彩蛋
5
【PersimmonUI柿饼学习营】+ DMY+ lesson01 20W年薪广告
6
【PersimmonUI柿饼学习营】+ Bigmagic+20W年薪广告&day01
7
【PersimmonUI柿饼学习营】+ chowguohua+年薪广告
8
【柿饼学习营】+werrysuzhen+脚本及事件学习
9
【PersimmonUI柿饼学习营】+ DaZhou+ 手把手教你做计算器
10
【PersimmonUI柿饼学习营】+ A Byte of China + 2048游戏
推荐文章
1
RT-Thread应用项目汇总
2
玩转RT-Thread系列教程
3
国产MCU移植系列教程汇总,欢迎查看!
4
机器人操作系统 (ROS2) 和 RT-Thread 通信
5
五分钟玩转RT-Thread新社区
6
【技术三千问】之《玩转ART-Pi》,看这篇就够了!干货汇总
7
关于STM32H7开发板上使用SDIO接口驱动SD卡挂载文件系统的问题总结
8
STM32的“GPU”——DMA2D实例详解
9
RT-Thread隐藏的宝藏之completion
10
【ART-PI】RT-Thread 开启RTC 与 Alarm组件
最新文章
1
【24嵌入式设计大赛】基于RT-Thread星火一号的智慧家居系统
2
RT-Thread EtherKit开源以太网硬件正式发布
3
如何在master上的BSP中添加配置yml文件
4
使用百度AI助手辅助编写一个rt-thread下的ONVIF设备发现功能的功能代码
5
RT-Thread 发布 EtherKit开源以太网硬件!
热门标签
RT-Thread Studio
串口
Env
LWIP
SPI
AT
Bootloader
Hardfault
CAN总线
FinSH
ART-Pi
USB
DMA
文件系统
RT-Thread
SCons
RT-Thread Nano
线程
MQTT
STM32
RTC
FAL
rt-smart
ESP8266
I2C_IIC
WIZnet_W5500
UART
ota在线升级
PWM
cubemx
freemodbus
flash
packages_软件包
BSP
潘多拉开发板_Pandora
定时器
ADC
GD32
flashDB
socket
中断
Debug
编译报错
msh
SFUD
keil_MDK
rt_mq_消息队列_msg_queue
MicroPython
ulog
C++_cpp
本月问答贡献
踩姑娘的小蘑菇
7
个答案
3
次被采纳
a1012112796
15
个答案
2
次被采纳
张世争
9
个答案
2
次被采纳
rv666
5
个答案
2
次被采纳
用户名由3_15位
13
个答案
1
次被采纳
本月文章贡献
程序员阿伟
9
篇文章
2
次点赞
hhart
3
篇文章
4
次点赞
大龄码农
1
篇文章
5
次点赞
RTT_逍遥
1
篇文章
2
次点赞
ThinkCode
1
篇文章
1
次点赞
回到
顶部
发布
问题
分享
好友
手机
浏览
扫码手机浏览
投诉
建议
回到
底部