qml ---- TableView

　Tableview es similar a Listview, excepto que tiene más funciones como barra de desplazamiento, selección y tamaño ajustable. Sus datos también se implementan a través del Modelo. Puede usar listModel, XmlListModel o AbstractItemModel y QAbstractTableModel en c ++ para heredar el modelo. Un ejemplo simple, el código es el siguiente:

　　

import QtQuick 2.0 
import QtQuick.Controls 1.2 

Rectangle { 
    ancho: 360 
    alto: 360 

    TableView { 
        id: phoneTable 
        anchors.fill: parent 

        // TableViewColumn describe cada columna de la tabla 
        TableViewColumn {rol: "nombre"; título: "Nombre"; ancho: 30; elideMode: Text.ElideRight;} 
        TableViewColumn {role: "cost"; title: "Cost"; width: 100;} 
        TableViewColumn {role: "manufacture"; title: "Manufacture"; width: 140;} 

        itemDelegate: Text {// Establece el estilo de fuente de cada 
            texto de celda : 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" 
            Texto { 
                anchors.verticalCenter: parent.verticalCenter 
                anchors.left: parent.left
                anchors.leftMargin: 4 
                anchors.right: parent.right 
                anchors.rightMargin: 4 
                text: styleData.value 
                color: styleData.pressed? "rojo": "azul" 
                font.bold: true 
            } 
        } 

        modelo: ListModel { 
            id: phoneModel 

            ListElement { 
                nombre: "rongyao2"; 
                costo: "4900"; 
                fabricación: "huawei" 
            } 

            ListElement { 
                nombre: "s6"; 
                costo: "4800";
            }

                costo: "3300" 
                fabricación: "manzana" 
            } 

            ListElement { 
                nombre: "Mi5" 
                costo: "3200" 
                fabricación: "xiaomi" 
            } 
        } // el modelo es el 

        foco final : verdadero 
    } 
}

　　

　　¿Crees que la interfaz anterior es un poco baja? A continuación, veamos cómo personalizar la apariencia de la tabla, dejarla paso a paso de los pobres a los ricos y guapos.
　　Puede personalizar la apariencia configurando atributos como itemDelegate, rowDelegate, headerDelegate, etc.
　　Hablemos de este elemento Primero delegue, establece cómo dibujar una celda, el tipo es componente, tiene las siguientes propiedades comunes
　　styleData.selected: true cuando se selecciona el elemento
　　styleData.value: el texto del elemento actual
　　styleData.textColor: el color predeterminado del elemento
　　styleData.row row index
　　styleData.column column index
　　styleData.elideMode modo de omisión de
　　columna styleData.textAlignment alineación del texto de la columna

　　Comencemos con un ejemplo de uso de itemDelegate. Por ejemplo, el siguiente componente
　　itemDelegate: Text {
　　text: styleData.value
　　color: styleData.selected? "Red": styleData.textColor elide
　　: styleData.elideMode // Cuando el texto es demasiado largo, se muestra una elipsis , El valor predeterminado está a la derecha
　　}
　　solo se ha formulado el texto, además de esto, también puede combinar varios elementos para lograr un elemento complejo Delegar. Veamos nuevamente rowDelegate. Esta propiedad especifica cómo dibujar el fondo de la fila. Tiene las siguientes propiedades |

　　styleData.alternate Cuando es verdadero, la fila usará el color de fondo alternativo.
　　styleData.selected La fila es verdadera cuando se selecciona.
　　sytleData.row El índice de esta fila
　　También hay styleData.hasActiveFocus y styleData.pressed para determinar si la fila tiene foco y si está presionada.

　　Luego está el headerDelegate, que define cómo dibujar el encabezado de la tabla. Hay varias propiedades que enumeramos por separado:
　　StyleData.containsMouse Si el mouse permanece en esta columna
　　styleData.textAlignment La alineación horizontal del texto en esta columna
　　El siguiente ejemplo es un resumen de lo anterior

　　

import QtQuick 2.2 
import QtQuick.Controls 1.2 

Rectángulo { 
    id: 
    ancho de raíz : 360 
    alto: 300 

    propiedad var fondo: "# d7e3bc" 
    propiedad var alterBackground: 
    propiedad "blanco" var propiedad resaltada: "# e4f7d6" 
    propiedad var headerBkg: "# F0F0F0" 
    propiedad var normalG: Gradient { 
        GradientStop {position: 0.0; color: "# c7d3ac"} 
        GradientStop {posición: 1.0; color: "# F0F0F0"} 
    } 
    propiedad var hoverG: Gradient { 
        GradientStop {position: 0.0; color: "blanco"} 
        GradientStop {posición: 1.0; color: "# d7e3bc" 
    } }
        GradientStop {posición: 0.0; color: "# d7e3bc"} 
        GradientStop {posición: 1.0; color: "blanco"} 
    } 

    TableView {// 定义 table 的 显示 ， 包括 定制 外观
        id: phoneTable 
        anchors.fill: 
        enfoque principal : verdadero 
        TableViewColumn {rol: "nombre"; nombre del título"; ancho: 100; elideMode: Text.ElideRight;} 
        TableViewColumn {role: "cost"; título: "Costo"; ancho: 100; elideMode: Text.ElideRight;} 
        TableViewColumn {rol: "fabricación"; título: "Fabricación"; ancho: 100; elideMode: Text.ElideRight;} 

        itemDelegate: Text { 
            text: styleData.value 
            color: styleData.selected? "rojo" : 
        } 

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

        headerDelegate: Rectangle { 
            implicitWidth: 10 
            impllicitHeight: 
            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? "rojo": "azul" 
                font.bold: true
                fabricación: "xiaomi"
            } 
        } // el delegado del encabezado es el 

        modelo final : ListModel { 
            id: phoneModel 
            ListElement { 
                nombre: "iphone5" 
                costo: "4900" 
                fabricación: "manzana" 
            } 
            ListElement { 
                nombre: "b199" 
                costo: "1590" 
                fabricación: "huawei" 
            } 
            ListElement { 
                nombre: "MI25" 
                costo: "1999" 
            ListElement { 
                nombre: "galaxy s6"
                costo: "3900"
            } 
                fabricación: "samsung" 
            } 
        } // listmodel ha finalizado 
    } 
}