Qt Quick之TableView的使用

　本博只是简单的展示TableView的基本使用，关于更多属性和方法的使用可以参考TableView QML Type

1. 效果图

　　

2. 代码实现

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 300
    height: 480
    title: qsTr("Hello World")

    TableView
    {
        id:stockTable;

        anchors.left: parent.left;
        anchors.top:parent.top;
        anchors.topMargin: 10;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        //alternatingRowColors : true;
        style:TableViewStyle
        {
            id:tstyle;
            backgroundColor:"white";
            alternateBackgroundColor:"#f6F6F6";
            textColor:"black";

            // 设置TableView的头部
            headerDelegate: Canvas
            {
                implicitWidth:100;
                implicitHeight:32;

                onPaint:
                {
                    var ctx = getContext("2d");
                    ctx.lineWidth = 2;
                    ctx.strokeStyle="red";
                    ctx.fillStyle="blue";

                    ctx.beginPath();
                    console.log("width:",width,"--","height:",height);
                    ctx.rect(0,0,width,height);
                    ctx.stroke();
                    ctx.font="14pt sans-serif";
                    ctx.textAlign="right"
                    ctx.textBaseLine="middle";
                    ctx.fillText(styleData.value,width-2,height/2+10);
                }
            }

            // 设置行
            rowDelegate:Rectangle
            {
                height:30;
                color: styleData.selected? "red":
                    (styleData.alternate ? tstyle.backgroundColor :
                                           tstyle.alternateBackgroundColor);
            }

            // 设置单元格
            itemDelegate: Text
            {
                text:styleData.value;
                font.pointSize:13;
                verticalAlignment:Text.AlignVCenter;
                horizontalAlignment:Text.AlignRight;
            }
        }

        TableViewColumn
        {
            role:"code";
            title:qsTr("Code");
            width:120;
            movable: false;
        }

        TableViewColumn
        {
            role:"name";
            title:qsTr("Name");
            width:120;
            movable: false;
        }

        ListModel {
              id: libraryModel
              ListElement {
                  code: "159922"
                  name: "500ETF"
              }
              ListElement {
                  code: "600030"
                  name: "中信证券"
              }
              ListElement {
                  code: "300244"
                  name: "迪安诊断"
              }
          }

        model: libraryModel;
    }
}