19.RT-thread项目实战--TouchGFx列表滑动效果

我们在wifi扫描的时候或者数据列表显示的时候，都需要滑动列表功能。本节参考官方demo先实现官方的demo，然后再进行扩展，实现自己的功能。

效果可以下载官方demo自己查看一下。

推荐博客：

https://blog.csdn.net/dejun_qiu/article/details/104963834

一.TouchGFx Designer中设计布局

1.添加自定义组件，滚动条元素

自定义控件中，一个背景图片，一个图标，一个文本。

2.添加列表控件，在屏幕中添加背景图片、Scroller Container、List Layout，并在左侧对象树里把List Layout拖到Scroller Container上

3.设置Scrollable Container控件

4.设置listLayout控件（注意那个方向设置，不然滑动方向就异常了）

列表布局容器(List Layout) 是一个特殊的容器，添加进去的控件会被水平或竖直地相邻排列起来，并且会自动调整容器大小。
 

5.新建文本资源，注：这里添加的文字就是对应我们列表显示的文字。

6.添加图片资源（程序加载的时候也要对应好）

7.touchgfx无法在Designer里直接向List Layout控件里添加控件，我们通过程序向类表中添加滚动条

8.加载程序，打开我们的源码文件：

打开程序后，先查看一下初始化界面的加载情况。

打开这个文件，这个对应我们自定义组件的那个基类

这是滚动条初始的状态，设置了颜色，图标，文字等。

9.打开对应的CustomListElement.cpp

添加设置滚动条的函数：

10.#include <gui/containers/CustomListElement.hpp>文件中包含这个函数

11.打开对应的界面的操作函数

添加函数

#include <gui/menu_2_2_screen/menu_2_2View.hpp>
#include "BitmapDatabase.hpp"//添加图片文件
#include <texts/TextKeysAndLanguages.hpp>

menu_2_2View::menu_2_2View()
{
    listElements[0].setupListElement(Bitmap(BITMAP_ICON0_ID), T_SINGLEUSEID9);
    listElements[1].setupListElement(Bitmap(BITMAP_ICON1_ID), T_SINGLEUSEID10);
    listElements[2].setupListElement(Bitmap(BITMAP_ICON2_ID), T_SINGLEUSEID11);
    listElements[3].setupListElement(Bitmap(BITMAP_ICON3_ID), T_SINGLEUSEID12);
    listElements[4].setupListElement(Bitmap(BITMAP_ICON4_ID), T_SINGLEUSEID13);
    listElements[5].setupListElement(Bitmap(BITMAP_ICON5_ID), T_SINGLEUSEID14);
    listElements[6].setupListElement(Bitmap(BITMAP_ICON6_ID), T_SINGLEUSEID15);
    listElements[7].setupListElement(Bitmap(BITMAP_ICON7_ID), T_SINGLEUSEID16);
    listElements[8].setupListElement(Bitmap(BITMAP_ICON8_ID), T_SINGLEUSEID9);
    listElements[9].setupListElement(Bitmap(BITMAP_ICON9_ID), T_SINGLEUSEID9);

    for (uint8_t i = 0; i < numberOfListElements; ++i)
                listLayout1.add(listElements[i]);

}

void menu_2_2View::setupScreen()
{
    menu_2_2ViewBase::setupScreen();
}

void menu_2_2View::tearDownScreen()
{
    menu_2_2ViewBase::tearDownScreen();
}

 

注：如果控件排列的方向不对，可以在Touchgfx Designer里修改List Layout的属性。South代表竖直排列，East代表水平排列。

 

 

滚动列表已经实现了，但是这种效果，还没法满足我们wifi扫描和数据显示的要求，需要进一步的优化，还需要继续探索。