qml学习(2)--TabView(TabViewStyle)

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
//    }

}