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
    }
}

View Code

 

转载于:https://www.cnblogs.com/SaveDictator/p/8244307.html