使用Qml创建各种list（二）创建一个简单的动态列表

这里简单实现一个具有动态添加和清除属性的列表。

实现的主要方法使用model的append和clear属性。

PS有个小记录，就是listmodel中的元素如果不为空的话，默认是在屏幕直接显示的，其属性和属性名称并不需要预先定义

 

import Qt 4.7 import "content" Rectangle { id: container width: 500; height: 400 color: "#343434" ListModel { id: recipesModel } Component { id: recipeDelegate Item { id: recipe property real detailsOpacity : 0 width: listView.width height: 70 // A simple rounded rectangle for the background Rectangle { id: background x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2 color: "ivory" border.color: "orange" radius: 5 } Row { id: topLayout x: 10; y: 10; height: recipeImage.height; width: parent.width spacing: 10 Image { id: recipeImage width: 50; height: 50 source: picture } Column { width: background.width - recipeImage.width - 20; height: recipeImage.height spacing: 5 Text { text: title font.bold: true; font.pointSize: 16 } }// Column }// Row }// Item }// Component ListView { id: listView clip: true anchors.fill: parent model: recipesModel delegate: recipeDelegate } Row { anchors { left: parent.left; bottom: parent.bottom; margins: 20 } spacing: 10 TextButton { text: "Add an item" onClicked: { var pic = "http://pic.wenwen.soso.com/p/20090619/20090619144752-2127281241.jpg" recipesModel.append({ //注意这个“，” 如果没有的话运行会报，Unable to assign [undefined] to QUrl source 错误 title: "Vegetable Soup", picture: pic }) } } TextButton { text: "Remove all items" onClicked: recipesModel.clear() } } }