QML之View

今天学习QML的ListView,GridView,PathView,WebView等.

1、ListView

       ListView用来显示ListModel，XMLListModel或者自定义model的数据。

       ListView继承自Flickable，包含一个需要显示的model即数据模型，一个显示规格的delegate即代理。

       新建一个ContactModel.qml,这就是一个model。

       import Qt 4.7ListModel { id:listModel ListElement { name: "Bill Smith" number: "555 3264" } ListElement { name: "John Brown" number: "555 8426" } ListElement { name: "喝醉的毛毛虫" number: "86 15013618736" }}    <br>

       新建一个view.qml

      import Qt 4.7Rectangle { width: 300; height: 200; Component{ id: contactDelegate Item{ width: 180; height: 40 Column { Text { text: "<b>Name:</b>" + name; color: ListView.isCurrentItem ? "red" : "blue" } Text { text: "<b>Number:</b>" + number; color: ListView.isCurrentItem ? "red" : "blue" } } } } Component{ id:hightlight Rectangle{color: "lightsteelblue"; radius: 5} } ListView { anchors.fill: parent model: ContactModel{} delegate: contactDelegate highlight: hightlight focus: true currentIndex: 2 keyNavigationWraps: true orientation: ListView.Horizontal Component.onCompleted: positionViewAtIndex(count-1, ListView.Beginning) Keys.onPressed :console.log(currentItem.data +" is selected!") }}

 

 

        highlight设置高亮条.keyNavigationWraps设置达是否到最后一项后返回第一项，focus设置是否能响应键盘事件

        orientation:设置横向或者纵向显示，默认为ListView.Vertical

         Component.onCompleted:positionViewAtIndex(count-1,ListView.Beginning)设置默认显示在哪一项

        由于它继承自Flipable，运行界面像手机界面的触摸滑动，哈哈.

 2、GridView

       GridView和ListView相似，只是显示方式不同.

       import Qt 4.7Rectangle { width: 500; height: 300; ListModel { id: listModel ListElement { name: "01" pic: "images/Messenger_01.png" } ListElement { name: "02" pic: "images/Messenger_02.png" } ListElement { name: "03" pic: "images/Messenger_03.png" } ListElement { name: "04" pic: "images/Messenger_04.png" } } Component { id: msnDelegate Item { width: grid.cellWidth; height: grid.cellHeight Column { Image{ source: pic;anchors.horizontalCenter: parent.horizontalCenter; width: grid.cellWidth; height: grid.cellHeight} Text { text: name;anchors.horizontalCenter: parent.horizontalCenter; color: GridView.isCurrentItem ? "red" :"gray" } } } } GridView { id:grid anchors.fill: parent cellWidth: 80 cellHeight: 80 model: listModel delegate: msnDelegate highlight: Rectangle { color: "lightsteelblue"; radius: 5 } currentIndex: 2 focus: true }} 

 

3、PathView

      PathView也类似于ListView，需要model和delegate，但是它的显示方式是沿着我们规定的path（路径）显示.

import Qt 4.7Rectangle { width: 500; height: 300; ListModel { id: msnModel ListElement { name: "01" pic: "images/Messenger_01.png" } ListElement { name: "02" pic: "images/Messenger_02.png" } ListElement { name: "03" pic: "images/Messenger_03.png" } ListElement { name: "04" pic: "images/Messenger_04.png" } } Component { id: msnDelegate Column { Image{ source: pic; anchors.horizontalCenter: name.horizontalCenter; width: 64; height: 64} Text { text: name; font.pointSize: 16; color: GridView.isCurrentItem ? "red" :"gray"} } } PathView { anchors.fill: parent model: msnModel delegate: msnDelegate path: Path { startX: 120; startY: 100 PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } } highlight: Rectangle { color: "lightsteelblue"; radius: 5 } }}  

 

 

 

4、Path，PathAttribute,PathPercent,PathLine,PathQuad,PathCubic

      Path由一个或多个如Pathine,PathQuad,PathCubic等路径段组成。主要应用在PathView中.

      PathAttribute能够在Path上某个位置设置一个属性.

      PathPercent

      PathLine 定义一条直线

      PathQuad定义二次贝塞尔曲线

      PathcuBic定义三次贝塞尔曲线

 

5、WebView

      WebView用于显示网页,刚查了下Meego API，此组件在Qt WebKit模块中,所以还是放到以后学Qt WebKit时学。

       import QtWebKit 1.0WebView { url: "http://www.baidu.com" preferredWidth: 490 preferredHeight: 400 scale: 0.5 smooth: false}

      

 

      Meego API地址： http://apidocs.meego.com/1.1/core/html/index.html