I wonder about the impact of having a component in a delegate of a ListView
Consider this:
DelegatePrototype.qml
MouseArea {
property Component myPage
onClicked: {
myPageLoader.sourceComponent = myPage
myPageLoader.pageData = model
}
}
and main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: appWindow
width: 1024
height: 800
visible: true
Loader {
id: myPageLoader
x: 100
active: true
property var pageData
}
Component {
id: myDelegate
DelegatePrototype {
width: 100
height: 50
myPage: Rectangle {
width: 400
height: 800
color: 'steelblue'
Column {
Text {
text: pageData.name
}
Row {
spacing: 4
Repeater {
model: pageData.age
delegate: Rectangle {
color: 'red'
width: 7
height: 30
}
}
}
}
}
Text {
anchors.centerIn: parent
text: model.name
}
}
}
ListView {
width: 100
height: 800
model: ListModel {
ListElement { name: 'Herbert'; age: 5 }
ListElement { name: 'Hans'; age: 3 }
ListElement { name: 'Ludwig'; age: 12 }
ListElement { name: 'Franz'; age: 9 }
ListElement { name: 'Peter'; age: 2 }
ListElement { name: 'Karl'; age: 15 }
}
delegate: myDelegate
}
}
So for the question: I have the property Component myPage in the DelegatePrototype and in main.qml I assign a component to it, that I declare on-the-fly.
I might have instead explicitly declared a component beforehand, and assigned it then like this:
Component {
id: myPageDelegate
Rectangle {
width: 400
height: 800
color: 'steelblue'
Column {
Text {
text: pageData.name
}
Row {
spacing: 4
Repeater {
model: pageData.age
delegate: Rectangle {
color: 'red'
width: 7
height: 30
}
}
}
}
}
}
Component {
id: myDelegate
DelegatePrototype {
width: 100
height: 50
myPage: myPageDelegate
Text {
anchors.centerIn: parent
text: model.name
}
}
}
While I belive in the latter case, I have only one Component-object for myPage in my memory, and for each of the instantiated DelegatePrototypes only a reference to this, I might imagine that in the former case it might happen that I create a Component-Object for myPage for each instance of DelegatePrototype, which might clutter the memory with identical Component-objects pretty fast.
Is my assumption right here and I should avoid assigning those on-the-fly-declarations of Components or will QML optimize this for me?
I know, there are crossfile-references (myPageLoader is referenced from the DelegatePrototype) but for the question I don't think it is necessary to explain why I chose to use this crossfile-reference.
Related
I am new to Qt. Wondering if there a possibility to make an item "unselectable" in ListView.
I see there are a lot of other things, e.g: collapsing , expanding, etc.
**
I have not find any simple example for this problem. **
Can you provide some minimalistic examples to make a specific item in the list unselectable?
I have the following minimalistic example. How can I set list item index 2 to be unselectable?
Window {
id: mainWindow
width: 130
height: 240
visible: truetitle: qsTr("Hello")
Rectangle {
id: bg
color: "#ffffff"
anchors.fill: parent
ListModel {
id: nameModel
ListElement { name: "Alice" }
ListElement { name: "Bob" }
ListElement { name: "Jay" }
ListElement { name: "Kate" }
}
Component {
id: nameDelegate
Text {
text: model.name
font.pixelSize: 24
}
}
ListView {
anchors.fill: parent
model: nameModel
delegate: nameDelegate
clip: true
highlight: Rectangle {
anchors { left: parent.left; right: parent.right }
//height: parent.height
color: "lightgrey"
}
}
}
}
I found numerous issues with your code snippet, so I attempted to address them all:
I made use of Page and set Page.background instead of declaring an outer Rectangle. This removes a level of indentation
I refactored NameComponent.qml to reduce the complexity of your main program
I change the delegate from Text to ItemDelegate so that it is clickable, and, it being clickable, I can (1) make the ListView have active focus so that it can receive keyboard events, (2) change the current item in the ListView => I think this achieves your criteria of being able to select a different item
I removed unnecessary anchoring from your highlight - your highlight will default anchor to your selected item
I set the width of your delegate to listView.width - I also made use of the ListView.view attached property so that your delegate and access properties from the ListView
Finally, I added a 20 pixel width vertical ScrollBar
import QtQuick
import QtQuick.Controls
Page {
background: Rectangle { color: "#ffffff" }
ListModel {
id: nameModel
ListElement { name: "Alice" }
ListElement { name: "Bob" }
ListElement { name: "Jay" }
ListElement { name: "Kate" }
}
ListView {
anchors.fill: parent
model: nameModel
delegate: NameDelegate { }
clip: true
highlight: Rectangle {
color: "lightgrey"
}
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
}
}
// NameDelegate.qml
import QtQuick
import QtQuick.Controls
ItemDelegate {
property ListView listView: ListView.view
width: listView.width - 20
text: model.name
font.pixelSize: 24
onClicked: {
listView.forceActiveFocus();
if (listView.currentIndex === index) {
listView.currentIndex = -1;
} else {
listView.currentIndex = index;
}
}
}
You can Try it Online!
I've got 3 list views on a single page and I want to create a single ListView header component that I can use with each list.
So I have a ListView:
ListView {
id: listOne
spacing: 5
header: headerComponent
model: ListOneModel
}
It references the following header component:
Component {
id: headerComponent
Rectangle {
width: ListView.view.width
height: 50
Label {
text: "List One"
font.pixelSize: 20
elide: Label.ElideRight
width: ListView.view.width
padding: {
left: 14
}
background: Rectangle {
color: "red"
}
}
}
}
How can I make the header component re-usable so that when I connect the ListView to the header I can also pass in a different title?
I know I can change the header component and add a titleText property, like so:
Component {
id: headerComponent
property string titleText: "My Title"
Rectangle {
width: ListView.view.width
height: 50
Label {
text: titleText
font.pixelSize: 20
elide: Label.ElideRight
width: ListView.view.width
padding: {
left: 14
}
background: Rectangle {
color: "red"
}
}
}
}
But how do I specify the titleText' property when using the header component in my ListView?
You could set a property within each listview then access that property from within the Header component.
For example:-
ListView {
id: listOne
property string headertitle: "list one header"
spacing: 5
header: headerComponent
model: ListOneModel
}
ListView {
id: listTwo
property string headertitle: "list two header"
spacing: 5
header: headerComponent
model: ListTwoModel
}
ListView {
id: listThree
property string headertitle: "list three header"
spacing: 5
header: headerComponent
model: ListThreeModel
}
Component {
id: headerComponent
Rectangle {
width: ListView.view.width
height: 50
Label {
text: ListView.view.headertitle
font.pixelSize: 20
elide: Label.ElideRight
width: ListView.view.width
padding: {
left: 14
}
background: Rectangle {
color: "red"
}
}
}
}
Create new file call ListHeader.qml contains your header:
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
property alias name: mylabel.text
width: ListView.view.width
height: 50
Label {
id: mylabel
text: "List One"
font.pixelSize: 20
elide: Label.ElideRight
width: parent.width
padding: {
left: 14
}
background: Rectangle {
color: "red"
}
}
}
And use it like this:
ListView {
header: ListHeader{
name: "ListOneNewName"
}
}
QML docs about importing and custom types.
I have ListView with a header delegate enabled. I have a header positioning property set to "OverlayHeader". The header will stay in place when scrolling through the elements. However, the elements will overlap the header. Is there a way to prevent this.
Example of list elements overlapping the header.
import QtQuick 2.5
Rectangle {
width: 360; height: 600
ListView {
width: 350; height: 200
anchors.centerIn: parent
id: myList
model: myModel
highlight: highlightBar
clip: true
snapMode: ListView.SnapToItem
headerPositioning: ListView.OverlayHeader
header: Rectangle {
id: headerItem
width: myList.width
height:50
color: "blue"
Text {
text: "HEADER"
color: "red"
}
}
delegate: Item {
id: delegateItem
width: 400; height: 20
clip: true
Text { text: name
}
MouseArea {
id: mArea
anchors.fill: parent
onClicked: { myList.currentIndex = index; }
}
}
}
Component {
id: highlightBar
Rectangle {
width: parent.width; height: 20
color: "#FFFF88"
}
}
ListModel {
id: myModel
}
/* Fill the model with default values on startup */
Component.onCompleted: {
for(var i = 0; i < 100; i++) {
myModel.append({ name: "Big Animal : " + i});
}
}
}
The header's default z value is 1, so you can set it to a higher value to ensure that it's over the delegates:
import QtQuick 2.5
Rectangle {
width: 360
height: 600
ListView {
width: 350
height: 200
anchors.centerIn: parent
id: myList
model: myModel
highlight: highlightBar
clip: true
snapMode: ListView.SnapToItem
headerPositioning: ListView.OverlayHeader
header: Rectangle {
id: headerItem
width: myList.width
height: 50
z: 2
color: "blue"
Text {
text: "HEADER"
color: "red"
}
}
delegate: Item {
id: delegateItem
width: 400
height: 20
Text {
text: name
}
MouseArea {
id: mArea
anchors.fill: parent
onClicked: {
myList.currentIndex = index
}
}
}
}
Component {
id: highlightBar
Rectangle {
width: parent.width
height: 20
color: "#FFFF88"
}
}
ListModel {
id: myModel
}
/* Fill the model with default values on startup */
Component.onCompleted: {
for (var i = 0; i < 100; i++) {
myModel.append({
name: "Big Animal : " + i
})
}
}
}
Note that clipping view delegates is bad for performance.
Here is the code, I create 4 buttons. When one is clicked I wanna that its color changes to red and the color of all the others change to black.
But looks like I could not access the color property.
Rectangle {
id: root
width: 200; height: 100
DelegateModel {
id: visualModel
model: ListModel {
ListElement { my_color: "red" }
ListElement { my_color: "black" }
ListElement { my_color: "black" }
ListElement { my_color: "black" }
}
groups: [
DelegateModelGroup { name: "selected" }
]
delegate: Rectangle {
id: item
height: 25
width: 200
color:my_color
MouseArea {
anchors.fill: parent
onClicked: {
console.log(visualModel.items.get(index).color)
for (var i = 0; i < root.count; i++){
if(index == i)
visualModel.items.get(i).color = "red";
else
visualModel.items.get(i).color = "black";
}
}
}
}
}
ListView {
anchors.fill: parent
model: visualModel
}
}
I advice you to use ExclusiveGroup from QML controls. Usually it is used for Action but it's possible to use it for any other Item. From the Qt docs:
It is possible to add support for ExclusiveGroup for an object or
control. It should have a checked property, and either a
checkedChanged, toggled(), or toggled(bool) signal.
So all we need is to add suitable property. Small example:
import QtQuick 2.5
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
width: 200
height: 400
ExclusiveGroup { id: exclusiveGroup }
ListView {
anchors.fill: parent
anchors.margins: 5
spacing: 2
model: 10
delegate: Rectangle {
id: myItem
property bool checked: false // <-- this is necessary
height: 30
width: parent.width
color: myItem.checked ? "lightblue" : "#DEDEDE"
border { width: 1; color: "#999" }
radius: 5
Text { text: "item" + (index + 1); anchors.centerIn: parent}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: myItem.checked = !myItem.checked;
}
Component.onCompleted: {
exclusiveGroup.bindCheckable(myItem);
}
}
}
}
I would like to know if it's possible to use (several) different delegates for a QML ListView.
Depending on the individual object in the ListView model, I would like to visualize the objects with different delegates.
This piece of code explains what I want to achieve:
main.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
ListModel {
id: contactsModel
ListElement {
name: "Bill Smith"
position: "Engineer"
}
ListElement {
name: "John Brown"
position: "Engineer"
}
ListElement {
name: "Sam Wise"
position: "Manager"
}
}
ListView {
id: contactsView
anchors.left: parent.left
anchors.top: parent.top
width: parent.width
height: parent.height
orientation: Qt.Vertical
spacing: 10
model: contactsModel
delegate: {
if (position == "Engineer") return Employee; //<--- depending on condition, load Contact{}
else if (position == "Manager") return Manager; //<--- depending on condition, load Person{}
}
}
}
Employee.qml (One possible Component which I would like to use as a delegate)
import QtQuick 2.4
Rectangle{
width: 200
height: 50
color: ListView.isCurrentItem ? "#003366" : "#585858"
border.color: "gray"
border.width: 1
Text{
anchors.centerIn: parent
color: "white"
text: name
}
}
Manager.qml (other Component I would like to use as a delegate)
import QtQuick 2.4
Rectangle{
width: 200
height: 50
color: "red"
border.color: "blue"
border.width: 1
Text{
anchors.centerIn: parent
color: "white"
text: name
}
}
I would appreciate any advice!
Thanks!
I've had the same problem, the Qt documentation is providing a pretty good answer: http://doc.qt.io/qt-5/qml-qtquick-loader.html#using-a-loader-within-a-view-delegate
The easiest solution is an inline Component with a Loader to set a source file:
ListView {
id: contactsView
anchors.left: parent.left
anchors.top: parent.top
width: parent.width
height: parent.height
orientation: Qt.Vertical
spacing: 10
model: contactsModel
delegate: Component {
Loader {
source: switch(position) {
case "Engineer": return "Employee.qml"
case "Manager": return "Manager.qml"
}
}
}
}
Any attempt to use Loader.srcComponent will result in missing any variable from the model (including index). The only way for the variables to be present is the children Component to be inside the main Component, but then only one can be present, so it is useless.
I believe it would be better to implement one base delegate for all kind of position which loads concrete implementation depending on position or any other data properties using Loader
BaseDelegate {
property var position
Loader {
sourceComponent: {
switch(position) {
case "Engineer": return engineerDelegate
}
}
}
Component {
id: engineerDelegate
Rectangle {
Text { }
}
}
}
I implemented it as follow:
ListView {
id: iranCitiesList
model: sampleModel
delegate: Loader {
height: childrenRect.height
width: parent.width
sourceComponent: {
switch(itemType) {
case "image" :
return imageDel;
case "video":
return videoDel;
}
}
}
ImageDelegate { id: imageDel }
VideoDelegate { id: videoDel }
}
ImageDelegate.qml
Component {
Image { /*...*/ }
}
VideoDelegate.qml
Component {
Item { /*....*/ }
}
Last note, check width and height of delegates. In my case, I had to set width and height of my delegate in Loader again.
Good luck - Mousavi
The simplest way to do this now is using DelegateChooser. This also allows you to edit the properties of the delegates, which is something that is more difficult to do with Loader!
Example inspired from the docs:
import QtQuick 2.14
import QtQuick.Controls 2.14
import Qt.labs.qmlmodels 1.0
ListView {
width: 640; height: 480
ListModel {
id: contactsModel
ListElement {
name: "Bill Smith"
position: "Engineer"
}
ListElement {
name: "John Brown"
position: "Engineer"
}
ListElement {
name: "Sam Wise"
position: "Manager"
}
}
DelegateChooser {
id: chooser
role: "position"
DelegateChoice { roleValue: "Manager"; Manager { ... } }
DelegateChoice { roleValue: "Employee"; Employee { ... } }
}
model: contractsModel
delegate: chooser
}
Sure, it's possible. ListView.delegate is a kind of pointer to a Component which will draw the items so you can change it.
For example:
Employee { id: delegateEmployee }
Manager { id: delegateManager}
...
ListView {
property string position
delegate: position == "Engineer" ? delegateEmployee : delegateManager
}
As far as you have only two types, the following code is as easy to maintain as easy to understand:
delegate: Item {
Employee { visible = position === "Engineer" }
Manager { visible = position === "Manager" }
}
In case the number of types will grow, it is not a suitable solution for it easily leads to an hell of if statement.
Because position is either "Manager" or "Engineer" and the delegates are saved in Manager.qml or Engineer.qml we can use a clever expression for Loader.source:
Loader {
source: position + ".qml"
}
Here's the full source:
import QtQuick
import QtQuick.Controls
Page {
ListModel {
id: contactsModel
ListElement { name: "Bill Smith"; position: "Engineer" }
ListElement { name: "John Brown"; position: "Engineer" }
ListElement { name: "Sam Wise"; position: "Manager" }
}
ListView {
id: listView
anchors.fill: parent
model: contactsModel
delegate: Loader {
width: ListView.view.width
source: position + ".qml"
}
}
}
//Engineer.qml
import QtQuick
import QtQuick.Controls
Rectangle {
property bool isCurrentItem: listView.currentIndex === index
height: 50
color: isCurrentItem ? "#0033cc" : "#585858"
border.color: "gray"
border.width: 1
Text {
anchors.centerIn: parent
color: "white"
text: name
}
}
//Manager.qml
import QtQuick
import QtQuick.Controls
Rectangle {
property bool isCurrentItem: listView.currentIndex === index
height: 50
color: isCurrentItem ? "#cc3300" : "#661100"
border.color: "blue"
border.width: 1
Text {
anchors.centerIn: parent
color: "white"
text: name
}
}
You can Try it Online!