qml----Model/View入門（六）TableView

　　tableview與Listview相似，只不過是多了滾動條、挑選以及可調節尺寸等功能，它的數據也是通過Model來實現的，可以用listModel、XmlListModel或者c++中的AbstractItemModel和QAbstractTableModel等繼承實現的model下面看一個簡單的例子，代碼如下：

　　

import QtQuick 2.0
import QtQuick.Controls 1.2

Rectangle {
    width: 360
    height: 360

    TableView{
        id: phoneTable
        anchors.fill: parent

        //TableViewColumn 描述表格的每一列
        TableViewColumn{role: "name"; title: "Name"; width: 30; elideMode: Text.ElideRight;}
        TableViewColumn{role: "cost"; title: "Cost"; width: 100;}
        TableViewColumn{role: "manufacture"; title: "Manufacture"; width: 140;}

        itemDelegate:Text{//設置每個單元格的字體樣式
            text: styleData.value
            color: styleData.selected? "red" : styleData.textColor
            elide: styleData.elideMode
        }

//        rowDelegate :Rectangle{//設置行的背景色
//            color: styleData.selected ? root.highlight :
//                       (styleData.alternate ? root.alterBackground:root.background)
//            visible: false
//        }

        headerDelegate :Rectangle{//設置表頭的樣式
            implicitWidth: 10
            implicitHeight: 24
            gradient: styleData.pressed ? phoneTable.pressG :
                   (styleData.containsMouse ? phoneTable.hoverG : phoneTable.nomalG)
            border.width: 1
            border.color: "gray"
            Text{
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.right: parent.right
                anchors.rightMargin: 4
                text: styleData.value
                color: styleData.pressed ? "red" : "blue"
                font.bold: true
            }
        }

        model: ListModel{
            id: phoneModel

            ListElement{
                name: "rongyao2";
                cost: "4900";
                manufacture: "huawei"
            }

            ListElement{
                name: "s6";
                cost: "4800";
                manufacture :"sumsung"
            }

            ListElement{
                name: "apple5"
                cost: "3300"
                manufacture: "apple"
            }

            ListElement{
                name: "Mi5"
                cost: "3200"
                manufacture: "xiaomi"
            }
        }//model is end

        focus: true
    }
}

　　

　　是不是覺得上面的界面有點low？那我們看看如何定制表格外觀，讓它從矮矬窮一步步走上高富帥
　　可以通過設置itemDelegate、rowDelegate、headerDelegate等屬性，就可以定制外觀。
　　先來說這個itemDelegate,它來設置如何繪制一個單元格，類型是component，它有如下常用屬性
　　styleData.selected ： 當Item選中時為true
　　styleData.value：當前Item的文本
　　styleData.textColor ：Item的默認顏色
　　styleData.row 行索引
　　styleData.column 列索引
　　styleData.elideMode 列省略模式
　　styleData.textAlignment 列文本對齊方式

　　我們先來段關於itemDelegate的使用范例，比如下面的component
　　itemDelegate : Text{
　　text: styleData.value
　　color: styleData.selected? "red" : styleData.textColor
　　elide: styleData.elideMode//當文字過長時顯示省略號，默認在右邊
　　}
　　上面的只是對文字進行了制定，除此自外，還可以組合多個items來實現復雜的itemDelegate。再來看rowDelegate，該屬性制訂了如何繪制行背景，它有下列屬性|

　　styleData.alternate 當為true時，行將會使用交替的背景顏色
　　styleData.selected 行被選中時為true
　　sytleData.row 本行索引
　　還有styleData.hasActiveFocus和styleData.pressed判斷本行時候有焦點以及是否被按下

　　再就是headerDelegate,它定義如何繪制表頭。有幾個屬性我們單獨列出來
　　styleData.containsMouse 鼠標是否停留在本列內
　　styleData.textAlignment 本列文本的水平對齊方式
　　下面的范例是對上面說的一個總結

　　

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle{
    id: root
    width: 360
    height: 300

    property var background: "#d7e3bc"
    property var alterBackground: "white"
    property var highlight: "#e4f7d6"
    property var headerBkg: "#F0F0F0"
    property var normalG: Gradient{
        GradientStop{position: 0.0; color: "#c7d3ac"}
        GradientStop{position: 1.0; color: "#F0F0F0"}
    }
    property var hoverG: Gradient{
        GradientStop{position: 0.0; color: "white"}
        GradientStop{position: 1.0; color: "#d7e3bc"}
    }
    property var pressG: Gradient{
        GradientStop{position: 0.0; color: "#d7e3bc"}
        GradientStop{position: 1.0; color: "white"}
    }

    TableView{  //定義table的顯示，包括定制外觀
        id: phoneTable
        anchors.fill: parent
        focus: true
        TableViewColumn{role: "name"; title: "Name"; width: 100; elideMode: Text.ElideRight;}
        TableViewColumn{role: "cost"; title: "Cost"; width: 100; elideMode: Text.ElideRight;}
        TableViewColumn{role: "manufacture";title: "Manufacture"; width: 100; elideMode: Text.ElideRight;}

        itemDelegate: Text{
            text: styleData.value
            color: styleData.selected ? "red" : "black"
            elide: Text.ElideRight
        }

        rowDelegate: Rectangle{
            color: styleData.selected? root.highlight :
                         (styleData.alternate ? root.alterBackground : root.background)
        }

        headerDelegate: Rectangle{
            implicitWidth: 10
            implicitHeight: 24
            border.color: "gray"
            border.width: 1
            Text{
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.right: parent.right
                anchors.rightMargin: 4
                text: styleData.value
                color: styleData.pressed ?"red" : "blue"
                font.bold: true
            }
        }//header delegate is end

        model: ListModel{
            id: phoneModel
            ListElement{
                name: "iphone5"
                cost: "4900"
                manufacture: "apple"
            }
            ListElement{
                name: "b199"
                cost: "1590"
                manufacture: "huawei"
            }
            ListElement{
                name: "MI25"
                cost: "1999"
                manufacture: "xiaomi"
            }
            ListElement{
                name: "galaxy s6"
                cost: "3900"
                manufacture: "samsung"
            }
        }//listmodel is end
    }
}