笔者在使用qt的qml语言开发产品时候，经常需要用到一些表格类的控件，用来合理有序地显示内容。毕竟没有表格规限内容，会看起来很乱。笔者使用的是qt4.8版本的qml，所以qml没有关于表格类的控件。这就有点头痛了，没办法，只能亲自写一个表格控件出来。这一表格控件采用最基本qml元素编写，兼容性非常好，该表格控件还支持qt接口调用，动态显示。在文章的最后会公开源代码，仅供读者们参考学习。
工具/原料
linux或windows系统
qt4.8版本以上
方法/步骤
1、１. 这个表格控件是这样使用的，表格控件分为两个部分，一部分是标题栏，另一部分则为内容。为了使得表格控件区分明朗，我们需要设置ChartTitleBar控件（标题栏）和ChartBar控件（内容栏）。
2、１. 这里的两个子控件的属性也有点不一样，但有些属性是一样擢爻充种的。它们都需要设置高度，Ch锾攒揉敫artTitleBar的高度则是标题栏的高度，而ChartBar的高度则是内容栏的高度；但有一个高度需要设置，那就是内容栏的每一行的高度参数属性为selectedHeight。至于颜色就是它们的背景色了，默认是白色的；标题栏当然需要设置标题，设置标题使用arrayTitle参数，它是数组型数据；标题栏与内容栏的每一列都是需要宽度的，而宽度的设置则由这一参数实现selectedWidth，这一个参数有点意思的，可以实现指定宽度。比如有10列每列都是50的宽度，这它的表示为：[“1-10”,50]。解释一下”1-10”指的是1到10列，而50为宽度；有些读者会问，我不要等分的宽度，我要指定的，这也是可以得。再打一个比如，标题栏有10列，1到5列宽度20，6-8列宽度50，9-10列宽度80。那么它应该这样表示[[“1-5”,20],[“6-8”,50],[“9-10”,80]]。相信看完这两个例子对这些参数有理解了吧。还有一个属性就是modelSomeData，它的作用是内容的提供者，而arrayName属性与modelSomeData的内容标识是相对应的。
3、3.接着就是源码分析了。ChartTitleBar控件在C丝群闻栝hartTitleBar.qml里面，图片显示代洁船诼抨码有限我就抽取最核心的代码讲解。这里使用ListView控件构成标题栏，为什么使用这一个控件呢？关于布局的可以使用Row水平布局，但是这是一个动态的标题栏，Row是程序运行的时候就必须要限定列的大小；而String(arrayTitle[index])参数就是读取标题的每一列内容；Component.onCompleted:这个构造函数除了设置行的宽度，还有一个小作用就是使用listView.model.append()来设置列的多少；在图片的底部有一个count()函数，笔者认为这里是写得不错的地方，运用的只是也是比较多。请允许我一一道来哈。count()函数调用了一个stringToInt函数该函数作用是将字符串转换为整型。substring()函数则为截取指定字符，indexOf()函数则为匹配到合适字符返回当前位置。这个那么长的表达式有什么用呢？举个例子:假如selectedWidth[i][0]等于字符串”1-10”，那么selectedWidth[i][0].substring(selectedWidth[i][0].indexOf('-')+1,selectedWidth[i][0].length)就会等于10，而stringToInt(selectedWidth[i][0].substring(0,selectedWidth[i][0].indexOf('-')))就会等于1，它们的作用就是返回列数的。
4、4.源码分析内容显示控件ChartBar内容显示控件的原理与标题栏控件原理差不多，这里抽取核心代码讲解；它们的构成是一个大ListView组成的，而一个大的ListView就是显示所有内容了，而所有内容里面又包含着每一行，而每一行作为一个独立的ListView又供显示内容，即ChartBar控件又两个ListView组成；其实这一控件也是调用了ChartTitleBar控件了，我们换个思路去想，内容的标题就是内容了，当然要重用控件啦；
5、5.控件ChartBar也是有精妙的地方的，这里这种讲解，茧盯璜阝就是filterArray(index)函数。这一个函数传入的是delegate属性的足毂忍珩index这个属性必须传入，否则无法工作，作用则是控制get()的值；arrayName.length是读数组长度，进行arrayName的过滤；使用listView.model.get(index-1)[String(arrayName[i])]需要特别特别注意，就是get(index-1),这个因为index是从1计数的，而get()函数是从0有效的，所以要相应地减1；为什么不直接返回arrayName呢？因为这里存在一个赋值的问题。这里对propertyvariantarrayName:[]这样的数组型数是不能直接使用下标写入的，只能读取。arrayName[1]=1,这样是错误的。怎样才能正确写入呢？使用vararray=[]这样的变量，array[0]=1;array[1]=2。这样是对的因为类型是var，这是只能在js里面操作，然后这样赋值arrayName=array。
6、6.文件一览与源码下载源码下载：http://download.csdn.net/detail/nicai_xiaoqinxi/9719987
