滑动列表
在TouchGFX上滑动列表有三种实现方式，scrollList和scrollWheel这两个实现方式在官方Demo中会有简单的使用教程，对于ListLayout有单独的demo在TouchGFX Designer中，这里对于简单的实现我们不做过多的分析，主要是在scrollList滑动列表基础上再加入其他的按钮进行分析一下。如果大家对于其他的类想了解的话可以参照官方给的API文档，这三种类在TouchGFX上显示的大同小异。
" {0 z' \: d" Q; {7 j* ]
滑动列表基本用法
* g1 e3 k9 v3 I* D$ y& n- [scrollList 的属性及介绍
8 |  u8 @% z9 a, _

. G) a- q% H3 V4 E3 o8 t9 _
2 [8 C7 d+ i* a7 s1 ZscrollList 的成员函数及介绍
改列表除了有TouchGFX自带的函数外还存在这一些它独有的函数，接下来给大家一一介绍。
scrollListUpdateItem(CustomContainer1& item, int16_t itemIndex)
+ O9 x* L5 |; ~2 W( C' R这个函数由于scrollList是个容器，当在容器中创建item的时候会触发这个函数机制，这个时候其中参数item代表当前更新的item，而itemIndex代表当前更新的序号。
我们现在每个item都是在容器中放置一个文本输入框，这时通过buffer更新文本内容。如下所示。
' J2 N2 F# M  l  c9 Y& E! s( {

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

复制代码

- `; R( P$ `0 v% C) T) Y" B9 z7 N这时列表上会显示如下
4 x: R2 ?! u! u! H8 X( h
* K. j) L' b8 K# K+ C, _; J9 c
4 ?% L- D% W8 g$ Y: K& q3 X
3 a  A. F5 P9 B- k/ P5 ManimateToItem（int16_t itemIndex，int16_t animationSteps = -1）
这个函数的作用是强行将中心位置移动到想要的item上，但是前提是需要知道item号。
$ y1 f- S5 D: e$ l: w9 b

( x0 j' j% `1 @虽然是个容器，但是scrollList类也有点击事件的回调函数。
setItemSelectedCallback(GenericCallback< int16_t > & callback)
7 }6 n1 v8 i/ u6 M1 z+ k' @: h设置单击选定项目时将调用的回调。
: |" n- J3 B* Z9 W( f: zsetItemPressedCallback(GenericCallback< int16_t > & callback)
设置在按下某个项目时将调用的回调。


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


  @- Z* N: s5 Z8 A9 S滑动列表数据添加
在展示之前先看一下通过TouchGFX Designer自动生成的代码。

1. class ScreenViewBase : public touchgfx::View
   5 Z, T: t* n! I% P. T2 L) q
2. {
   
3. public:
   & S1 [7 s' B$ m; U' `! h+ O
4.     ScreenViewBase();
   
5.     virtual ~ScreenViewBase() {}
   
6.     virtual void setupScreen();
   
7. 
   3 L- ~$ q  V) _7 |
8.     virtual void scrollListUpdateItem(CustomContainer& item, int16_t itemIndex)
   / k! H' r- ~, e; ~
9.     {
   ( _( u8 |6 d2 d! ^# L
10.         // Override and implement this function in Screen
    
11.     }
    : m" o! y# y3 P
12. 
    
13. protected:
    
14.     FrontendApplication& application() {
    8 |; n) s$ J. H0 T) k( I: H
15.          return *static_cast<FrontendApplication*>(Application::getInstance());
    6 V. h* p1 u$ W' j$ l! w; r
16.     }
    
17.     touchgfx::BoxWithBorder boxWithBorder;
    - v/ v: H- n' G/ m" P3 U+ o- }
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);
    ; y' Q/ l( w0 }. G6 V$ M+ _
23.     touchgfx::Callback<ScreenViewBase, DrawableListItemsInterface*, int16_t, int16_t> updateItemCallback;
    : f6 W# k9 u( y$ c" B
24. };
    

复制代码

1. #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
   ' a* p# ?' X8 y
2. #include "BitmapDatabase.hpp"
   * M9 D0 s6 u8 `/ U+ u
3. 
   % k9 G: S  ]' F, T- ^' d
4. Screen1ViewBase::Screen1ViewBase() :
   
5.     updateItemCallback(this, &Screen1ViewBase::updateItemCallbackHandler)
   
6. {
   3 i) ~( x: M9 D4 x: r
7.         //这里主要是创建一个scrollList需要配置的地方。
   9 g) Z! f* t, |% H# }3 f  F8 D
8.     scrollList.setPosition(140, 10, 200, 252);
   
9.     scrollList.setHorizontal(false);
   
10.     scrollList.setCircular(false);
    " _# w  Y+ W. R% N. q$ }' m
11.     scrollList.setEasingEquation(touchgfx::EasingEquations::backEaseOut);
    
12.     scrollList.setSwipeAcceleration(10);
    
13.     scrollList.setDragAcceleration(10);
    ! n- d7 N4 G. |6 b' L( `+ A
14.     scrollList.setNumberOfItems(15);//这里造的item是二十个，还记的上面的DrawableListItems<CustomContainer, 7>吗，为什么造了二十个却只画7个。
    3 f: y) m9 `& _" N2 U$ x2 r$ C5 o
15.     scrollList.setPadding(0, 0);
    + Q0 E# b% W5 R1 g) y0 a1 w8 v, B
16.     scrollList.setSnapping(false);
    
17.     scrollList.setDrawableSize(50, 2);
    # s0 g" g/ `! ^' A
