qml学习(2)–TabView(TabViewStyle)
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick 2.2
import QtQuick.Controls 1.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "lightgray"
id:root
property var backgroud:"#d7e3bc"
property var alterBackground:"white"
property var highlight :"#e4f7d6"
property var headerBkgnd:"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{
id:phonetable
anchors.fill:parent
TableViewColumn{
role:"name"
title:"Name"
width:100
elideMode: Text.ElideRight
}
TableViewColumn{
role:"cost"
title:"Cost"
width:100
}
TableViewColumn{
role:"manufacturer"
title:"Manufacturer"
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.backgroud)
}
headerDelegate: Rectangle{
implicitHeight: 24
implicitWidth: 10
gradient: styleData.pressed?root.pressG:
(styleData.containsMouse?root.hoverG:root.normalG)
border.width: 1
border.color: "gray"
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 24
anchors.right: parent.right
anchors.rightMargin: 24
text:styleData.value
color: styleData.pressed?"red":"blue"
font.bold: true
}
}
model: ListModel{
id:phoneModel
ListElement{
name:"iphone 5"
cost:"4900"
manufacturer:"Apple"
}
ListElement{
name:"B199"
cost:"1590"
manufacturer:"Huawei"
}
ListElement{
name:"MI 2S"
cost:"1999"
manufacturer:"xiaomi"
}
ListElement{
name:"GALAXY S5"
cost:"4699"
manufacturer:"Samsung"
}
}
focus: true
}
//=================================
// TableView{
// id:phonetable
// anchors.fill:parent
// TableViewColumn{
// role:"name"
// title:"Name"
// width:100
// elideMode: Text.ElideRight
// }
// TableViewColumn{
// role:"cost"
// title:"Cost"
// width:100
// }
// TableViewColumn{
// role:"manufacturer"
// title:"Manufacturer"
// width:140
// }
// model: ListModel{
// id:phoneModel
// ListElement{
// name:"iphone 5"
// cost:"4900"
// manufacturer:"Apple"
// }
// ListElement{
// name:"B199"
// cost:"1590"
// manufacturer:"Huawei"
// }
// ListElement{
// name:"MI 2S"
// cost:"1999"
// manufacturer:"xiaomi"
// }
// ListElement{
// name:"GALAXY S5"
// cost:"4699"
// manufacturer:"Samsung"
// }
// }
// focus: true
// }
//=======================================
// ListModel{
// id:libraryModel
// ListElement{
// title:"A"
// author:"a"
// }
// ListElement{
// title:"A1"
// author:"a1"
// }
// ListElement{
// title:"A2"
// author:"a2"
// }
// }
// TableView{
// anchors.fill:parent
// model: libraryModel
// TableViewColumn{
// role: "title"//数据
// title: "Title"//标题
// width:100
// }
// TableViewColumn{
// role: "author"
// title: "Author"
// width:200
// }
// itemDelegate: Item{
// Text {
// anchors.horizontalCenter: parent.horizontalCenter
// color: styleData.selected ? "red":"blue"
// font.pointSize: 10
// text:styleData.row == 2 ? "myrow":styleData.value
// }
// }
// onClicked: console.debug(row)
// }
//==========================================
// TabView{
// anchors.fill: parent
// Tab{
// title:"Home"
// }
// Tab{
// title:"Edit"
// }
// Tab{
// title: "View"
// }
// Tab{
// title:"Help"
// }
// }
//====================================================
// Component{
// id:tabContent
// Rectangle{
// implicitHeight: 100
// implicitWidth: 100
// anchors.fill: parent
// color: Qt.rgba(Math.random(),Math.random(),Math.random())
// }
// }
// Button{
// id:add
// x:8
// y:8
// width: 60
// height: 25
// text: "addTab"
// onClicked: {
// tabView.addTab("tab-"+tabView.count,tabContent)
// }
// }
// TabView{
// id:tabView
// anchors.top: add.bottom
// anchors.margins: 8
// anchors.left: parent.left
// anchors.right: parent.right
// anchors.bottom: parent.bottom
// }
}
