EEPW论坛

【前言】

在前面的时钟篇，我分享了如何制作一个时钟，准备写一个时钟设置的功能，翻看了文档，准备使用滚轮组件（scrollWheel）来设置日期时间，折腾了半天，分享一下如何设置的经验。

【知识储备】

1、自定义容器，制作scrollWheel，需要用到自定容器，需要先学习一下如何制作。

2、scrollWheel的滚动事件，这也需要到官方文档中学习。

3、列程，查看官方文档，还是有些不明白，最好是官方的示例：

创建这个示例后，可以学习到如何设置，以及用户代码的编写。

【步骤1】

1、创建一个空白工程。

2、创建两个自定义容器，一个为scrollWheel后面的数据显示（也可以理解为被选，可以滚动的数字）的容器，一个为被选中容器，两种字体颜色最好不一样，并且选中的字体相对大一些，并且颜色亮一些。

3、在主屏幕中添加scrollWheel组件，然后添加刚才的两个自定义容器，如下图所示：

到此界面设计就完成了。

【用户代码添加】

1、自定义容器代码添加，首先给两个容器都添加一个uptext函数，用于更新显示，文件为TouchGFX\gui\src\containers\目录下面：

void textCenterContainer::updateText(int16_t value)
{
    Unicode::snprintf(textBuffer, TEXT_SIZE, "%d", value);
    text.invalidate();
}

void textContainer::updateText(int16_t value)
{
    Unicode::snprintf(textBuffer, TEXT_SIZE, "%d", value);
    text.invalidate();
}

同时需要在对应的.hpp中添加函数的定义。

2、页面显示代码添加，在Screenview.cpp中添加两个函数：

void Screen1View::scrollWheelUpdateItem(textContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}
void Screen1View::scrollWheelUpdateCenterItem(textCenterContainer& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}

这两个函数为当滚轮选中后，实时更新显示状态。

同时将这两个函数添加到.hpp中。

【实现效果】

滑动滚轮后，可以实时的显示滚动后的效果了。

当然最后，我们需要把滚动滑动后，释放时的数据传递给变量，这就需要用到释放后的回调函数，下面将继续添加显示功能。

【功能实现】

1、添加一个text控件用于显示实时效果：

2、在代码中添加函数如下：

先书写回调函数如下，其功能是把对应的序列写入新的text中：

void Screen1View::scrollWheelAnimateToHandler(int16_t itemSelected)
{
    Unicode::snprintf(textArea1Buffer, 10, "%d", itemSelected);
    textArea1.invalidate();
}

然后把这个回调函数注册进滚轮的释放事件里：

Screen1View::Screen1View():
scrollWheelAnimateToCallback(this, &Screen1View::scrollWheelAnimateToHandler)
{

}

并且在屏幕载入是注册好：

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
    scrollWheel.setAnimateToCallback(scrollWheelAnimateToCallback);
    // Animates the scroll wheel to the 15th item//+
    scrollWheel.animateToItem(15);
}

同时把对应的函数写入.hpp中声明：

#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui_generated/containers/textContainerBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void scrollWheelUpdateItem(textContainer& item, int16_t itemIndex);
    virtual void scrollWheelUpdateCenterItem(textCenterContainer& item, int16_t itemIndex);
protected:
    Callback<Screen1View, int16_t> scrollWheelAnimateToCallback;
    void scrollWheelAnimateToHandler(int16_t itemSelected);
};

#endif // SCREEN1VIEW_HPP

【实验效果】

【总结】

TouchGFX给出了非常多优秀的组件，方便用户实现交互功能，使用的教程、示例也非常多，在此记录一下，一来加深自己学习的效果，二来希望对有此需求的大佬们有帮助，如果有不之处，请多指教。