火山PC从零开始学炫彩UI  第十二课

火山PC从零开始学炫彩UI 第十二课

作者：灰羊羊
一、本文学习内容

本文我们来学习列表的知识，上一节课程，我们学习了列表框（ListBox）的简单知识
在上一节课中，我们在列表框的模板里面放置了两个形状文本以及一个按钮。做出来的效果是我们的列表框在创建每一项的时候。都会以两个形状文本以及一个按钮为一项来创建。
其实关于列表框，您还可以把它设计的更好看，更完美。您在设计好之后，您可以对列表框背景样式做一下改变。本上一节课，我们并没有改变。我们先学习最基础的使用方法。
本文我们来学习列表（List）的使用方法。
列表List这里和mfc里面的超级列表的效果是一样的。不过炫彩这里使用虚表的特性，可以使程序运行的更快。同时您可以随意的创建列表LIST的模板来达到您要的效果。总而言之，炫彩的列表扩展性更好一点。

二、界面设计UI流程
打开我们以前用到的炫彩设计器项目。
我们从开始到现在一直用到的都是一个设计器项目，我推荐您从头开始按照教程一步步操作。这样子您就不用在每节课后面下载附件，然后复杂的替换了。
先来看一下我们上节课设计器里面的最终样式。如下图示，我们在用户中心这里面放置了一个列表框的组件。

本文开始我们在第二个界面，也就是会员权益这个布局里面。我们要在这个里面放置列表。首先我们记得102这个ID是会员权益界面的布局ID。我们要让他的眼睛点亮，让他显示出来。同时要保证下面的103和104不显示。在会员权益界面，把标签移到左上角，让它不影响我们布局。

在右边的工具栏里面我们选择列表。然后把它放置在我们的布局102这个界面里面。注意，这里不能直接放在窗口布局里面，我们的列表的父组件不能是窗口。而且是我们的布局。这样子相当于套娃的方式。

好了，学习过上节课，您应该知道我们这里的列表，它的精髓在于什么地方呢？在于他的模板，放置一个组件实在是太简单了。而要设计他的模板，这才是难点

首先在设计器里面，我们右键点击项目，选择新建文件。

在弹出的窗口中，我们选择列表项模板。他的名字设置为List.xml，这里您可以不加后缀，它会自己加上。

下面双击打开我们新建立的这个模板文件。这里你会发现在右边它分成了两个部分。中间有一个空白的部分用作区分。
这里上半部分，它是一个列表头的模板。下面的部分呢，它是列表项的模板。
如果您玩过， MFC的超级列表。您应该知道它里面有一个列表头。可以理解为是每一列的标题那一栏。这里炫彩需要设置列表头的模板，也需要设置列表项的模板。

下面我在这个模板里面，标了四个序号。1、2，这是列表头的部分，3、4这是列表项的部分。
如果您使用下面这个列表模板应用在列表里面。那么他最多可以允许创建两列。创建多少项呢？也就是多少行，这里是没有限制的。

下面我来画张图，简单看一下这个列表是怎么应用模板的？
这里我们假设创建了一个只有两列的超级列表，他们的列表头就是我们上图的1、2。每一项都是按照一个3，一个4来创建。

纸上得来空觉浅，绝知此事要躬行。下面我们来动手试一下。
我们这个默认的模板他在列表头里面有两列，所以说这个模板创建的最多列就是两列。
这样子太少了，我们在空白的地方右键点击，然后选择列表头添加项，这样子就会再加一个列表头的列

效果如下，但是现在不平均了，我们的列表头最多创建三个列。而我们的列表项里面的这个模板最多是有两个。
那么我们用同样的方法。也给列表项再加一个。

下面呢我们选中列表头第一个项里面的文本组件。这个组件绑定的名字是name1，这里的绑定和上面的列表框里面的绑定是一样子的。模板里面每一个组件都要绑定一个名字。
他那里看一下布局高度是填充父，就是说他的父组件是多高，他就多高。宽度是自动的，我们在这里给他设置为填充父

然后我们设计这个文本组件的对齐方式。在右边属性里面找到文本对齐，点击齿轮选择居中，您看这里非常的人性化，文本对齐使用的是图像的描述。这中间这个文本处于组件的这中心位置，所以说它就是居中。

确定，看一下效果，我们这样子的列表投的第一个列里面。就是一个文本组件，他占据所有的位置，并且文本是居中的方式。

然后我们在列表头的第二个列模板里面。再放置一个形状图片吧。
在右边工具栏里面点击形状图片，然后在列表头第二框里面个里面放上它。我们放置的这个图片您会发现。他非常大，而且他的布局没有设置填充或者是自动，现在是默认的。

我们将这个形状图片的布局高度改为填充父。布局宽度改为自动。这样子你会发现图片缩成一个小条。我们如果没有左边的导航，甚至都选中不了这个组件。没有关系，这是因为我们没有在里面放置图片。所以说他没有显示。到我们在里面放置出图片上，它会改变自己的大小。

