一、界面布局以及资源添加
1、创建自定义控件

5 n- b) Z) X" G; j

2、创建主screen界面
指定Sscrcroll List的样式为自定义控件
4 S4 y0 n/ O# H; F9 k( a" N
8 P/ Y$ b' U0 ?9 k8 `" v' M

' I5 l. P+ j# U8 ~备注： 为了方便演示，本工程的背景图直接用的touchgfx界面里自带的图片。
$ {9 a, l# f+ G
$ g1 Y; z4 a3 x% Z2 T' F5 J+ ~二、功能实现
( v5 U3 b( O' h/ ]. p3 y1、自定义控件设置图片方法实现

1.         //.h文件中声明如下
   ; X, r. ?5 U8 ~1 Q! N7 o: h
2.         void setBitmap(int16_t index);

复制代码

; k2 M( q/ w: o. z2 A
& C8 ]" S+ P; G  m" h2 U
2、实现Scroll List的虚函数

1. 下图是Scroll List的虚函数，每次更新item时会调用

复制代码

9 s1 N% ^; f# o2 Z+ [+ a
- D; V% a$ |6 d. n- _+ h* w, e
# j; V' @! w( v" U  @+ h8 N3、主界面的构造函数中添加界面初始化代码

1. //别忘记增加图片头文件
   
2. #include "BitmapDatabase.hpp"
     i. F5 q8 Q/ e
3. //采用参数列表初始化方式
   
4. Screen2View::Screen2View():callback(this,&Screen2View::callbackHandler)
   
5. {
   
6.         scrollList1.setItemSelectedCallback(callback);
   ' \  `  t. ^7 Q* b# Y# h2 }
7.         scrollList1.animateToItem(scrollList1.getNumberOfItems() / 2);
   
8. }

复制代码

4、回调函数的实现
: q. R8 k  [$ U' K/ M4 r! \* z; T

1. 回调函数的声明

复制代码

, f. G  V0 ^9 X

1. 回调函数的实现

复制代码

1. void Screen2View::callbackHandler(int16_t index)
   + h8 I9 p( b) m" A
2. {
   * Y- _4 h5 e( C5 B7 V! w. V* d9 D
3.         box1.invalidate();
   7 I7 [! c; f+ U! [
4.         switch (index)
   : j+ D) F  A1 H8 N! _1 w
5.         {
   " h3 D( o3 B  O0 s
6.         case 0:
   
7.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_CALENDAR_48_ID));
   3 s7 w5 y' s3 N* y' H
8.         break;
   * |6 @$ H* U$ u- y# e0 S
9.         case 1:
   - A: F& s1 p% t8 o- N/ m4 P
10.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_DOCUMENT_48_ID));
      Q$ Q- A1 R# d0 M! Z, C
11.         break;
    
12.         case 2:
    
13.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_FOLDER_48_ID));
    
14.         break;
    : a, ^4 c9 g7 k! |1 g% v
15.         case 3:
    8 l( }1 V: W# H
16.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_INBOX_48_ID));
    
17.         break;
    
18.         case 4:
    % M8 ^# O1 ^* B" w  @
19.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_MOVIE_48_ID));
    
20.         break;
    ( }; R& W5 j( i$ O0 Z
21.         default: break;
    2 B' f+ Z; i7 u- C
22.         }
    9 x% E; A" M: z$ V
23.         image1.invalidate();
    
24. }
    
25. 
    - [' v  I8 \; M

复制代码