【经验分享】stm32基于TouchGFX的GUI开发（六）：(Scroll List)滚动列表的使用

[复制链接]

STMCU小助手发布时间：2022-3-10 21:51

技术帖
文章封面:
文章简介:	stm32基于TouchGFX的GUI开发（六）：(Scroll List)滚动列表的使用

stm32基于TouchGFX的GUI开发（六）：(Scroll List)滚动列表的使用最终效果图：

前言

本章我们将介绍Scroll List控件的使用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、界面布局以及资源添加

1、创建自定义控件

[5])EC~IXV4L)DRC]FCPB42.png

2、创建主screen界面

指定Sscrcroll List的样式为自定义控件

ZNP338%M91RLYEDZZ$DO}GG.png

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

二、功能实现

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

复制代码

XULGYM7MJTA12@0X[%UA017.png

2、实现Scroll List的虚函数

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

`[OQ(HZ@US7TIF69[VB3(D1.png

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

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

复制代码

4、回调函数的实现

回调函数的声明

}JZ3AN}Q}J]ZTRQJR0$)_)H.png

回调函数的实现

void Screen2View::callbackHandler(int16_t index){ box1.invalidate(); switch (index) { case 0: image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_CALENDAR_48_ID)); break; case 1: image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_DOCUMENT_48_ID)); break; case 2: image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_FOLDER_48_ID)); break; case 3: image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_INBOX_48_ID)); break; case 4: image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_MOVIE_48_ID)); break; default: break; } image1.invalidate();}

复制代码