I need margins between elements in QML ListView. With this code I get margin of column of elements, but I need margin between each element:
ListModel {
id: listModel
ListElement {
name: "Apple"
}
ListElement {
name: "Banana"
}
}
Component {
id: listDelegate
Rectangle {
width: 250; height: 100
anchors.margins: 30
color: "green"
Text {
id: itexItem
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 40
text: name
}
}
}
ListView {
id: listView
anchors.fill: parent;
anchors.margins: 50
model: listModel
delegate: listDelegate
focus: true
}
I get margin between box of list element. Is it work fine. I need margin between each element of ListView. I need column like:
Element "Apple"
margin
Element "Banana"
Add:
spacing: value
to your ListView properties.
Related
I am trying to customize the QML 2.14 ComboBox.
I did follow the below link but I am not able to customize the ComboBox -> Popup -> ListView -> "delegate"
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox
I want to have diffrent Text Color for the list item displayed inside the ComboBox Popup.
ComboBox {
id: myComboBox
model: ["First", "Second", "Third"]
popup: Popup {
y: myComboBox.height - 1
width: parent.width
implicitHeight: contentItem.implicitHeight
contentItem: ListView {
clip: true
anchors.fill: parent
model: myComboBox.popup.visible ? myComboBox.delegateModel : null
ScrollIndicator.vertical: ScrollIndicator {}
delegate: Text {
width: parent.width
height: 30
text: "Test" // How to access flat model, modelData is null and model.get(index) is not allowed in .ui.qml
color: "#ffffff"
anchors.horizontalCenter: parent.horizontalCenter
anchors.left: parent.left
}
highlight: Rectangle { color: "yellow" }
}
}
}
But I always see some default list with black text, in the combobox popup.
Also not able to apply the highlight to selected line in the popup.
The Combobox's model is a DelegateModel. That means the delegate is attached to the model. So trying to set the ListView's delegate will not have any effect. But the Combobox has its own delegate property that you can set.
ComboBox {
delegate: Text {
width: parent.width
height: 30
text: modelData
color: "#ffffff"
anchors.horizontalCenter: parent.horizontalCenter
}
}
I am working on some QML + c++ project and, I have a little problem with QML layouts:
I have two custom components :
First one: is a side-bar "SideTabBar.qml" (the purple rectangle in the image below).
Second one: is the element in the side-bar "SideBarElement.qml".
This image describes what I am talking about:
What I want is: highlight each side bar element on click.
To do so I am trying to iterate over the columnLayout children and lowlight them excepting the clicked one. But, I have not managed to make it works.
SideTabBar.qml:
Item {
id: sideTabBar
width: 70
height: parent.height
property string activeElement: ""
ColumnLayout{
id:sidebarLayout
anchors.fill: parent
spacing:2
SideBarElement{elementId:"a1";image:"../assets/product.svg"}
SideBarElement{elementId:"a2";image:"../assets/product.svg"}
Item {Layout.fillHeight: true}
}
}
SideBarElement.qml:
Item {
property alias image: sideBarElementicon.source
property string elementId: ""
id: sideBarElement
width:parent.width
Layout.preferredHeight: 70
Layout.alignment: Qt.AlignTop
Rectangle{
anchors.fill: parent
color:Qt.rgba(0,0,0,0)
}
Image {
id: sideBarElementicon
source: "genericIcon.png"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: 50
height: 50
}
MouseArea{
anchors.fill: parent
onClicked:{ sideTabBar.activeElement = elementId
// compiler does not even enter this loop.
// for(var child in Layout.children){
// console.log("this is a child")
// }
}
}
}
In this case it is better to work with a Repeater since it has an associated index and use a model to set the properties:
SideBarElement.qml
import QtQuick 2.0
Item {
property alias icon: sideBarElementicon.source
property bool highlight: false
width: parent.width
Rectangle{
anchors.fill: parent
color: highlight ? Qt.rgba(1,1,0,1) : Qt.rgba(0,0,0,0)
}
Image {
id: sideBarElementicon
source: "genericIcon.png"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: 50
height: 50
}
}
SideTabBar.qml
import QtQuick 2.0
import QtQuick.Layouts 1.11
Item {
id: sideTabBar
width: 70
height: parent.height
property int currentIndex: -1
ListModel{
id: elements
ListElement {
image: "../assets/product.svg"
}
ListElement {
image: "../assets/product.svg"
}
ListElement {
image: "../assets/product.svg"
}
ListElement {
image: "../assets/product.svg"
}
ListElement {
image: "../assets/product.svg"
}
ListElement {
image: "../assets/product.svg"
}
}
Rectangle{
anchors.fill: parent
color: "purple"
}
ColumnLayout{
id:sidebarLayout
anchors.fill: parent
spacing:2
Repeater{
model: elements
SideBarElement{
id: element
highlight: ix == currentIndex
icon: image
property int ix: index
Layout.preferredHeight: 70
Layout.alignment: Qt.AlignTop
MouseArea{
anchors.fill: parent
onClicked: currentIndex = ix
}
}
}
Item {Layout.fillHeight: true}
}
}
I am making UI for a game. When I tried to put margin for the image tab.png
It doesn't reflect any changes to it. It stays where it was before. I also tried to solve this problem by adding the margins through the Layout and by adding it outside the rectangle and row layout but nothing happened.
Also when I am adding margin to the bottom to the user.png to shift it a bit upward, it isn't shifting. So please help me out to solve this. I want to position the tab.png as this layout
The second circle is where I want to place the tab.png. The output of the code
Window {
visible: true
width: 800
height: 600
title: qsTr("Main screen")
ColumnLayout{
spacing: 0
anchors.fill: parent
Item {
id: titlebar
Layout.preferredHeight: 60
Layout.fillWidth: true
RowLayout {
anchors.fill: parent
spacing: 0
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
source: "qrc:/img/tab.png"
anchors.leftMargin: undefined
Layout.leftMargin: 20
}
}
Rectangle {
Layout.preferredWidth: 100
Layout.fillHeight: true
color: "#f46b42"
/*Text {
anchors.centerIn: parent
text: "Actions"
}*/
Image{
id:image_user
source: "qrc:/img/user.png"
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset:
anchors.left=parent.left
anchors.leftMargin: 10
clip: true
}
Item{
id:text_content
anchors.centerIn: parent
anchors.bottomMargin: 20
Text{
id:text_user
text: "User"
anchors.bottom:text_value.top
anchors.bottomMargin: 4
}
Text{
id:text_value
text:"$ 2000"
color:"yellow"
}}
}
}
}
Rectangle {
id: content
Layout.fillHeight: true
Layout.fillWidth: true
color: "lightyellow"
Text {
anchors.centerIn: parent
}
Column{
spacing: 1;
Repeater{
id:mmm
model: 5
Rectangle{
id:imgl
width: 100
height: 100
color: "#4286f4"
property string src: ""
MouseArea{
anchors.fill:parent
onClicked: {
parent.color="";
}
}
Image {
id: imgx
source: parent.src;
anchors.verticalCenter: parent.verticalCenter
}
onParentChanged: {
mmm.itemAt(0).src="qrc:/img/5by90.png";
mmm.itemAt(1).src="qrc:/img/6by42.png";
mmm.itemAt(2).src="qrc:/img/12by24.png";
mmm.itemAt(3).src="qrc:/img/fortune.png";
mmm.itemAt(4).src="qrc:/img/mini-roulette.png";
}
}
}
}
}
}
}
Layouts only affect your direct children, not the children of the children., so Layout.leftMargin: 20 will not affect Image as you see in this case.
The solution is really simple, it establishes the property x: 20 since the position of item is with respect to the parent's topleft position
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
x:20
source: "qrc:/img/tab.png"
}
}
Inside Rectangle, for child elements, you need to use anchors.margin, whereas for Layouts child element can use Layout.margin.You need to use anchors.leftMargin: as Parent is Rectangle, Layout.margin will not have any effect.
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "black"
Image {
source: "qrc:/img/tab.png"
anchors.leftMargin: 20
}
}
My question is kind of a two part conditional question. I have a desktop application I'm writing in C++/Qt. In the app I have a couple lists that I want to decorate and add list items with icons and rich text.
I first attempted to do this with the QWidget world but the more I looked into it, the more I thought QML might be a better option. But now I'm wondering about that as well since it seems that QML Is more geared toward touch screen devices. Not to mention that my progress with QML has been frusating. Give them QML below, I cannot figure out how to: (1) get an item to highlight when I click it and (2) add a scroll bar:
import QtQuick 1.0
Item
{
width: 300
height: 200
ListModel
{
id: myModel2
ListElement { text: "List Item 1" }
ListElement { text: "List Item 2" }
ListElement { text: "List Item 3" }
ListElement { text: "List Item 4" }
ListElement { text: "List Item 5" }
ListElement { text: "List Item 6" }
}
Component
{
id: beerDelegate
Rectangle
{
id: beerDelegateRectangle
height: beerDelegateText.height * 1.5
width: parent.width
Text
{
id: beerDelegateText
text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>"
}
MouseArea
{
anchors.fill: parent
onClicked:
{
console.log("clicked: " + modelData + " at index: " + index);
beerList.currentIndex = index;
}
}
}
}
ListView
{
id: beerList
anchors.fill: parent
model: myModel2
delegate: beerDelegate
highlightFollowsCurrentItem: true
highlight: Rectangle
{
width: parent.width
color: "red"
}
focus: true
}
}
How can I accomplish what I'm looking for given this QML? Or is using QML in a QWidget desktop app just a bad idea all around?
For the first question (highlight):
Your list actually draws the highlight, however, your item delegate overpaints this with a white rectangle! Just replace the rectangle with an item and it works:
Component
{
id: beerDelegate
Item
{
...
}
}
For the second question (scroll bars):
As far as I know, QML doesn't provide scroll bars out of the box. There is however the Qt Desktop Components project (git repository) which gives you access to most of the widgets in the QML world. Among them, there is a ScrollArea.
It is no longer necessary to implement the Scrollbars yourself. There is the ScrollView-Item since Qt 5.1. Simply surround a Flickable-Item (e.g. the ListView-Item you use, is also "Flickable") with the ScrollView-Item and you'll be fine:
ScrollView {
ListView {
id: beerList
anchors.fill: parent
model: myModel2
delegate: beerDelegate
highlightFollowsCurrentItem: true
highlight: Rectangle
{
width: parent.width
color: "red"
}
focus: true
}
}
For the second question. i.e Scroll-bar on ListView:
I have created code for scroll bar on ListView. It also can work on the GridView
ScrollBar.qml
import Qt 4.7
Item {
property variant target
width: 8
anchors.top: target.top
anchors.bottom: target.bottom
anchors.margins: 1
anchors.rightMargin: 2
anchors.bottomMargin: 2
anchors.right: target.right
visible: (track.height == slider.height) ? false : true
Image {
id: scrollPath
width: 2
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
source: "qrc:/resources/buttons/slider2.png"
}
Item {
anchors.fill: parent
Timer {
property int scrollAmount
id: timer
repeat: true
interval: 20
onTriggered: {
target.contentY = Math.max(0, Math.min(target.contentY + scrollAmount,
target.contentHeight - target.height));
}
}
Item {
id: track
anchors.top: parent.top
anchors.topMargin: 1
anchors.bottom: parent.bottom
width: parent.width
MouseArea {
anchors.fill: parent
onPressed: {
timer.scrollAmount = target.height * (mouseY < slider.y ? -1 : 1)
timer.running = true;
}
onReleased: {
timer.running = false;
}
}
Image {
id:slider
anchors.horizontalCenter: parent.horizontalCenter
source: "qrc:/resources/buttons/slider.png"
width: parent.width
height: Math.min(target.height / target.contentHeight * track.height, track.height) < 20 ? 20 : Math.min(target.height / target.contentHeight * track.height, track.height)
y: target.visibleArea.yPosition * track.height
MouseArea {
anchors.fill: parent
drag.target: parent
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: track.height - height
onPositionChanged: {
if (pressedButtons == Qt.LeftButton) {
target.contentY = slider.y * target.contentHeight / track.height;
}
}
}
}
}
}
}
And I used scroll bar item with ListView in MyListView.qml as:
MyListView.qml
ListView {
id: list
clip: true
anchors.margins: 5
anchors.fill: parent
model: 10
delegate: trackRowDelegate
interactive: contentHeight > height
}
ScrollBar {
id: verticalScrollBar
target: list
clip: true
}
This ScrollBar item can be used with GridView as
GridView {
id: grid
clip: true
anchors.margins: 5
anchors.fill: parent
cellWidth:100
cellHeight: 100
model: items
interactive: contentHeight > height
snapMode: GridView.SnapToRow
delegate: myDelegate
}
ScrollBar {
id: verticalScrollBar
target: grid
clip: true
visible: grid.interactive
}
Hi I want to put this code :
highlight: Rectangle {
color: "black"
radius: 5
opacity: 0.7
focus: true
}
into mouseArea in onclick handler:
MouseArea {
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
onClicked: {
}
This is all listView:
ListView {
id: listview1
x: 0
y: 82
// width: 574
// height: 967
width: window.width
height: window.height
visible: true
keyNavigationWraps: false
boundsBehavior: Flickable.DragAndOvershootBounds
opacity: 1
maximumFlickVelocity: 2500
anchors.leftMargin: 0
highlightMoveSpeed: 489
contentWidth: 0
preferredHighlightEnd: 2
spacing: 5
highlightRangeMode: ListView.NoHighlightRange
snapMode: ListView.SnapToItem
anchors.bottomMargin: 0
anchors.rightMargin: 0
anchors.topMargin: 82
anchors.fill: parent
model: myModel
delegate:Component {
//id: contactDelegate
Item {
property variant myData: model
width: 574; height: 90
Column {
x: 12
y: 0
width: 562
height: 90
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 12
anchors.topMargin: 0
anchors.fill: parent
spacing: 2
Text { text: '<b>ID: </b> ' + id_user ; verticalAlignment: Text.AlignTop; wrapMode: Text.NoWrap; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { text: '<b>Name: </b> ' + user_name; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { text: '<b>Lastname: </b> ' + user_lastname; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { height: 16; text: '<b>Tel number: </b> ' + user_number; verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { text: '<b>Address: </b> ' + user address; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
MouseArea {
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
onClicked:
Item
{
}
}
}
}
}
//delegate: contactDelegate
highlight: Rectangle
{
color:"black"
radius: 5
opacity: 0.7
focus: true
}
}
For now highlight is working only when using arrows, bbut this will be app for android so I need on touch that same effect, and SECOND question is how to read certain data from selected item in listview?
Inside I have like id,name,lastname,number and adress.
I want to put those values into text_input boxes.
Thank you
It appears you need two solutions to your question:
You want to be able to set the current item of the ListView when it's clicked
You want to be able to know when the current selection changes
The Qt5 documentation says this about ListView mouse and touch handling:
The views handle dragging and flicking of their content, however they do not handle touch interaction with the individual delegates. In order for the delegates to react to touch input, e.g. to set the currentIndex, a MouseArea with the appropriate touch handling logic must be provided by the delegate.
Key input will work out-of-the-box but you'll need to explicitly catch the mouse/touch event on the delegate, and change the ListView.currentIndex value based on the index value of the selected delegate item.
Here's a full example:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
width: 640
height: 480
visible: true
ListModel {
id: model
ListElement {
name:'abc'
number:'123'
}
ListElement {
name:'efg'
number:'456'
}
ListElement {
name:'xyz'
number:'789'
}
}
ListView {
id: list
anchors.fill: parent
model: model
delegate: Component {
Item {
width: parent.width
height: 40
Column {
Text { text: 'Name:' + name }
Text { text: 'Number:' + number }
}
MouseArea {
anchors.fill: parent
onClicked: list.currentIndex = index
}
}
}
highlight: Rectangle {
color: 'grey'
Text {
anchors.centerIn: parent
text: 'Hello ' + model.get(list.currentIndex).name
color: 'white'
}
}
focus: true
onCurrentItemChanged: console.log(model.get(list.currentIndex).name + ' selected')
}
}
It does the following things:
creates a simple list and model
uses a MouseArea item within the item delegate to update set the list.currentIndex = index which is a local var and unique to the selected item
listens for the onCurrentItemChanged event of the ListView to show how to access the current model item values
binds the text value of the currently selected item to the highlight item to show using the currently selected values elsewhere
Answer provided by denoth: You need to add this line:
listview1.currentIndex = index
ListView provides so called "attached properties", i.e. properties available in the delegate for the list. Among them Listview.view is a reference to the list itself. It can be used to access currentIndex property and update it. Hence, to solve your issue just:
Uncomment //id: contactDelegate.
Set contactDelegate.ListView.view.currentIndex = index in the
OnClick even handler.
For those who use highlighting on a ListView with a specific height (being: not 100% height filled):
Be sure to enable the clip property of the ListView, as else the highlight will still be visible outside the ListView's borders while scrolling.
ListView
{
clip: true
}
As discussed here:
Hide the highlight of a ListView while scrolling
Simplest than ever, you can use: onCurrentItemChanged
ListView{
id: listViewMainMenu
signal Myselect(int playmode)
onCurrentItemChanged: {
Myselect(listViewMainMenu.currentIndex)
console.log("index changed see this " + currentIndex)
}
// ...
}
// do not forget to connect to this signal
otheritem.connect(thisitem.Myselect) //used in drag and works also with pathview
The answer is indeed listView.currentIndex = index.
Whilst playing around with this answer, I found that the ListView may not have keyboard focus, so, I found it may be necessary to call listView.forceActiveFocus() so that up and down arrow key presses are handled.
I found the delegate, particularly the usage of Text in the ListView delegate to be verbose and cumbersome. To clean that up, I refactored an AppInfo component for rendering the contact in a nice manner.
To polish the answer, I provided some sample data for the contacts ListModel and cleaned up the highlight mechanism:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ListView {
id: listView
anchors.fill: parent
model: contacts
clip: true
focus: true
delegate: Item {
width: frame.width
height: frame.height
Frame {
id: frame
background: Item { }
ColumnLayout {
id: columnLayout
AppInfo { label: "ID"; value: id_user }
AppInfo { label: "Name"; value: user_name }
AppInfo { label: "Last Name"; value: user_lastname }
AppInfo { label: "Tel number"; value: user_number }
AppInfo { label: "Address"; value: user_address }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
listView.currentIndex = index;
listView.forceActiveFocus();
}
}
}
highlight: Rectangle {
border.color: "black"
radius: 5
opacity: 0.7
focus: true
}
}
ListModel {
id: contacts
ListElement {
id_user: "bgates"
user_name: "Bill"
user_lastname: "Gates"
user_number: "555-Microsoft"
user_address: "1 Microsoft Way"
}
ListElement {
id_user: "sjobs"
user_name: "Steve"
user_lastname: "Jobs"
user_number: "555-Apple"
user_address: "1 Apple St"
}
ListElement {
id_user: "jbezos"
user_name: "Jeff"
user_lastname: "Bezos"
user_number: "555-Amazon"
user_address: "1 Amazon Ave"
}
}
}
//AppInfo.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
property string label: "ID"
property string value: "id"
Text {
Layout.preferredWidth: 100
text: label
verticalAlignment: Text.AlignTop
wrapMode: Text.NoWrap
horizontalAlignment: Text.AlignRight
color: "steelblue"
font.family: "Helvetica"
font.pointSize: 10
font.bold: true
}
Text {
Layout.preferredWidth: 100
text: value
verticalAlignment: Text.AlignTop
wrapMode: Text.NoWrap
horizontalAlignment: Text.AlignLeft
font.family: "Helvetica"
font.pointSize: 10
}
}
You can Try it Online!
There's ItemDelegate since Qt 5.7. It reacts to mouse clicks by default.
import QtQuick
import QtQuick.Controls
ListView {
model: ListModel {
ListElement {
name: "Item 1"
}
ListElement {
name: "Item 2"
}
ListElement {
name: "Item 3"
}
}
delegate: ItemDelegate {
text: name
}
}