I'm new to Qt with QML. I'm trying to set a property at the top element called buttonIndex so that the child elements could change the property by incrementing the value in the Button element to make the name go from "Device 1" -> "Device 15". This is my QML code below:
Page {
id: page_device
width: 1024
height: 600
property int buttonWidth: 170;
property int buttonHeight: 100;
property int buttonIndex: 1;
header: Label {
id: label_header_devices
text: qsTr("Devices")
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 20
}
Item {
id: item_devices
width: 300
height: 200
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Column {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 10
Repeater {
id: item_devices_rows
model: 3
Row {
spacing: 10
Repeater {
id: item_devices_columns
model: 5
Button {
id: button_device_
width: buttonWidth
height: buttonHeight
text: qsTr("Device ") + page_device.buttonIndex++
Material.foreground: Material.Pink
enabled: false
hoverEnabled: false
// onClicked: Material.background = Material.Teal
}
}
}
}
}
}
}
The output I'm getting is unwanted. I get "Device 107", "Device 108", "Device 109" etc.. I need to have it go from 1-15. I tried using the signal itemAdded in the code and re-assigning the value of the buttonIndex to increment by 1 each time but that didn't work either. And also I need to store that buttonIndex for the Button type such like "item_device_button_1". Any ideas how this can be solved?
As #folibis mentioned, you don't need to create your own property for this. Repeaters (and ListViews, etc.) give delegates access a property called index that already does exactly what you want. The index is 0-based, so if you want it to start at '1', then just add +1.
Repeater {
Button {
text: qsTr("Device ") + (index + 1)
}
}
Related
I have a row for a listview delegate with buttons on it. On click of a button, i need a dialog to open just below that button. I tried mapToItem property and partially succeeded but this listview is scrollable and on scrolling the dialog stays in its initial position. Unsure of how to get it working. Also, new to posting questions. Kindly ignore if I am being vague and help me out.
The dialog i want to open is placed outside of this delegate. I have provided a short outline of my code.
Listview{
delegate: Row{
Button1{
}
Button2{
id: button2Id
onCheckedChanged{
var coords = button2Id.mapToItem(null,0,0)
dialogId.x = coords.x
dialogId.y= coords.y
dialogId.visible = true
}
}
}
}
//dialog rect outside of my listview
Rectangle{
id: dialogId
}
You could add the dialog to the highlight item of the list. I have modified your example a little so that I could test it. I encapsulated your Rectangle in an Item because ListView controls the size and position of the root object of the highlight. The Rectangle then just has to be anchored to the bottom of that Item.
ListView {
id: lv
width: 200
height: parent.height
model: 50
spacing: 1
currentIndex: -1
delegate: Row {
spacing: 1
height: 40
Button {
text: index
}
Button {
id: button2Id
text: ">"
onClicked: {
lv.currentIndex = index;
}
}
}
highlight: Item { // ListView controls the size/pos of this Item
z: 1
Rectangle {
id: dialogId
anchors.top: parent.bottom // Anchor to bottom of parent
width: 200
height: 100
color: "red"
}
}
}
UPDATE:
Here is a way to keep the dialog directly under the button without calculating margins. I put it in a Loader so that each item in the list doesn't always carry the whole dialog around with it. It might make a performance difference.
The ugly part of this solution is the z-ordering. Each item in the list is drawn after the one that comes sequentially before it. (I'm not actually sure if that's even guaranteed.) That means the dialog gets drawn underneath any item that comes after it in the list. I was able to get around that by changing the z value of each item in the list to be less than the item before it.
ListView {
id: lv
width: 200
height: parent.height
model: 50
spacing: 1
currentIndex: -1
delegate: Row {
z: lv.count - index // <<- z-value fix
spacing: 1
height: 40
Button {
text: index
}
Button {
id: button2Id
text: ">"
onClicked: {
lv.currentIndex = index;
}
Loader {
anchors.top: parent.bottom
asynchronous: true
sourceComponent: (index === lv.currentIndex) ? dialogComp : null
}
}
}
}
Component {
id: dialogComp
Rectangle {
id: dialogId
width: 200
height: 100
color: "red"
}
}
I have a listview in which, each item has gridview inside it:
ListView{
id:list_roi
anchors.fill: parent
delegate: roi_item_view
model: roi_item_model
spacing: 5
clip: true
focus: true
ScrollBar.vertical: ScrollBar {}
onCurrentIndexChanged: {
valueUpdater.selected_roi_changed(list_roi.currentIndex)
}
highlight: Rectangle {
color: 'lightgray'
}
}
ListModel{
id:roi_item_model
ListElement {roi_rows: 2, roi_cols: 2, roi_subregion_model : [{_text:"555.3"},{_text:"555.3"},{_text:"555.3"}]}
}
Component{
id:roi_item_view
MouseArea {
anchors.fill: parent
onClicked: list_roi.currentIndex = index
}
GridLayout{
id:layout_wrapper
anchors.fill: parent
rows: 3
columns: 5
GridView {
id:grid_sub_region
Layout.row: 2
Layout.column: 0
Layout.columnSpan:5
Layout.alignment: Qt.AlignHCenter
width: roi_cols * 30; height: roi_rows * 30
cellWidth: 30; cellHeight: 30
visible : true
model: roi_subregion_model
delegate: contactsDelegate
focus: true
}
Component {
id: contactsDelegate
CellBox{
id: wrapper
width: 30
height: 30
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
id: contactInfo
text: _text
}
}
}
}
}
as you can see, inside model i have 3 property (roi_rows, roi_cols, roi_subregion_model) which are supposed to change the view of Gridview's rows, columns and data inside each cell, when i change them.
but when i change these values, number of cells inside Gridview does not changes. when i initialize roi_rows and toi_cols to 2 i will have 2x2 gridview after listview item is created. but after initialization i cannot change it. it seems i have to do something to refresh the UI of specific item inside Listview so that the Gridview inside that item will be redrawn.
Update
based on comments: width and height of the GridView will be set based on roi_rows, roi_cols which are part of Listview Model. and because the CellWidth and CellHeight are constant then number of cells (rows and columns of the Gridview) will be changed.
OK i found the answer. in Model,View,Delegate structure when we create a Delegate and want to bind it with a key inside Model, in some cases like 'text' for 'Label' it will be automatically bound automatically. in this example:
ListModel{
id:roi_item_model
ListElement {label_text:"Hello" ,roi_rows: 2, roi_cols: 2, roi_subregion_model : [{_text:"555.3"},{_text:"555.3"},{_text:"555.3"}]}
}
Component{
id:roi_item_view
MouseArea {
anchors.fill: parent
onClicked: list_roi.currentIndex = index
}
GridLayout{
id:layout_wrapper
anchors.fill: parent
rows: 3
columns: 5
Label{ text:label_text }
GridView {
id:grid_sub_region
Layout.row: 2
Layout.column: 0
Layout.columnSpan:5
Layout.alignment: Qt.AlignHCenter
width: roi_cols * 30; height: roi_rows * 30
cellWidth: 30; cellHeight: 30
visible : true
model: roi_subregion_model
delegate: contactsDelegate
focus: true
}
Component {
id: contactsDelegate
CellBox{
id: wrapper
width: 30
height: 30
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
id: contactInfo
text: _text
}
}
}
}
}
label_text inside Model will be bound to text property of Label automatically which means if i change label_text the content of Label will be changed automatically. but for some property we should do this binding manually. in out example add this to delegate of ListView:
Binding {
target: grid_sub_region
property: 'height'
value: roi_rows * 30
}
Binding {
target: grid_sub_region
property: 'width'
value: roi_cols * 30
}
My main.qml:
Window
{
visible: true
width: 640
height: 480
color: "grey"
GridLayout
{
anchors.fill: parent
columns : 2
rows : 2
Repeater
{
id: rectRepeater
model: 3
TextField
{
text: "hi"
}
}
}
Rectangle
{
id: r1
width: 100
height: 100
x: 200
y: 200
border.color: "red"
Text
{
id: t1
}
}
Component.onCompleted:
{
t1.text= rectRepeater.itemAt(0).text
}
}
The Text in the rectangle r1 displays the text at the start, but if I enter new text to the TextField, the rectangle will not be updated. How can I solve this?
A more elegant and maintainable solution is to implement a model that reflects the changes, and then make a binding of the first element with the text that shows Text:
Window{
visible: true
width: 640
height: 480
color: "grey"
ListModel{
id: mymodel
}
Component.onCompleted: {
for(var i=0; i<3; i++){
mymodel.append({"text" : "hi"})
}
}
GridLayout{
anchors.fill: parent
columns : 2
rows : 2
Repeater{
model: mymodel
TextField{
id: tf
onTextChanged: model.text = tf.text
Component.onCompleted: tf.text= model.text
}
}
}
Rectangle{
id: r1
width: 100
height: 100
x: 200
y: 200
border.color: "red"
Text {
id: t1
text: mymodel.count > 1 ? mymodel.get(0).text : ""
}
}
}
What you want, is to create a binding between the two.
Component.onCompleted:
{
t1.text = Qt.binding(function() { return rectRepeater.itemAt(0).text })
}
That being said, we would need to know exactly what you are trying to do, because creating bindings manually is an anti-pattern when not required. It is much better to bind directly, or to use signals.
Do you need the first elements, and the repeater, or is this just an test for you? What is your UI and what are you trying to achieve? This is some context worth giving for a proper answer.
One possible simpler solution
Repeater
{
id: rectRepeater
model: 3
TextField
{
text: "hi"
// See also `onEditingFinished` and `onValidated`
onTextChanged: {
if (index == 0)
t1.text = text
}
}
}
For more details about the property thing, look at my answers from your other question: Qml Repeater with ids
I am using a ComboBox in QML and when populated with a lot of data it exceeds my main windows bottom boarder. From googling I have learned that the drop-down list of a ComboBox is put on top of the current application window and therefore it does not respect its boundaries.
Ideally I would want the ComboBox to never exceed the main applications boundary, but I can not find any property in the documentation.
A different approach would be to limit the number of visible items of the drop-down list so that it do not exceed the window limits for a given window geometry. I was not able to find this in the documentation either and I have run out of ideas.
Take a look to the ComboBox source code, the popup is of a Menu type and it doesn't have any property to limit its size. Moreover, the z property of the Menu is infinite, i.e. it's always on top.
If you Find no way but to use the ComboBox of Qt you can create two models one for visual purpose, I will call it visual model, you will show it in your ComboBox and the complete one , it will be the reference model. Items count in your VisualModel wil be equal to some int property maximumComboBoxItemsCount that you declare . you'll need o find a way that onHovered find the index under the mouse in the visualmodel if it's === to maximumComboBoxIemsCount you do visualModel.remove(0) et visualModel.add(referenceModel.get(maximum.. + 1) and you'll need another property minimumComboBoxIemsCount, same logic but for Scroll Up , I dont know if it will work. but it's an idea
I think there is no solution using the built-in component and you should create your own comboBox. You can start from the following code.
ComboBox.qml
import QtQuick 2.0
Item {
id: comboBox
property string initialText
property int maxHeight
property int selectedItem:0
property variant listModel
signal expanded
signal closed
// signal sgnSelectedChoice(var choice)
width: 100
height: 40
ComboBoxButton {
id: comboBoxButton
width: comboBox.width
height: 40
borderColor: "#fff"
radius: 10
margin: 5
borderWidth: 2
text: initialText
textSize: 12
onClicked: {
if (listView.height == 0)
{
listView.height = Math.min(maxHeight, listModel.count*comboBoxButton.height)
comboBox.expanded()
source = "qrc:/Images/iconUp.png"
}
else
{
listView.height = 0
comboBox.closed()
source = "qrc:/Images/iconDown.png"
}
}
}
Component {
id: comboBoxDelegate
Rectangle {
id: delegateRectangle
width: comboBoxButton.width
height: comboBoxButton.height
color: "#00000000"
radius: comboBoxButton.radius
border.width: comboBoxButton.borderWidth
border.color: comboBoxButton.borderColor
Text {
color: index == listView.currentIndex ? "#ffff00" : "#ffffff"
anchors.centerIn: parent
anchors.margins: 3
font.pixelSize: 12
text: value
font.bold: true
}
MouseArea {
anchors.fill: parent
onClicked: {
listView.height = 0
listView.currentIndex = index
comboBox.selectedItem = index
tools.writePersistence(index,5)
comboBoxButton.text = value
comboBox.closed()
}
}
}
}
ListView {
id: listView
anchors.top: comboBoxButton.bottom
anchors.left: comboBoxButton.left
width: parent.width
height: 0
clip: true
model: listModel
delegate: comboBoxDelegate
currentIndex: selectedItem
}
onClosed: comboBoxButton.source = "qrc:/Images/iconDown.png"
Component.onCompleted: {
var cacheChoice = tools.getPersistence(5);
listView.currentIndex = tools.toInt(cacheChoice)
selectedItem = listView.currentIndex
comboBoxButton.text = cacheModel.get(selectedItem).value
}
}
ComboBoxButton.qml
import QtQuick 2.0
Item {
id: container
signal clicked
property string text
property alias source : iconDownUp.source
property string color: "#ffffff"
property int textSize: 12
property string borderColor: "#00000000"
property int borderWidth: 0
property int radius: 0
property int margin: 0
Rectangle {
id: buttonRectangle
anchors.fill: parent
color: "#00000000"
radius: container.radius
border.width: container.borderWidth
border.color: container.borderColor
Image {
id: image
anchors.fill: parent
source: "qrc:/Images/buttonBackground.png"
Image {
id: iconDownUp
source: "qrc:/Images/iconDown.png"
sourceSize.height:20
sourceSize.width: 20
anchors.verticalCenter: parent.verticalCenter
}
}
Text {
id:label
color: container.color
anchors.centerIn: parent
font.pixelSize: 10
text: container.text
font.bold: true
}
MouseArea {
id: mouseArea;
anchors.fill: parent
onClicked: {
container.clicked()
buttonRectangle.state = "pressed"
startTimer.start()
}
}
Timer{
id:startTimer
interval: 200
running: false;
repeat: false
onTriggered: buttonRectangle.state = ""
}
states: State {
name: "pressed"
when: mouseArea.pressed
PropertyChanges { target: image; scale: 0.7 }
PropertyChanges { target: label; scale: 0.7 }
}
transitions: Transition {
NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
}
}
}
I've used it in some software of mine, hence it is possible that It could not work "out of the box". I use it like this:
ComboBox{
id:cacheChoice
initialText: "None"
anchors.top: baseContainer.top
anchors.topMargin: 2
anchors.right: baseContainer.right
maxHeight: 500
listModel: cacheModel
onExpanded: {
cacheChoice.height = 500
}
onClosed: {
cacheChoice.height = 20
}
}
In case you are working with ComboBox from Qt Quick Controls 2, here's the source code for it:
https://github.com/qt/qtquickcontrols2/blob/5.12/src/imports/controls/ComboBox.qml
Based on that, this override of the behavior works to limit the height to something reasonable:
myComboBox.popup.contentItem.implicitHeight = Qt.binding(function () {
return Math.min(250, myComboBox.popup.contentItem.contentHeight);
});
It is possible to access the hidden MenuStyle within the ComboBoxStyle component. There you can use all the things and hidden things you have within a MenuStyle, including its maximum height.
The thing looks roughly like this.
Not pretty but it works well enough.
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.3
import QtQuick.Window 2.2
ComboBox {
id: comboBox
style: ComboBoxStyle {
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: 400
__menuItemType: "comboboxitem" //not 100% sure if this is needed
}
}
As it came up resonantly in our team, here is a updated version of the idea shown above. The new version restricts the size automatically to the size of your application.
ComboBox {
id: root
style: ComboBoxStyle {
id: comboBoxStyle
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: Math.max(55, //min value to keep it to a functional size even if it would not look nice
Math.min(400,
//limit the max size so the menu is inside the application bounds
comboBoxStyle.control.Window.height
- mapFromItem(comboBoxStyle.control, 0,0).y
- comboBoxStyle.control.height))
__menuItemType: "comboboxitem" //not 100% sure if this is needed
} //Component __dropDownStyle: MenuStyle
} //style: ComboBoxStyle
} //ComboBox
I'm trying to create a QML keyboard with the following code on Qt4.8.
Item {
id: keyboard
property string keys: "azertyuiopqsdfghjklmwxcvbn****^<"
Rectangle {
height: parent.height
width: parent.width
Grid {
id: keyboardGrid
rows: 4
columns: 10
spacing: 1
Repeater {
model: keys.length
KeyboardButton {
visible: { (keys.charAt(index) == "*") ? false : true; }
btnKeyText: keys.charAt(index);
}
}
}
}
}
I've put some '*' in keys in order to make some invisible button to go to the next line of the grid, but when I set a KeyboardButton to visible = false, QML interpreter just ignore it.
See the screenshots for more detail, first one is with this code, second one is when I comment the line where i set visible to false.
Why invisible components are just ingored ? Any tricks ?
As BaCaRoZzo says, element with opacity: 0 or visibility: 0 the element is not rendered (in Qt4.8, in 5 and superior opacity : 0 does not affect rendering), so I have found another way to do what I wanted.
I achieve this by creating my own grid with a Repeater and Rows as follow :
Item {
id: keyboard
property variant keys: ["azertyuiop", "qsdfghjklm", "wxcvbn,;:!", "⇧* ↵←"]
Repeater{
id: lineRpt
model: 4
anchors.fill: parent
Row {
spacing: 1
anchors.verticalCenter: parent.top
anchors.verticalCenterOffset: 25+(index*52)
anchors.left: parent.left
property string currentLine: keys[index]
Repeater {
model: keys.length
KeyboardButton {
visible: { (keys.charAt(index) == "*") ? false : true; }
btnKeyText: keys.charAt(index);
}
}
}
}
}
Edit after comments:
You can also set the background color to transparent, and in my case, I need to remove de "*" of the text too.