使用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()
}
}
}