qt4 qml 視圖

三十八、QML視圖

一、ListView清單視圖。

import QtQuick 1.0

Rectangle {

    width:200;height:200

    ListModel{  //資料模型
        id:listModel
        ListElement{name:"Tom";number:"001"}
        ListElement{name:"John";number:"002"}
        ListElement{name:"Sum1";number:"003"}
        ListElement{name:"Sum2";number:"004"}
        ListElement{name:"Sum3";number:"005"}
        ListElement{name:"Sum4";number:"006"}
        ListElement{name:"Sum5";number:"007"}
        ListElement{name:"Sum6";number:"008"}
        ListElement{name:"Sum7";number:"009"}
        ListElement{name:"Sum8";number:"010"}
        ListElement{name:"Sum9";number:"011"}
        ListElement{name:"Sum10";number:"012"}
    }

    Component{     //代理
        id:delegate
        Item{ id:wrapper; width:200; height:40
            Column{
                x:5; y:5
                Text{text:"<b>Name:</b>"+name}
                Text{text:"<b>Number:</b>"+number}
                //Text{text:"<b>Numberr:</b>"+number}
            }
        }
    }

    Component{   //高亮條
        id:highlight
        Rectangle{color:"lightsteelblue";radius:5}

    }

    ListView{  //視圖
        width:parent.width
        height:parent.height
        model:listModel  //關聯資料模型
        delegate:delegate  //關聯代理
        highlight:highlight  //關聯高亮條
        focus:true  //可以獲得焦點，這樣就可以響應鍵盤了
    }

}
           

二、PathView路徑視圖

import QtQuick 1.0

    Rectangle {
        width:300;height:300;

        ListModel{  //資料模型
            id:listModel
            ListElement{icon:"03.png"}
            ListElement{icon:"03.png"}
            ListElement{icon:"03.png"}
            ListElement{icon:"03.png"}
            ListElement{icon:"03.png"}
            ListElement{icon:"03.png"}
        }

        Component{     //代理
            id:delegate
            Item{ id:wrapper; width:50; height:50
                Column{
                    Image {source:icon;width:50;height:50}
                }
            }
        }

        PathView{  //路徑視圖
            anchors.fill:parent;
            model:listModel;
            delegate:delegate
            path:Path{
                startX:120
                startY:200
                PathQuad{x:120;y:25;controlX:260;controlY:125}
                PathQuad{x:120;y:200;controlX:-20;controlY:125}
            }
        }
    }
           

将上面的代理和路徑視圖改一下，----PathAttribute,使不同路徑上的圖檔的大小不一樣

Component{     //代理
            id:delegate
            Item{ id:wrapper; width:50; height:50
                scale:PathView.scale; opacity:PathView.opacity//
                Column{
                    Image {source:icon;width:50;height:50}
                }
            }
        }


        PathView{  //路徑視圖
            anchors.fill:parent; model:listModel; delegate:delegate

            path:Path{
                startX:120;
                startY:200
                
                PathAttribute{name:"scale";value:1.0}
                PathAttribute{name:"opacity";value:1.0}

                PathQuad{x:120;y:25;controlX:260;controlY:125}
                PathAttribute{name:"scale";value:0.5}
                PathAttribute{name:"opacity";value:0.5}

                PathQuad{x:120;y:200;controlX:-20;controlY:125}
            }
        }