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

柿饼UI入门课程第一周作业（基础+附加题）

发布于 2020-12-02 16:02:07 浏览：730 订阅该版

[tocm]

全文小于一千字，阅读花费时间大概三分钟
## 基础

只需要按照视频里面就可以做到90%。但是，dotIndicator 是点指示器控件需要自己研究一下。使用帮助文档非常有必要看，研究了好一会才知道如何看帮助文档。
[代码下载](https://gitee.com/zhaonianzhu/persimmon-uihomework.git)
[基础作业](https://www.bilibili.com/video/BV1EK4y1f7uB)
[附加作业](https://www.bilibili.com/video/BV1kA411x7q3)

### 如何看帮助文档

帮助文档分为三块

1. API帮助
2. 控件帮助
3. 设计器使用帮助及反馈

#### API帮助

这部分主要是触发的时候来找，比如按键，触发时候是什么样子的，值是多少之类的。

#### 控件帮助

这部分主要是控件的属性之类的，就是拖到显示的东西叫控件，可以在这里面找**setData 功能**因为UI交互设计主要是设置值的变化。

#### 设计器使用帮助及反馈

主要教UI的操作，应该先看这个，再看其他的。

### 举个例子

本次视频中没有代码的`dotIndicator` 是点指示器控件。

目标：实现点的切换

**控件帮助** 中 找到 setData

| 示例代码                                      | 注解                                                         |
| --------------------------------------------- | ------------------------------------------------------------ |
| `this.setData({dotIndicator1 : 1})`           | 将 `id` 为  `dotIndicator1` 的 DotIndicator 控件的选中点置为  1，即第2个点 |
| `this.setData({dotIndicator1 : {value : 1}})` | 将 `id` 为  `dotIndicator1` 的 DotIndicator 控件的选中点置为 1，即第2个点 |

这里的数字就是切换的点，在代码中进行改变这个值就能达到实现点切换的目的。所以本次基础课程中，只需要在card变换函数里面将card 数值用setdata就可实现card变化时点也跟着一起变化

## 附加

[![D5hmlV.png](https://s3.ax1x.com/2020/12/02/D5hmlV.png)](https://imgchr.com/i/D5hmlV)

### 目标

- 实现点击范进中举 右边部分展示可滑动文本
- 点击相册 右边可滑动照片
- 点击其他 展示个人设计部分

### 架构

[![D5xXDJ.png](https://s3.ax1x.com/2020/12/02/D5xXDJ.png)](https://imgchr.com/i/D5xXDJ)

上来就映进眼帘的这画面要切换，我只会用 card 这个东西了，我在帮助手册怎么也没找到能跳转panl的东西，好像是存在的，不过那样也过于复杂了。现在用card 下面放3个panl 点击按键时候切换card 值就实现了画面的切换。**card可选择滑动方向**

#### 范进中举

card第一个panl 用来放文本，选择的是MultiTextBox，把高度调很大就能放下很多文本并且自己有滑动功能。但是！我的就是不能滑动，并且和card滑动手势还要奇妙的冲突。在群中大佬指点，panl方放listctrl ，listctrl下放文本就可以进行滑动了，事实确实如此。

让我想起了以前玩的触屏学习机，也就是这个功能，那么我们选点好看图标就好了，本次选用的黑白图标，按钮按下去的图片是黑白反色。文本背景色是在中国传统色选择的比较暗的颜色，保护视力。

#### 相册