Qml之自编表格控件（动态）

1、 １.　这个表格控件是这样使用的，表格控件分为两个部分，一部分是标题栏，另一部分则为内容。为了使得表格控件区分明朗，我们需要设置ChartTitleBar控件（标题栏）和ChartBar控件（内容栏）。

3、 3.接着就是源码分析了。ChartTitleBar控件在ChartTitleBar.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，它们的作用就是返回列数的。

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呢？ 因为这里存在一个赋值的问题。这里对property variant arrayName: []这样的数组型数是不能直接使用下标写入的，只能读取。arrayName[1] = 1,这样是错误的。 ⑤ 怎样才能正确写入呢？ 使用var array = []这样的变量，array[0] = 1; array[1] = 2。这样是对的因为类型是var，这是只能在js里面操作，然后这样赋值arrayName = array。