QML之View

最新推荐文章于 2025-10-01 16:11:35 发布

原创最新推荐文章于 2025-10-01 16:11:35 发布 · 1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#listview #qt #import #path #meego #webkit

Meego 专栏收录该内容

31 篇文章

订阅专栏

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

1、ListView

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

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

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

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

新建一个view.qml

import Qt 4.7 Rectangle { width: 300; height: 200; Component{ id: contactDelegate Item{ width: 180; height: 40 Column { Text { text: "Name:" + name; color: ListView.isCurrentItem ? "red" : "blue" } Text { text: "Number:" + 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.7 Rectangle { 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.7 Rectangle { 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 } } }