本博只是簡單的展現TableView的基本使用(TableView、style:TableViewStyle、headerDelegate、rowDelegate、itemDelegate、TableViewColumn、ListModel及訪問和修改Model),關於更多屬性和方法的使用能夠參考TableView QML Typeapp
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 Window { visible: true width: 300 height: 480 title: qsTr("Hello World") TableView { id:stockTable; anchors.left: parent.left; anchors.top:parent.top; anchors.topMargin: 10; anchors.right: parent.right; anchors.bottom: parent.bottom; //alternatingRowColors : true; style:TableViewStyle { id:tstyle; backgroundColor:"white"; alternateBackgroundColor:"#f6F6F6"; textColor:"black"; // 設置TableView的頭部 headerDelegate: Canvas { implicitWidth:100; implicitHeight:32; onPaint: { var ctx = getContext("2d"); ctx.lineWidth = 2; ctx.strokeStyle="red"; ctx.fillStyle="blue"; ctx.beginPath(); console.log("width:",width,"--","height:",height); ctx.rect(0,0,width,height); ctx.stroke(); ctx.font="14pt sans-serif"; ctx.textAlign="right" ctx.textBaseLine="middle"; ctx.fillText(styleData.value,width-2,height/2+10); } } // 設置行 rowDelegate:Rectangle { height:30; color: styleData.selected? "red": (styleData.alternate ? tstyle.backgroundColor : tstyle.alternateBackgroundColor); } // 設置單元格 itemDelegate: Text { text:styleData.value; font.pointSize:13; verticalAlignment:Text.AlignVCenter; horizontalAlignment:Text.AlignRight; } } TableViewColumn { role:"code"; title:qsTr("Code"); width:120; movable: false; } TableViewColumn { role:"name"; title:qsTr("Name"); width:120; movable: false; } ListModel { id: libraryModel ListElement { code: "159922" name: "500ETF" } ListElement { code: "600030" name: "中信證券" } ListElement { code: "300244" name: "迪安診斷" } } model: libraryModel; } }
itemDelegate: Text { text:styleData.value; font.pointSize:13; verticalAlignment:Text.AlignVCenter; horizontalAlignment:Text.AlignRight; MouseArea { anchors.fill:parent; onClicked: { console.log("currentRow:",styleData.row, "-", styleData.column); console.log(libraryModel.get(styleData.row).code, "-", libraryModel.get(styleData.row).name); } } }
rowDelegate:Rectangle { height:30; color: styleData.selected? "red": (styleData.alternate ? tstyle.backgroundColor : tstyle.alternateBackgroundColor); MouseArea { anchors.fill:parent; onClicked: { libraryModel.remove(styleData.row); } } }
itemDelegate: Text { text:styleData.value; font.pointSize:13; verticalAlignment:Text.AlignVCenter; horizontalAlignment:Text.AlignRight; MouseArea { anchors.fill:parent; onClicked: { console.log("currentRow:",styleData.row, "-", styleData.column); console.log(libraryModel.get(styleData.row).code, "-", libraryModel.get(styleData.row).name); libraryModel.set(styleData.row, {"code":"888888", "name":"modify"}); } } }
rowDelegate:Rectangle { height:30; color: styleData.selected? "red": (styleData.alternate ? tstyle.backgroundColor : tstyle.alternateBackgroundColor); MouseArea { anchors.fill:parent; onClicked: { //libraryModel.remove(styleData.row); libraryModel.append({"code":"666666", "name":"add"}); } } }