Qml之自定義表格

QML原生自帶的表格控件--TableView。

 

 

原生態的樣式上有點不太美觀，可以嘗試去修改下樣式。

 

 

TableView {
        id: configDataTable
        focus: true
        anchors.fill: parent
 
 
        TableViewColumn{ role: "addr"  ; title: "通訊地址";width:225  }
        TableViewColumn{ role: "name" ; title: "設備名稱";width:240  }
        TableViewColumn{ role: "symbol" ; title: "備注標簽";width: 240 }
 
        ScrollBar.vertical: ScrollBar {
            id: scroll_vertical
            anchors.right: parent.right
            anchors.rightMargin: 0
            contentItem: Rectangle {
                visible: (scroll_vertical.size < 1.0)
                //implicitWidth: configDataTable.scrollBarWidth
                //color: configDataTable.scrollBarColor
            }
        }
 
        ScrollBar.horizontal: ScrollBar {
            id: scroll_horizontal
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: -configDataTable.tableLeft
 
            contentItem: Rectangle {
                visible: (scroll_horizontal.size < 1.0)
                //implicitHeight: configDataTable.scrollBarWidth
                //color: configDataTable.scrollBarColor
            }
        }
 
 
        // 設置行的背景色
        rowDelegate: Rectangle {
            height: 32
            color: styleData.selected ? "#FF228FFF": "white"
            border.width: 1//#D0E7FF
            border.color: "#17000000"
        }
 
        // 設置表頭的樣式
        headerDelegate: Rectangle {
            implicitWidth: 10
            implicitHeight: 32
            border.width: 1
            border.color: "#17000000"
            color: "#ECF1F5"
            Text {
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                text: styleData.value
                color:"#73000000"
            }
        }
 
        model: ListModel {
            id: configDataModel
            ListElement{
                addr: "1212";
                name: "付水電費第三方";
                symbol: "付水電費第三方"
            }
            ListElement{
                addr: "1212";
                name: "付水電費第三方";
                symbol: "付水電費第三方付水電費第三方"
            }
            ListElement{
                addr: "1212";
                name: "付水電費第三方付水電費第三方";
                symbol: "付水電費第三方"
            }  ListElement{
                addr: "1212";
                name: "付水電費第三方";
                symbol: "付水電費第三方"
            }
            ListElement{
                addr: "1212";
                name: "付水電費第三方";
                symbol: "付水電費第三方付水電費第三方"
            }  ListElement{
                addr: "1212";
                name: "付水電費第三方";
                symbol: "付水電費第三方"
            }
        }
    }//TableView
}// Rectangle