下面来给这个图片绑定一个名字。这里绑定名字的属性在最下面呢。我们这里给他写一个name3。
这里有我们要认识到，这个name3并不是指的是第三列。我们的name2和name3都在同一列上。这个图片左边的文本绑定的值是name2

好了，这里我们可以简单现在预览一下，我们可以预览一下，如果在这个图片里面放置一个具体的图片会怎么着？
按照下面的流程，我们先选中图片，在右边属性里面找图片，然后点右边的齿轮，选择一个小图标放上去。

来看一下效果，我们能在这里看到这个图片放在模板里面的效果。我们模板保存之后，它会自己加载这个图片，或者您也可以使用代码手动加载图片。

这里遗漏了一点，上面忘记讲了。我的列表头的第三列模板上放置了一个形状文本。给他取名为name4。这里在上面已经显示出来了，但是我的步骤没有说，是我疏忽了。
以及列表项的第三列模板上放置了一个形状文本。给他取名为name3。

下面我们来做一些其他的操作。我们让列表的每一项第一列，为一个多选按钮。然后第二列，显示一个数字序号。第三列就是一串的文本。
这样子，我们在模板里面第二列和第三列的项模板可以不用动，但是我们第一列，我们要一个多选按钮。
所以下面选中项模板的第一列的文本组件，然后删掉他。

然后在右边的组件工具栏里面选择一个按钮放到项模板的第一列里面。
这时候放着的按钮它是一个默认的，我们要把它给改成一个多选按钮。
你还记得我们在前面学过的按钮转换为多选按钮的方法吗？

我们在按钮的属性里面。把样式和类型都选为多选。这样子他就是一个多选按钮，然后我们在布局里面，把他的布局宽度改为自动，布局高度改为填充父，同时给按钮绑定一个名称name1，这里就不演示了。

下面我们来通过火山来实现这部分代码的编写。在保存设计器之前，我们先要给上面最开始设计的列表，取一个名称。

保存，修改，然后打包，这里就不演示了，相信您会。
打开我们常用的这个火山项目。

然后再启动类的下面创建如图所示的变量。我们需要一个列表以及一个列表头的数据适配器和一个列表项的数据适配器。添加变量的过程就不赘述了。

下面我们在启动类启动方法这个代码最下面开始写我们的列表。使用列表的步骤我分为六步骤。
首先第一步，要取对象从名称从设计器里面，取到这个组件的句柄。

我们第一步获取到了中间的句柄，第二步。就要给他放模板。
同样的，我们这里使用在内存zip中加载这个模板。和上一节课的列表框是一样的，我们选择项模板类型。然后看一下，后面好像没有我们这个列表的选项。
这怎么办？没有我们要的，我们这个列表它既不是列表框。也不是树形框，更不是别的，那咋办？
下面来展示一下神奇的操作。

我们这里先选择这个 项模板类型.列表头，我们在上一节课做那个列表框的时候，我们留了一个变量hTmp

这里我们本着变量重复利用的原则，我们不再申请其他的变量，用这个变量接受项模板的句柄。

然后将这个项模板的句柄，使用置项模板的方法，给列表。
到这里您可能要问了，这不是一个获取列表头的模板方法吗？这有什么用？
接着往下看。

我们再使用 项模板_加载从内存zip 中。然后此时类型选择列表项。
这样子，我们就把模板完整的给列表了。
在设计器里面，列表头是一部分，列表项也是一部分。所以我们在使用代码加载的时候，我们需要把头和身子。拆开，分别给列表。
emmm，是不是很奇怪？

下面第三步，我们来给列表创建数据适配器，句柄给数据适配器，这里我们需要创建两个，一个是列表头的，另一个是列表项的。分别创建，我们需要两个数据适配器。

第四步，我们需要告诉列表你要创建多少个列，这里和列表框的不一样。那列表框只有一个整列，然后数据适配器可以分别创建几个子列，来保存管理数据。

到这里，我们可以运行一下火山项目，看看效果
可以看到，我们添加的三列都已经显示出来了，并且我们在设计器里面设置的模板图片也已经显示出来了。

第五步，使用列表头的数据适配器来给列表头设置不同列的文本，第一列文本组件绑定文本是name2，第二列是name2和name3，不过文本是name2，图片是name3，所以我们选择name2，第三列文本是name4。

来看一下这个函数个参数，第一个是绑定的文本字段名，第二个就是文本值

调试运行一下，可以看到我们的列表头名称已经更改了。

下面第六步，我们来添加列表的项，这里使用列表项的数据适配器，我们在新增一行的时候，需要先使用添加项文本扩展，来返回一个项ID，然后再使用置文本的方法，输入项ID，以及绑定的文本名，文本值。
注意，这里我添加项文本扩展的时候，使用的name1，右边的文本是 “. 123456 .” ，有小数点，也有空格，为什么会这样子，因为炫彩出现的一点小bug，作者忘记加上多选按钮占据的部分空间了

到这里基本就完成了，来调试运行一下，这里就不录制gif了

文本到这里就结束了