qml----Model/View入门(六)TableView

时间:2021-03-25 14:14:01

  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 本列文本的水平对齐方式
  下面的范例是对上面说的一个总结

  

qml----Model/View入门(六)TableViewqml----Model/View入门(六)TableView
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