18.     scrollList.setDrawables(scrollListListItems, updateItemCallback);
    5 v. f; h3 J* y4 H, o
19. 
    3 e4 c4 X+ f! q( K( q
20.     add(scrollList);
    
21. }
    
22. 
    
23. void Screen1ViewBase::setupScreen()
    
24. {
    ' r9 E+ o. N2 S9 y8 u  b' K8 ~
25.     scrollList.initialize();
    
26.     for (int i = 0; i < scrollListListItems.getNumberOfDrawables(); i++)
    
27.     {
    4 ]/ m( u+ s9 H" A/ ]- {  o' U
28.         scrollListListItems[i].initialize();
    0 @6 S; i9 V( G; W/ y. U
29.     }
    - U5 ^9 ?; W; x* E1 E
30. }
    
31. 
    
32. void Screen1ViewBase::updateItemCallbackHandler(touchgfx::DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex)
    6 S4 L0 B% s8 A
33. {
    
34.     if (items == &scrollListListItems)
    
35.     {
      Y+ w. U3 f4 D% q1 a6 `
36.         touchgfx::Drawable* d = items->getDrawable(containerIndex);
    1 \/ i6 B) K) s- @; J6 b
37.         TextContainer* cc = (TextContainer*)d;
    - W& E" M& c/ d5 z
38.         scrollListUpdateItem(*cc, itemIndex);
    $ b. I' s) @+ z- Y% t
39.     }
    
40. }
    

复制代码

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

( k) l( F8 w1 A5 f3 `
4 o) b- c  Q, c6 ^$ O
) [" v' x+ _# r! P1 [  o这里手动修改了第0个和第一个的开关状态
; J5 r: @7 T3 e
1 r4 N4 C! k0 f8 S; z/ s

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

& F! X- u$ H  x/ B/ y  l; E1 i
滑动列表数据更新
' F3 V+ d  R  O: _9 E& J还记得scrollListUpdateItem函数吗，我们在这个函数中写了更新，每次新载入一个item将会调用该函数，虽然item的动态创建一直是前6个，但是创建一个后调用scrollListUpdateItem时会强行将其中的文字修改为需要的内容。如果在上方的Demo中添加一个if(itemIndex<7)则大家就会看见想要的结果了。
到这里也就是说checkbox button想要保持你所点击的状态，那么大家就需要一个数组进行维护这些item的状态。所以如果大家需要的是一个复杂的item列表这里不给大家推荐这个item，如果只是一个图片查看器之类的list用这个scrollList还是可行的。复杂的item推荐大家使用listLayout这个容器进行开发。
4 b- V  A* E1 q3 O) X3 Q5 r
0 a8 A8 z0 D- e2 X
总结
# p3 `5 A- F) ^4 a: J# g3 l8 ]* [这里给大家展示了scrollList，虽然有些短板，但是对于MCU的GUI开发还是比较好用的，在touchGFX上如果需要简单的使用，那么这个scrollList还是可以满足大家的，这里可以看出除了这个控件外，其实TouchGFX最大的优势是可以自己组装出复杂的控件。对比于高级语言的GUI工具来说还是比较有代表性的一种ui搭建模式。
————————————————
* E2 H' h7 E( r, B) I版权声明：空闲的程序员

# }3 k5 N6 Z( Y. {0 ?