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



2、创建主screen界面
指定Sscrcroll List的样式为自定义控件



备注： 为了方便演示，本工程的背景图直接用的touchgfx界面里自带的图片。

二、功能实现
1、自定义控件设置图片方法实现

1.         //.h文件中声明如下
   
2.         void setBitmap(int16_t index);

复制代码

2、实现Scroll List的虚函数

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

复制代码

3、主界面的构造函数中添加界面初始化代码

1. //别忘记增加图片头文件
   
2. #include "BitmapDatabase.hpp"
   
3. //采用参数列表初始化方式
   
4. Screen2View::Screen2View():callback(this,&Screen2View::callbackHandler)
   
5. {
   
6.         scrollList1.setItemSelectedCallback(callback);
   
7.         scrollList1.animateToItem(scrollList1.getNumberOfItems() / 2);
   
8. }

复制代码

4、回调函数的实现

1. 回调函数的声明

复制代码

1. 回调函数的实现

复制代码

1. void Screen2View::callbackHandler(int16_t index)
   
2. {
   
3.         box1.invalidate();
   
4.         switch (index)
   
5.         {
   
6.         case 0:
   
7.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_CALENDAR_48_ID));
   
8.         break;
   
9.         case 1:
   
10.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_DOCUMENT_48_ID));
    
11.         break;
    
12.         case 2:
    
13.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_FOLDER_48_ID));
    
14.         break;
    
15.         case 3:
    
16.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_INBOX_48_ID));
    
17.         break;
    
18.         case 4:
    
19.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_MOVIE_48_ID));
    
20.         break;
    
21.         default: break;
    
22.         }
    
23.         image1.invalidate();
    
24. }
    
25. 
    

复制代码