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

滑动列表基本用法
scrollList 的属性及介绍



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

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

复制代码

这时列表上会显示如下



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自动生成的代码。

1. class ScreenViewBase : public touchgfx::View
   
2. {
   
3. public:
   
4.     ScreenViewBase();
   
5.     virtual ~ScreenViewBase() {}
   
6.     virtual void setupScreen();
   
7. 
   
8.     virtual void scrollListUpdateItem(CustomContainer& item, int16_t itemIndex)
   
9.     {
   
10.         // Override and implement this function in Screen
    
11.     }
    
12. 
    
13. protected:
    
14.     FrontendApplication& application() {
    
15.          return *static_cast<FrontendApplication*>(Application::getInstance());
    
16.     }
    
17.     touchgfx::BoxWithBorder boxWithBorder;
    
18.     touchgfx::ScrollList scrollList;
    
19.     //这里有个有意思的地方，大家可以带着疑问看下面的base.cpp文件
    
20.     touchgfx::DrawableListItems<CustomContainer, 7> scrollListListItems;
    
21. private:
    
22.     void updateItemCallbackHandler(DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex);
    
23.     touchgfx::Callback<ScreenViewBase, DrawableListItemsInterface*, int16_t, int16_t> updateItemCallback;
    
24. };
    

复制代码

1. #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
   
2. #include "BitmapDatabase.hpp"
   
3. 
   
4. Screen1ViewBase::Screen1ViewBase() :
   
5.     updateItemCallback(this, &Screen1ViewBase::updateItemCallbackHandler)
   
6. {
   
7.         //这里主要是创建一个scrollList需要配置的地方。
   
8.     scrollList.setPosition(140, 10, 200, 252);
   
9.     scrollList.setHorizontal(false);
   
10.     scrollList.setCircular(false);
    
11.     scrollList.setEasingEquation(touchgfx::EasingEquations::backEaseOut);
    
12.     scrollList.setSwipeAcceleration(10);
    
13.     scrollList.setDragAcceleration(10);
    
14.     scrollList.setNumberOfItems(15);//这里造的item是二十个，还记的上面的DrawableListItems<CustomContainer, 7>吗，为什么造了二十个却只画7个。
    
15.     scrollList.setPadding(0, 0);
    
16.     scrollList.setSnapping(false);
    
17.     scrollList.setDrawableSize(50, 2);
    
18.     scrollList.setDrawables(scrollListListItems, updateItemCallback);
    
19. 
    
20.     add(scrollList);
    
21. }
    
22. 
    
23. void Screen1ViewBase::setupScreen()
    
24. {
    
25.     scrollList.initialize();
    
26.     for (int i = 0; i < scrollListListItems.getNumberOfDrawables(); i++)
    
27.     {
    
28.         scrollListListItems[i].initialize();
    
29.     }
    
30. }
    
31. 
    
32. void Screen1ViewBase::updateItemCallbackHandler(touchgfx::DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex)
    
33. {
    
34.     if (items == &scrollListListItems)
    
35.     {
    
36.         touchgfx::Drawable* d = items->getDrawable(containerIndex);
    
37.         TextContainer* cc = (TextContainer*)d;
    
38.         scrollListUpdateItem(*cc, itemIndex);
    
39.     }
    
40. }
    

复制代码

对于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搭建模式。
————————————————
版权声明：空闲的程序员