TouchGFX使用教程（七）

滑动列表

在TouchGFX上滑动列表有三种实现方式，scrollList和scrollWheel这两个实现方式在官方Demo中会有简单的使用教程，对于ListLayout有单独的demo在TouchGFX Designer中，这里对于简单的实现我们不做过多的分析，主要是在scrollList滑动列表基础上再加入其他的按钮进行分析一下。如果大家对于其他的类想了解的话可以参照官方给的API文档，这三种类在TouchGFX上显示的大同小异。

滑动列表基本用法

scrollList 的属性及介绍

属性名	说明
Name	小部件的名称。名称是TouchGFX Designer和代码中使用的唯一标识符。
Type	指定ScrollList是垂直放置还是水平放置
Location	X和Y指定窗口小部件相对于其父窗口的左上角。W和H指定窗口小部件的宽度和高度。可见指定窗口小部件的可见性。使小部件不可见也将禁用通过屏幕与小部件的交互。
Item Template	指定将哪个CustomContainer用作模板。指定ScrollList中存在的项目数。
Animation	缓解和缓解选项指定缓动方程用于动画。指定滚动时的加速度。
Mixins	Draggable指定小部件在运行时是否可拖动。ClickListener指定在单击时小部件是否发出回调。MoveAnimator指定小部件是否可以对X和Y值进行动画处理。

scrollList 的成员函数及介绍
改列表除了有TouchGFX自带的函数外还存在这一些它独有的函数，接下来给大家一一介绍。
scrollListUpdateItem(CustomContainer1& item, int16_t itemIndex)
这个函数由于scrollList是个容器，当在容器中创建item的时候会触发这个函数机制，这个时候其中参数item代表当前更新的item，而itemIndex代表当前更新的序号。
我们现在每个item都是在容器中放置一个文本输入框，这时通过buffer更新文本内容。如下所示。

void Screen1View::scrollListUpdateItem(CustomContainer& item, int16_t itemIndex)
{
    item.setValue(itemIndex);
}

这时列表上会显示如下

animateToItem（int16_t itemIndex，int16_t animationSteps = -1）
这个函数的作用是强行将中心位置移动到想要的item上，但是前提是需要知道item号。

虽然是个容器，但是scrollList类也有点击事件的回调函数。
setItemSelectedCallback(GenericCallback< int16_t > & callback)
设置单击选定项目时将调用的回调。
setItemPressedCallback(GenericCallback< int16_t > & callback)
设置在按下某个项目时将调用的回调。

说到这里终于要进入正题了。现在scrollList上面只有显示的文本没有按钮，例如checkbox button，如果加上button这时应该如何操作呢，接下来会给大家展示。

滑动列表数据添加

在展示之前先看一下通过TouchGFX Designer自动生成的代码。

class ScreenViewBase : public touchgfx::View
{
public:
    ScreenViewBase();
    virtual ~ScreenViewBase() {}
    virtual void setupScreen();

    virtual void scrollListUpdateItem(CustomContainer& item, int16_t itemIndex)
    {
        // Override and implement this function in Screen
    }

protected:
    FrontendApplication& application() {
         return *static_cast<FrontendApplication*>(Application::getInstance());
    }
    touchgfx::BoxWithBorder boxWithBorder;
    touchgfx::ScrollList scrollList;
    //这里有个有意思的地方，大家可以带着疑问看下面的base.cpp文件
    touchgfx::DrawableListItems<CustomContainer, 7> scrollListListItems;
private:
    void updateItemCallbackHandler(DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex);
    touchgfx::Callback<ScreenViewBase, DrawableListItemsInterface*, int16_t, int16_t> updateItemCallback;
};

#include 
#include "BitmapDatabase.hpp"

Screen1ViewBase::Screen1ViewBase() :
    updateItemCallback(this, &Screen1ViewBase::updateItemCallbackHandler)
{
	//这里主要是创建一个scrollList需要配置的地方。
    scrollList.setPosition(140, 10, 200, 252);
    scrollList.setHorizontal(false);
    scrollList.setCircular(false);
    scrollList.setEasingEquation(touchgfx::EasingEquations::backEaseOut);
    scrollList.setSwipeAcceleration(10);
    scrollList.setDragAcceleration(10);
    scrollList.setNumberOfItems(15);//这里造的item是二十个，还记的上面的DrawableListItems吗，为什么造了二十个却只画7个。
    scrollList.setPadding(0, 0);
    scrollList.setSnapping(false);
    scrollList.setDrawableSize(50, 2);
    scrollList.setDrawables(scrollListListItems, updateItemCallback);

    add(scrollList);
}

void Screen1ViewBase::setupScreen()
{
    scrollList.initialize();
    for (int i = 0; i < scrollListListItems.getNumberOfDrawables(); i++)
    {
        scrollListListItems[i].initialize();
    }
}

void Screen1ViewBase::updateItemCallbackHandler(touchgfx::DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex)
{
    if (items == &scrollListListItems)
    {
        touchgfx::Drawable* d = items->getDrawable(containerIndex);
        TextContainer* cc = (TextContainer*)d;
        scrollListUpdateItem(*cc, itemIndex);
    }
}

对于touchgfx来说scrollList是动态分配的item，也就是说现在显示几个就单独画几个，所以说窗口大小只能显示6个所以将反复的画其中的前六个。
为了展示这个地方我在每个item上加入了checkbox button。接下来会看见神奇的地方。

这里手动修改了第0个和第一个的开关状态

但是第7个和第8个也同时跟随变化，因为我的窗口在创建scrollList时，可以创建7个，刚好是0-6，但是第7个是重复了第0个的checkbox button的状态，以此类推则出现了以下现象。这时有人就要问了，那前方的文字为什么不是0-6的循环显示呢？接下来会给大家答案。

滑动列表数据更新

还记得scrollListUpdateItem函数吗，我们在这个函数中写了更新，每次新载入一个item将会调用该函数，虽然item的动态创建一直是前6个，但是创建一个后调用scrollListUpdateItem时会强行将其中的文字修改为需要的内容。如果在上方的Demo中添加一个if(itemIndex<7)则大家就会看见想要的结果了。
到这里也就是说checkbox button想要保持你所点击的状态，那么大家就需要一个数组进行维护这些item的状态。所以如果大家需要的是一个复杂的item列表这里不给大家推荐这个item，如果只是一个图片查看器之类的list用这个scrollList还是可行的。复杂的item推荐大家使用listLayout这个容器进行开发。

总结

这里给大家展示了scrollList，虽然有些短板，但是对于MCU的GUI开发还是比较好用的，在touchGFX上如果需要简单的使用，那么这个scrollList还是可以满足大家的，这里可以看出除了这个控件外，其实TouchGFX最大的优势是可以自己组装出复杂的控件。对比于高级语言的GUI工具来说还是比较有代表性的一种ui搭建模式。