RT-Thread-柿饼UI入门课程第一周作业 --- 笔记（作业+附加题）RT-Thread问答社区

柿饼UI入门课程第一周作业 --- 笔记（作业+附加题）

发布于 2020-12-02 00:03:05 浏览：721 订阅该版

[tocm]

### 第一周作业
按照第一周第五节的课程内容实现课程演示的demo。
由于照着做比较简单，就直接发视频了
[《（YGL1024）柿饼入门课第一次作业》](https://www.bilibili.com/video/BV1xr4y1c7qP/)
### 附加题
#### 一、题目要求
完成下图的应用制作，范进中举复制群文件内的范进中举.txt内的内容。
![<img src="https://qunhwfile-30054.sz.gfp.tencent-cloud.com/20201127/f4wd7q_5fc0a5dea079b5.69857091.jpeg" alt="img"  />](https://oss-club.rt-thread.org/uploads/20220714/52312df450c48aa30959b00d210019a8b99fa8a0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
#### 二、实现过程
##### 2.1、整体思路
整体的框架是在一个`page`中放入三个`button`控件（负责控制三个显示界面的切换）和一个`card`控件（该控件包含三个panel控件，负责的是的三个界面的布局），工程布局如下图所示：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/3728ed85270657257ecafe25c268155d7d3d9e99.png)
效果如下图所示：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/b9866f59832ddd9d3b2db61d946c1ce8902f855e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)

##### 2.2、实现《范进中举》文本的浏览功能
该功能的实现可以使用`panel`(容器)+`listctrl`(增加上下滑动的功能)+`multitexbox`（存放文本）。
如何实现，参考官方这篇[《MultiTextBox的使用》。](https://www.rt-thread.org/document/persimmon/site/control/MultiTextBox/)
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/9aee1efa801a5bc7297a87a76af67f09f5f062cb.png)
为panel选择一张羊皮卷样式的背景，有一点书的feel了。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/ca6aef881eb511afa5830a81b6a0d6f2bab20160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
##### 2.3、实现《电子相册》
如下工程结构所示：使用`panel`+`card`+`imagebox`(放图片)+`DotIndicator`(用来指示图片位置)实现，可以参考官方的这篇文章来实现：[《Card的使用实用》](https://www.rt-thread.org/document/persimmon/site/control/Card/)
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/8d4f7ccf080d5fdbfab43d84147549a90bcc7c7b.png)
具体到操作，图片素材选择的是平时玩的手游《王者荣耀》（虽然只是个菜鸡》....）,图片处理还算简单，用软件裁剪成自己要的尺寸（使用的是`2345看图王`）就行了。最麻烦的是做的那个电子相框，因为要把框里面和外面的部分镂空，需要处理一下，可是电脑没有Photoshop（有也不会用），就找了个在线的PS网站（强推[https://www.photopea.com/](https://www.photopea.com/)）花了不少时间强行学习了一波，虽然弄的很粗糙，好歹还能用。如下图所示： 
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/d268ab370244256c5fe91fd299f2c2f64c6f2d5a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
##### 2.4、实现《敬请期待功能》
没想到啥创意，就宣传一下柿饼UI吧，用起来入手很快。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/9e25dbc36bc69b918610e96e182ebd6f8e3f978e.png)
实现的功能有动图显示（`AnimatedImage`）和按键触发图片显示功能（触碰按键后显示柿饼UI入门课程的QQ群二维码）。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/b9956d4e3cefc239c0222eeb283a83ca9960bf6a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
##### 2.5、稍微优化一下+JS代码书写
主要是颜色的选择，还有跳转的逻辑的实现，还增加了初始页面（`2020 RT-thread开发者大会`的海报）。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/054ca0d9ac2b42b2e7ba40d6468d05ebefab818e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
#### 三、效果展示
- 初始界面
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/01fa2d31fae6af7ba1c51956788a67abe6b451a3.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
- 视频演示（上传到哔哩哔哩平台）
[《（YGL1024）柿饼入门教程第一周作业附加题》](https://www.bilibili.com/video/BV17K4y177BH/)