can someone say me how to set up a icon mode for my listViewe in qml?
like this:
I know that this mode is available in the c++ version of the listview (setListMode)but in qml?
Greetings
I don't think there is a default component for this in QML but you can easily do one yourself using the Gridview Component and creating the delegate yourself.
ListModel {
id: modelIcons
ListElement { iconSource: "icon1.jpg"; iconText: "Train1" }
ListElement { iconSource: "icon2.jpg"; iconText: "Train2" }
ListElement { iconSource: "icon3.jpg"; iconText: "Train3" }
ListElement { iconSource: "icon4.jpg"; iconText: "Train4" }
ListElement { iconSource: "icon5.jpg"; iconText: "Train5" }
ListElement { iconSource: "icon6.jpg"; iconText: "Train6" }
ListElement { iconSource: "icon7.jpg"; iconText: "Train7" }
}
Component {
id: delegateListElement
Item {
width: 80
height: width
Column {
Image {
height: 50
width: 50
source: iconSource
}
Text {
text: iconText
}
}
}
}
GridView {
anchors.fill: parent
model: modelIcons
delegate: delegateListElement
focus: true
}
Related
I need to ensure that the ListView scrolls not only when hovering over it, but also in the area around it. As in the picture
I tried to do it like this, but scrolling with the mouse wheel still doesn't work
import QtQuick 2.0
import QtQuick.Controls 2.3
Rectangle {
height: 400
width: 300
color: "steelblue"
ScrollView {
anchors.fill: parent
wheelEnabled: true
ListView {
id: listView
anchors { fill: parent; margins: 40}
clip: true
model: appModel
delegate: Rectangle {
height: 50
width: listView.width
color: colorR
}
}
}
ListModel {
id: appModel
ListElement { colorR: "red"}
ListElement { colorR: "green"}
ListElement { colorR: "blue"}
ListElement { colorR: "cyan"}
ListElement { colorR: "yellow"}
ListElement { colorR: "blue"}
ListElement { colorR: "lightgray"}
ListElement { colorR: "red"}
ListElement { colorR: "green"}
ListElement { colorR: "blue"}
ListElement { colorR: "cyan"}
ListElement { colorR: "yellow"; }
ListElement { colorR: "lightgray"}
}
}
You can use WheelHandler outside the ListView
import QtQuick
import QtQuick.Controls
Rectangle {
height: 400
width: 300
color: "green"
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
WheelHandler {
onWheel: (event)=>{listView.flick(0, event.angleDelta.y*event.y)}
}
ListView {
id: listView
anchors { fill: parent; margins: 40}
model: 50
spacing: 10
delegate: Rectangle {
height: 50
width: listView.width
color: getRandomColor()
}
}
}
You can try this online.
I have a very simple code for drag and drop in qml.
But when you are dragging the rectangle while holding mouse the screen of window is glitched! and sometimes the color of some Rectangle vanishes.
Like this bug is reported, but not answered.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
import QtQml.Models 2.1
Window {
id: mainWindow
width: 700
height: 800
visible: true
color: 'grey'
Item {
anchors.fill: parent
GridView {
id: root
width: 320; height: 480
cellWidth: 80; cellHeight: 80
pixelAligned: true
displaced: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
}
model: DelegateModel {
id: visualModel
model: ListModel {
id: colorModel
ListElement { color: "blue" }
ListElement { color: "green" }
ListElement { color: "red" }
ListElement { color: "yellow" }
ListElement { color: "orange" }
ListElement { color: "purple" }
ListElement { color: "cyan" }
ListElement { color: "magenta" }
ListElement { color: "chartreuse" }
ListElement { color: "aquamarine" }
ListElement { color: "indigo" }
ListElement { color: "black" }
ListElement { color: "lightsteelblue" }
ListElement { color: "violet" }
ListElement { color: "grey" }
ListElement { color: "springgreen" }
ListElement { color: "salmon" }
ListElement { color: "blanchedalmond" }
ListElement { color: "forestgreen" }
ListElement { color: "pink" }
ListElement { color: "navy" }
ListElement { color: "goldenrod" }
ListElement { color: "crimson" }
ListElement { color: "teal" }
}
delegate: DropArea {
id: delegateRoot
width: 80; height: 80
onEntered: visualModel.items.move(drag.source.visualIndex, icon.visualIndex)
property int visualIndex: DelegateModel.itemsIndex
Binding { target: icon; property: "visualIndex"; value: visualIndex }
Rectangle {
id: icon
property int visualIndex: 0
width: 72; height: 72
anchors {
horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter
}
radius: 3
color: model.color
Text {
anchors.centerIn: parent
color: "white"
text: parent.visualIndex
}
DragHandler {
id: dragHandler
}
Drag.active: dragHandler.active
Drag.source: icon
Drag.hotSpot.x: 36
Drag.hotSpot.y: 36
states: [
State {
when: icon.Drag.active
ParentChange {
target: icon
parent: root
}
AnchorChanges {
target: icon
anchors.horizontalCenter: undefined
anchors.verticalCenter: undefined
}
}
]
}
}
}
}}
}
Before:
After:
With add attribute of open-gl in main.cpp
QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);
#SAt looks like you found the issue with your rendering engine. Sometimes there are quirks like that in your graphics card and may require updating your graphics driver. Otherwise, as you found, see the other rendering options with QCoreApplication::setAttribute() or by setting the QT_OPENGL environment variable:
Qt::AA_UseDesktopOpenGL Equivalent to setting QT_OPENGL to desktop.
Qt::AA_UseOpenGLES Equivalent to setting QT_OPENGL to angle.
Qt::AA_UseSoftwareOpenGL Equivalent to setting QT_OPENGL to software.
References:
https://doc.qt.io/qt-6/qcoreapplication.html#setAttribute
https://doc.qt.io/qt-6/qt.html#ApplicationAttribute-enum
https://doc.qt.io/qt-5/windows-requirements.html#graphics-drivers
I test your code in my system and it works well.
My OS is Ubuntu 20.04.
My Qt Version is 5.15.2 and 6.2.3 I checked in both.
This is the Result:
I have ListView with some text input fields inside it:
Window {
visible: true
ListModel {
id: textModel
ListElement {
text: "Bill Smith"
}
ListElement {
text: "John Brown"
}
ListElement {
text: "Sam Wise"
}
}
ListView {
width: 180; height: 200
focus: true
model: textModel
delegate: RowLayout{
id: layout
Label {
text: model.text
}
TextField {
text: model.text
}
}
}
}
And I want to set input focus to the first TextField in the list. How can I do this? If I add focus: true in ListView it does not help.
You have to activate the focus of the TextField using the ListView.isCurrentItem property:
ListView {
id: view
width: 180; height: 200
focus: true
model: textModel
delegate: RowLayout{
id: layout
Label {
text: model.text
}
TextField {
focus: layout.ListView.isCurrentItem
text: model.text
}
}
// Component.onCompleted: view.currentIndex = 0
}
I am using a grid view, which can scrolled from left to right. When click on each item in the grid view, new screen launches with an animation from the current grid item position to the screen width and screen height. When click on the 2nd column elements after the grid view scrolled to right, the grid item position is getting wrong. Is there any way to fix this ? Or is there any method to check whether the grid view scrolled to the extreme right ?
Am putting my code below :
GridView {
id: featuresGrid
snapMode: ListView.SnapToItem
clip:true
x: 135
y: 122
width:1650
height:485
cellWidth: 825
cellHeight: 160
flow: GridView.FlowTopToBottom
model:favouriteapp
delegate:featureGridTile
focus: false
}
ListModel {
id:favouriteapp
ListElement {
featureName: "media & radio"
}
ListElement {
featureName: "phone"
}
ListElement {
featureName: "climate"
}
ListElement {
featureName: "navigation"
}
ListElement {
featureName: "ambient lighting"
}
ListElement {
featureName: "settings"
}
ListElement {
featureName: "camera"
}
ListElement {
featureName: "dynamic-i"
}
ListElement {
featureName: "bluetooth"
}
}
Component {
id: featureGridTile
Item {
id:grid_view_rect
width:featuresGrid.cellWidth
height:featuresGrid.cellHeight
Text{
anchors.fill: parent
text : featureName
opacity: 1
}
MouseArea{
anchors.fill: parent
onClicked: {
featuresGrid.currentIndex = index
//Goes to the next screen with the current clicked grid item X and Y position
}
}
}
}
What you are looking for are the mapFromItem and mapToItem functions:
http://doc.qt.io/qt-5/qml-qtquick-item.html#mapFromItem-method-1
Item {
id: rootItem
anchors.fill: parent
Rectangle {
id: myRect
color: 'red'
width: 50
height: 50
// the + 0 * featuresGrid.contentX will force the binding to reevaluate when draged. Maybe you don't want that. Comment it out and try
x: featuresGrid.currentItem.mapToItem(rootItem, 0, 0).x + 0 * featuresGrid.contentX
y: featuresGrid.currentItem.mapToItem(rootItem, 0, 0).y + 0 * featuresGrid.contentY
z: 1
}
GridView {
id: featuresGrid
snapMode: ListView.SnapToItem
clip:true
x: 135
y: 122
width:1650
height:485
cellWidth: 825
cellHeight: 160
flow: GridView.FlowTopToBottom
model:favouriteapp
delegate:featureGridTile
focus: false
}
ListModel {
id:favouriteapp
ListElement {
featureName: "media & radio"
soureIcon:"file:graphics/Icons/MediaIcon.png"
feature:"Media"
}
ListElement {
featureName: "phone"
soureIcon:"file:graphics/Icons/Phoneicon.png"
feature:"Phone"
}
ListElement {
featureName: "climate"
soureIcon:"file:graphics/Icons/ClimateIcon.png"
feature:"Climate"
}
ListElement {
featureName: "navigation"
soureIcon:"file:graphics/Icons/NavIcon.png"
feature:"Navigation"
}
ListElement {
featureName: "ambient lighting"
soureIcon:"file:graphics/Icons/ALIcon.png"
feature:"AL"
}
ListElement {
featureName: "settings"
soureIcon:"file:graphics/Icons/SettingsIcon.png"
feature:"Settings"
}
ListElement {
featureName: "camera"
soureIcon:"file:graphics/Icons/CamIcon.png"
feature:"Camera"
}
ListElement {
featureName: "dynamic-i"
soureIcon:"file:graphics/Icons/dynamicIcon.png"
feature:"Dynamic_I"
}
ListElement {
featureName: "bluetooth"
soureIcon:"file:graphics/Icons/Icon Bluetooth.png"
feature:"Bluetooth"
}
}
}
Component {
id: featureGridTile
Item {
id:grid_view_rect
width:featuresGrid.cellWidth
height:featuresGrid.cellHeight
Rectangle{
anchors.fill: parent
color: "white"
opacity: 1
border.color: 'black'
}
Text{
anchors.fill: parent
text : featureName
opacity: 1
}
MouseArea{
anchors.fill: parent
onClicked: {
featuresGrid.currentIndex = index
//Goes to the next screen with the current clicked grid item X and Y position
}
}
}
}
I'm a QT newbie, i have learned to use grid view by connecting a list model. I want to limit the active viewing images to be just 4 instead of all the items in the list model
Rectangle {
id: Rect1;
width: 1280; height: 720;
ListModel {
id: listAssetModel
ListElement { Movie: "Arrow"; PosterURL: "posters/Arrow.jpg" }
ListElement { Movie: "Avatar"; PosterURL: "posters/Avatar.jpg" }
ListElement { Movie: "Avenge"; PosterURL: "posters/Avenge.jpg" }
ListElement { Movie: "Arrow"; PosterURL: "posters/Arrow.jpg" }
ListElement { Movie: "Avatar"; PosterURL: "posters/Avatar.jpg" }
ListElement { Movie: "Avenge"; PosterURL: "posters/Avenge.jpg" }
ListElement { Movie: "Arrow"; PosterURL: "posters/Arrow.jpg" }
ListElement { Movie: "Avatar"; PosterURL: "posters/Avatar.jpg" }
ListElement { Movie: "Avenge"; PosterURL: "posters/Avenge.jpg" }
}
GridView {
id: gridAssetPreview;
currentIndex: -1 // default - no focus on poster
x: 56; y: 189
width: 1140; height: 300
focus: true
cellWidth: 275; cellHeight: 300 // keeps the poster preview images aligned
highlight: appHighlight
model: listAssetModel
delegate: appDelegate
}
Component {
id: appDelegate
Item {
width: 250; height: 350 // controls the appHighlight size
Image {
id: imgPosterPreview
width: 225; height: 325
source: PosterURL
smooth: true
}
Text {
id: textAssetName
anchors { // draw this below and centre to the image
top: imgPosterPreview.bottom;
horizontalCenter: imgPosterPreview.horizontalCenter
}
text: AssetName
font.pointSize: 16
color:"white"
smooth: true
}
}
}
}
Grid view area is defined as below, but it seems on running it shows multiple rows of images which is not something i expect. I just want to see only 4 images in the whole 1280 x 720 screen.
width: 1140; height: 300
Please help, im stuck with this on my Sunday :-(
Add to your GridView:
flow: GridView.TopToBottom