I trying to understand how bindings works when dynamic objects are used. And don't understand anything.
In code bellow I have "static" bindings:
property bool flag1: cfg_flag1
and create dynamic binding that set flag1 to true,
then I destroy binding and make sure that it really destroyed (via logs),
after that I trigger initial binding, but looks like binding restoring doesn't work, it prints:
qmlscene /tmp/Test.qml
qml: set flag1 to true
qml: buggon1 cliecked
qml: end of clicked
qml: destroyed
qml: timer trigger
So restoreMode: Binding.RestoreBinding doesn't restore previous binding or I missed something?
import QtQuick 2.0
import QtQuick.Controls 2.15
Rectangle {
id: rect
width: 100
height: 100
color: "red"
property bool flag1: {
console.log("set flag1 to", cfg_flag1);
return cfg_flag1;
}
property bool cfg_flag1: true
Text {
anchors.centerIn: parent
text: "flag1: " + flag1.toString() + ", cfg_flag1 " + cfg_flag1.toString()
}
Timer {
id: timer
interval: 1000
repeat: false
onTriggered: {
console.log("timer trigger");
cfg_flag1 = false;
}
}
Button {
anchors.top: parent.top
text: "button 1"
onClicked: {
console.log("buggon1 cliecked");
let temp = cmpBinding.createObject(rect, {
"target": rect,
"property": "flag1",
"value": true,
"restoreMode": Binding.RestoreBinding,
});
temp.Component.onDestruction.connect(function() { console.log("destroyed"); });
temp.destroy();
console.log("end of clicked");
timer.start();
}
}
Component {
id: cmpBinding
Binding {
}
}
}
Your code is OK. This is just another bug of Binding =/.
To make it work, you can add
"when": true to list of properties for temp
temp.when = false; on temp's destruction
Here is your edited code
import QtQuick 2.0
import QtQuick.Controls 2.15
Rectangle {
id: rect
width: 100
height: 100
color: "red"
property bool flag1: {
console.log("set flag1 to", cfg_flag1);
return cfg_flag1;
}
property bool cfg_flag1: true
Text {
anchors.centerIn: parent
text: "flag1: " + flag1.toString() + ", cfg_flag1 " + cfg_flag1.toString()
}
Timer {
id: timer
interval: 1000
repeat: false
onTriggered: {
console.log("timer trigger");
cfg_flag1 = false;
}
}
Button {
anchors.top: parent.top
text: "button 1"
onClicked: {
console.log("buggon1 cliecked");
let temp = cmpBinding.createObject(rect, {
"target": rect,
"property": "flag1",
"value": true,
"restoreMode": Binding.RestoreBinding,
"when": true
});
temp.Component.onDestruction.connect(function() { temp.when = false; console.log("destroyed"); });
temp.destroy();
console.log("end of clicked");
timer.start();
}
}
Component {
id: cmpBinding
Binding {
}
}
}
Related
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
onActiveFocusItemChanged: console.log(activeFocusItem)
Item {
id: item
anchors.fill: parent
focus: true
ListView {
anchors.fill: parent
model: ["Test1", "Test2", "Test3", "Test4", "Test5"]
delegate: TextArea {
padding: 0
text: modelData
}
}
Keys.onReleased: {
if(event.key === Qt.Key_F3) {
console.log("F3 pressed")
event.accepted = true
}
}
}
}
I would like to intercept the click of the key F3 in the item but, when the focus is on the ListView delegates, they don't propagate the key event. If instead the focus is on the Item, everything works fine.
How can I solve that?
The TextArea must try to catch the F3 key itself, which is why it doesn't propogate. The way I would fix this is to catch the key both in the delegate and out of the delegate, and in both handlers call a common function to do the actual work that you want to do.
Item {
id: item
anchors.fill: parent
focus: true
ListView {
anchors.fill: parent
model: ["Test1", "Test2", "Test3", "Test4", "Test5"]
delegate: TextArea {
padding: 0
text: modelData
Keys.onReleased: {
if(event.key === Qt.Key_F3) {
// Just call the new function we created
item.f3Handler();
event.accepted = true
}
}
}
}
Keys.onReleased: {
if(event.key === Qt.Key_F3) {
// Just call the new function we created
f3Handler();
event.accepted = true
}
}
// This is where we do the actual work.
function f3Handler() {
console.log("F3 pressed")
}
}
I was thinking I need a component similar to ListModel, but I need to extend it to expose a readonly bool property such as "all list elements were within minimum and maximum limit" so I can do logic outside the component the determine certain things. How should I go about doing this extending a boolean property based on model's contents?
I guess naive way is to just add the qml property and do javascript loop on QML side to check all model contents but that might not be so good performance
Have you considered DelegateModel? It allows you to create "views" on your ListModel so you can control what you want to be displayed via the filterOnGroup property.
It is rather difficult to comprehend, but, in the following example, I have a ListModel containing 5 cities. When you start changing the RangeSlider the 5 cities will be filtered based on the minimum/maximum population selected. This works by updating the boolean function filter on the DelegateModel to reflect the cities that are now visible.
property var filter: model => model.pop >= rangeSlider.first.value
&& model.pop <= rangeSlider.second.value
Here's the full code snippet:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15
Page {
anchors.fill: parent
ColumnLayout {
anchors.fill: parent
Label { text: qsTr("States") }
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: DelegateModel {
id: filterDelegateModel
property int updateIndex: 0
property var filter: model => model.pop >= rangeSlider.first.value
&& model.pop <= rangeSlider.second.value
onFilterChanged: Qt.callLater(update)
model: us_states
groups: [
DelegateModelGroup {
id: allItems
name: "all"
includeByDefault: true
onCountChanged: {
if (filterDelegateModel.updateIndex > allItems.count) filterDelegateModel.updateIndex = allItems.count;
if (filterDelegateModel.updateIndex < allItems.count) Qt.callLater(update, filterDelegateModel.updateIndex);
}
},
DelegateModelGroup {
id: visibleItems
name: "visible"
}]
filterOnGroup: "visible"
delegate: Frame {
id: frame
width: ListView.view.width - 20
background: Rectangle {
color: (frame.DelegateModel.visibleIndex & 1) ? "#f0f0f0" : "#e0e0e0"
border.color: "#c0c0c0"
}
RowLayout {
width: parent.width
Text {
text: (frame.DelegateModel.visibleIndex + 1)
color: "#808080"
}
Text {
Layout.fillWidth: true
text: model.state
}
Text {
text: qsTr("pop: %1 M").arg((pop / 1000000).toFixed(2))
}
}
}
function update(startIndex) {
startIndex = startIndex ?? 0;
if (startIndex < 0) startIndex = 0;
if (startIndex >= allItems.count) {
updateIndex = allItems.count;
return;
}
updateIndex = startIndex;
if (updateIndex === 0) {
allItems.setGroups(0, allItems.count, ["all"]);
}
for (let ts = Date.now(); updateIndex < allItems.count && Date.now() < ts + 50; updateIndex++) {
let visible = !filter || filter(allItems.get(filterDelegateModel.updateIndex).model);
if (!visible) continue;
allItems.setGroups(updateIndex, 1, ["all", "visible"]);
}
if (updateIndex < allItems.count) Qt.callLater(update, updateIndex);
}
Component.onCompleted: Qt.callLater(update)
}
}
Label { text: "Population Range" }
RangeSlider {
id: rangeSlider
Layout.fillWidth: true
from: 0
to: 100000000
first.value: 1
first.onMoved: Qt.callLater(filterDelegateModel.update)
second.value: 100000000
second.onMoved: Qt.callLater(filterDelegateModel.update)
stepSize: 1000000
}
Label { text: qsTr("Minimum %1 M").arg((rangeSlider.first.value / 1000000).toFixed(2)) }
Label { text: qsTr("Maximum %1 M").arg((rangeSlider.second.value / 1000000).toFixed(2)) }
}
ListModel {
id: us_states
ListElement { state:"California"; pop: 39350000 }
ListElement { state:"Texas"; pop: 28640000 }
ListElement { state:"New York"; pop: 8380000 }
ListElement { state:"Nevada"; pop: 3030000 }
ListElement { state:"Las Vegas"; pop: 644000 }
}
}
You can Try it Online!
I have refactored the above into a FilterDelegateModel reusable component. Feel free to check it out:
https://github.com/stephenquan/qt5-qml-toolkit
https://github.com/stephenquan/qt5-qml-toolkit/wiki/FilterDelegateModel
I would disable button after other button_click event and enable again after timer timeout. I tried with Timer and States with PropertyChanged, but it doesn't work.
How I can send a qml signal to reload/refresh the page?
When i click on id_button_add I would disable Id_button_edit and start a timer for 3 seconds. When the timer timeouts I enable already the id_button_edit.
Here is my code.
import QtQuick 2.0
import QtQuick.Layouts 1.3
import "../items"
import ch.example 1.0
Item {
id: id_root
z: 2
property bool prepare_delete: false
property string button_edit_enable_state: "enabled"
anchors.left: parent ? parent.left : undefined
anchors.right: parent ? parent.right : undefined
Connections {
target: id_root.ListView.view
onCurrentIndexChanged: {
prepare_delete = false
}
}
function update_remove_enable() {
id_button_remove.button_enabled = ui_resident_model.sourceModel.rowCount() > 1
}
Component.onCompleted: {
ui_resident_model.sourceModel.onRowsInserted.connect(update_remove_enable)
ui_resident_model.sourceModel.onRowsRemoved.connect(update_remove_enable)
update_remove_enable()
}
Rectangle {
anchors.fill: parent
color: "transparent"
border {
color: touchpanel_style.foreground_color
width: touchpanel_style.line_width
}
}
RowLayout {
anchors.left: parent.left
anchors.margins: touchpanel_style.margin
anchors.verticalCenter: parent.verticalCenter
.
.
.
.
}
RowLayout {
id: id_content
anchors.right: parent.right
anchors.margins: touchpanel_style.margin
anchors.verticalCenter: parent.verticalCenter
state: button_edit_enable_state
states: [
State {
name: "enabled"
PropertyChanges { target: id_button_edit; enabled: true }
},
State {
name: "disabled"
PropertyChanges { target: id_button_edit; enabled: false }
}
]
Timer {
id: serviceListItemTimer
interval: 3000
running: false
repeat: false
onTriggered: {
console.log("onTriggered")
button_edit_enable_state = "enabled"
}
}
IconButton {
id: id_button_edit
objectName: "button_edit"
Layout.fillHeight: true
width: height
icon_factor: 1.35
icon_source: "../icons/edit.png"
onButtonClick: {
prepare_delete = false
loader.source = "../service_menu/ResidentEdit.qml";
loader.item.onCancel.connect(cancel_edit)
loader.item.onTimeout.connect(timeout)
loader.item.model = id_root.ListView.view.currentItem.resident_model
}
function cancel_edit() {
loader.source = ""
}
}
IconButton {
id: id_button_add
objectName: "button_add"
Layout.fillHeight: true
width: height
icon_factor: 1.35
icon_source: "../icons/resident_add.svg"
onButtonClick: {
console.log("btn_add")
button_edit_enable_state = "disabled"
serviceListItemTimer.running = true
var index = id_root.ListView.view.currentIndex;
id_root.ListView.view.model.createItem(index);
set_index(index);
}
}
}
}
If you use enabled property of the item, you can disable the button.
For example:
IconButton {
id: id_button_edit
...
enabled: true
...
onButtonClick: {
id_button_edit.enabled = false;
...
}
Then the timer expire, you return to enable the button with id_button_edit.enabled = true.
Maybe an another solution can be the signal.
Here is more info:
https://doc.qt.io/qt-5/qtqml-syntax-signals.html
You can do it in a simple an declarative way by binding the enabled property of your edit button to the running property of the timer, no need to deal with states and such:
IconButton {
id: id_button_add
// ...
onButtonClick: {
serviceListItemTimer.start();
var index = id_root.ListView.view.currentIndex;
id_root.ListView.view.model.createItem(index);
set_index(index);
}
}
IconButton {
id: id_button_edit
enabled: !serviceListItemTimer.running
// ...
}
I found a solution --> bind qml property with cpp model and emit also in cpp module valueChanged() signal.
see http://imaginativethinking.ca/bi-directional-data-binding-qt-quick/
Is it possible to make mutual connection (without loop issue), using Connections, Binding or Qt.binding()?
It is possible to connect, say, SwipeView.currentIndex to TabBar.currentIndex and vise versa. When I page through SwipeView, then current tab of TabBar is also changed and vice versa. There is no binding loop of properties.
How to achieve this in Repeater? When some item created by Repeater became selected (in some sense), then I want to rebind its properties to another standalone item, which operates like editor of the selected item. The state of elements in selected item should depend on the state of items into the editor. But on selection changing I need to initialize items in editor using values from newly selected item.
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
id: root
property var currentDayOfWeek: { "enabled": false, "time": "08:00" }
visible: true
SystemPalette {
id: palette
}
RowLayout {
anchors.centerIn: parent
Column {
ButtonGroup { id: weekButtonGroup }
Repeater {
model: 7
RowLayout {
Settings {
id: dayOfWeekSettings
category: Qt.locale("C").standaloneDayName(index, Locale.LongFormat)
property bool enabled: false
property string time: "08:00"
}
Label {
text: dayOfWeekSettings.time
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle {
color: dayOfWeekSettings.enabled ? palette.highlight : palette.base
}
Layout.fillHeight: true
}
RadioButton {
text: Qt.locale().standaloneDayName(index, Locale.LongFormat)
onCheckedChanged: {
if (checked) {
root.currentDayOfWeek = dayOfWeekSettings
timeField.text = Qt.binding(function() { return dayOfWeekSettings.time }) // ???
enabledCheckBox.checked = Qt.binding(function() { return dayOfWeekSettings.enabled }) // ???
}
}
ButtonGroup.group: weekButtonGroup
Layout.fillHeight: true
}
}
}
Layout.fillHeight: true
}
Column {
// Editor
TextField {
id: timeField
text: currentDayOfWeek.time // ???
inputMask: "00:00;_"
inputMethodHints: Qt.ImhDigitsOnly
}
CheckBox {
id: enabledCheckBox
checked: currentDayOfWeek.enabled // ???
}
Layout.fillHeight: true
}
}
}
How to achieve this? Is there canonical way to do this? Above example is not the solution.
The following code works as I want:
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
id: root
//property var currentDayOfWeek: { "enabled": false, "time": "08:00" }
visible: true
SystemPalette {
id: palette
}
RowLayout {
anchors.centerIn: parent
Column {
ButtonGroup { id: weekButtonGroup }
Repeater {
model: 7
RowLayout {
Settings {
id: dayOfWeekSettings
category: Qt.locale("C").standaloneDayName(index, Locale.LongFormat)
property bool enabled: false
property string time: "08:00"
Binding on enabled {
when: dayOfWeekSettingsCheckBox.checked
value: enabledCheckBox.checked
}
Binding on time {
when: dayOfWeekSettingsCheckBox.checked
value: timeField.text
}
}
Label {
text: dayOfWeekSettings.time
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle {
color: dayOfWeekSettings.enabled ? palette.highlight : palette.base
}
Layout.fillHeight: true
}
RadioButton {
id: dayOfWeekSettingsCheckBox
text: Qt.locale().standaloneDayName(index, Locale.LongFormat)
onCheckedChanged: {
if (checked) {
//root.currentDayOfWeek = dayOfWeekSettings
timeField.text = dayOfWeekSettings.time
enabledCheckBox.checked = dayOfWeekSettings.enabled
}
}
ButtonGroup.group: weekButtonGroup
Layout.fillHeight: true
}
}
}
Layout.fillHeight: true
}
Column {
id: editor
TextField {
id: timeField
//text: currentDayOfWeek.time
inputMask: "00:00;_"
inputMethodHints: Qt.ImhDigitsOnly
}
CheckBox {
id: enabledCheckBox
//checked: currentDayOfWeek.enabled
}
Layout.fillHeight: true
}
}
}
but there is an issue: editor filled with values in onCheckedChanged when checked became true. But what if when: in Bindings shoot first? Is it possible? Should I use delayed?
If I comment out:
timeField.text = dayOfWeekSettings.time
enabledCheckBox.checked = dayOfWeekSettings.enabled
and uncomment all the commented in above solution, then also all works fine. But the suspicion still persist.
When I try to change a property value of an item contained into a ListModel the following code has no effect:
Main.qml
import QtQuick 2.0
Item {
anchors.fill: parent
ListModel { id: modelCrayon }
Component.onCompleted: {
for (var i = 0; i < 10; i++)
modelCrayon.append( { _tag: i, _source: "resources/crayon-green.png", _selected: false } )
}
Column {
x: -170
spacing: 0
Repeater {
model: modelCrayon
delegate: Crayon {
tag: _tag
source: _source
selected: _selected
onCrayonSelected: {
for (var i = 0; i < modelCrayon.count; i++) {
if (i == tag) continue;
modelCrayon.setProperty(i, "_selected", false);
}
}
}
}
}
}
Crayon.qml
import QtQuick 2.0
Image {
property bool selected
property int tag
signal crayonSelected()
id: crayon
smooth: true
fillMode: Image.PreserveAspectFit
onSelectedChanged: console.debug(tag, selected)
MouseArea {
anchors.fill: parent
onClicked: {
selected = !selected
if (selected) crayonSelected()
}
}
states: State {
name: "selected"; when: selected == true
PropertyChanges { target: crayon; x: 30 }
}
transitions: Transition {
from: ""; to: "selected"
PropertyAnimation { property: "x"; duration: 500; easing.type: Easing.InOutQuad }
}
}
Nothing is shown on console, so the "selected" var is never changed.
I'm sure there's something obvious I'm missing.
By the way, is there a smarter way to use a ListModel as a OptionBox? I mean I want only ONE item at time must have the selected property == true. Or, in other words, keep tracks of the selected index.
This is a working code to achieve what I asked. But it doens't answer why the property was not set.
ListView {
id: list
anchors.verticalCenter: parent.verticalCenter
height: parent.height
x: -150
spacing: 0
orientation: ListView.Vertical
focus: true
model: modelCrayon
delegate: Crayon {
id: delegate
source: _source
selected: ListView.isCurrentItem
MouseArea {
anchors.fill: parent
onClicked: list.currentIndex = index
}
}
}
I have tested your sample code (the Column version), and it works well with Qt 5.4 / Windows 7 64bit.
What is your running environment?