8.TouchGFX界面应用之自定义容器

TouchGFX的支持自定义组件，类似于你自定义一个函数然后给其他调用，这里就是定义一个组件给其他调用。定一个小目标，我们这一节自定义做一个调色板。

在添加屏幕旁边自定义组件（自定义容器）里面。

调色板以下图作为参考，颜色模式是RGB888，需要3个滑动块，以及一些字样。

做3个滑块作为RGB三种颜色的输入量，滑块是可以设置滑过去和没滑过去的颜色的，但是必须是以图片的形式，所以你如果想做的美观一点的话需要提前做大量的图或者使用UI，图片的数量也决定的所使用内存的数量，如果可以图片尽可能的小来节省内存。取好对应的名字，设置最小值为0，最大值为255，开始值设置为0;

放置几个字体，右边三个字是需要根据滑块的位置来改变的的，所以我们设置成通配符，

放置一个块作显示RGB对应的颜色，第一个和第二个都可以选择，第一个不带边框，第二个带边框，我选择第二个，把边框设置为0，颜色默认黑色，可以不设置为黑色，根据前面滑块的开始值来修改颜色，R =0，G=0，B=0为黑色。

摆好，如果认为我这样不好看，你也可以安装自己喜欢样子摆，没有添加背景并且显示背景是灰色和白色小方块说明背景是透明的。

这样自定义组件（自定义容器）就做好了？并没有，我i们只是设置好了图形是这样但是我们没有将他们关联起来，在自定义组件（自定义容器）的互动里面添加3个互动，分别对应3个滑块。

这样图形化的界面完成了，我只需要实现3个函数就可以了。在屏幕将自定义的组件（容器）放上去，然后生成代码，找到CustomContainer1Base.hpp和CustomContainer1.hpp两个文件

在CustomContainer1Base.hpp中有3个滑块的互动函数。

我们将他拷贝到CustomContainer1.hpp的CustomContainer1中，声明一个变量来作为颜色值，上面我们说到颜色模式是RGB888的，但是我们屏幕使用的是RGB565的所以我们需要进行转换，如果你使用的也是RGB888那么你将重新实现颜色转换，而且uint16_t也保存不了了，需要更高位数的变量如uint32_t。颜色转换后还要将滑块的值显示出来，然后将转换的颜色显示送给box显示出来。

启动模拟器

如果需要在STM32上面显示需要添加自定义容器的文件，CustomContainer1.cpp等等。不然编译报错说未定义符号。