I have an Item composed of several properties:
Item
{
id: propertiesList
property CustomLabel phone: { text: dataFromServer.phone }
property CustomLabel age: { text: dataFromServer.age}
}
I'd like to trigger a signal when the text of one of the properties is changed:
onTextChanged
{
doSomething(phone/age.text)
}
I could create one signal for each property but I don't find this very clean. Is there a way to create one signal for all properties that would handle the text variable ?
EDIT:
CustomLabel.qml
import QtQuick 2.5
import QtQuick.Controls 1.4
Label
{
signal textChanged(string updatedText)
font.pixelSize: 22
font.italic: true
color: "steelblue"
}
First you need a signal that is triggered when the text in the CustomLabel is changed. Then you can connect the signals to a signal in your Item. Like this
Item
{
id: propertiesList
signal textChanged(string updatedText)
property CustomLabel phone: { text: dataFromServer.phone, onTextChanged: doSomething(updatedText) }
property CustomLabel age: { text: dataFromServer.age, onTextChanged: doSomething(updatedText) }
}
-- UPDATE --
Check this. It says
Property Change Signal Handlers
Signal handlers for property change signal take the syntax form
on<Property>Changed where <Property> is the name of the property, with
the first letter capitalized. For example, although the TextInput type
documentation does not document a textChanged signal, this signal is
implicitly available through the fact that TextInput has a text
property and so it is possible to write an onTextChanged signal
handler to be called whenever this property changes:
So, as Label has also a text property, it has also the textChanged signal. I think that you have a conflict with the two signals (the original that Label has because the text property and the one you create in CustomLabel). Give another name to your textChanged signal in CustomLabel and it should work.
Related
I have a checkbox in qt which I'd like to be checked via a q_property tied to code, but also by a user. When a user clicks on the checkbox, I'd like to run some code. The issue is that the onChecked callback seems to be called when the checkbox is checked via code as well as user input. This code would involve the checkbox being checked by code at a later time, which would trigger the onChecked callback. How is this situation best handled with the callbacks provided by Qt?
For more background if the above doesn't make sense: This checkbox controls a feature on a robot over a network connection, but it should also show the state of the feature since it could be enabled automatically or from a previous session. The q_property robotStatus.missionLooping is set by a periodic status update. When the user checks the box, it should trigger a network call to enable the feature, and then the status update will happen a moment later which would see that the feature is enable and check the box (Even though it's already checked).
AppCheckBox.qml:
import QtQuick 2.15
import QtQuick.Controls 2.15
CheckBox
{
id: root
indicator: Rectangle
{
implicitWidth: utilities.dp(40)
implicitHeight: utilities.dp(40)
x: root.leftPadding
y: parent.height / 2 - height / 2
Rectangle
{
width: utilities.dp(20)
height: utilities.dp(20)
x: utilities.dp(10)
y: utilities.dp(10)
radius: utilities.dp(3)
color: theme.green
visible: root.checked
}
}
contentItem: Text
{
text: root.text
font: root.font
opacity: enabled ? 1.0 : 0.3
color: theme.white
verticalAlignment: Text.AlignVCenter
leftPadding: root.indicator.width + root.spacing
//font.pointSize: constants.coordinatesTextPointSize + 1
minimumPointSize: constants.minimalCoordinatesTextPointSize
}
}
ui.qml:
AppCheckBox
{
id: missionLoopingCheckbox
enabled: isConnected
checked: robotStatus.missionLooping
text: qsTr("Mission Looping")
}
You can implement onToggled signal handler. toggled signal is emitted when a checkable button is interactively toggled by the user via touch, mouse, or keyboard.
I'm assuming below that robotStatus.missionLooping is a readonly property. You need Q_INVOKABLE method or a slot function to call e.g. robotApi.loopMission(bool) which calls robot over the network and in turn causes robotStatus.missionLooping property to change to true/false when looping starts/stops.
AppCheckBox
{
id: missionLoopingCheckbox
enabled: isConnected
checked: robotStatus.missionLooping
text: qsTr("Mission Looping")
onToggled: {
robotApi.loopMission(missionLoopingCheckbox.checked)
}
}
I have a QML file which contains an Item, the Item contains a object:
QtObject {
id: something
Component.onCompleted: {
console.log("A");
}
}
At the file Item I also have:
Component.onCompleted: {
console.log("B");
}
What I see in the Application Output is
B
A
What I want is for A to be processed first, is there anyway to do this or do I have to change use a function in the child object and call it from the onCompleted of the parent?
Well, AFAIK you can't change the "completed" order. But you could control when the QtObject loads. For example:
Item {
property QtObject something: null
property Component objectComponent: QtObject {
objectName: "something"
Component.onCompleted: console.log("A");
}
Component.onCompleted: {
something = objectComponent.createObject(this);
console.log("B", something);
}
}
qml: A
qml: B QObject(0x351d750, "something")
There's also the Loader type, which basically does the createObject() for you, though it's meant more for loading visual components on-demand.
Also the "something" QtObject could be in an external file, of course.
ADDED: Apparently this also works and loads in the desired order, though I'm not sure I'd prefer it myself (but it's more "declarative" I suppose :).
Item {
property QtObject something: objectComponent.createObject(this);
property Component objectComponent: QtObject {
objectName: "something"
Component.onCompleted: console.log("A");
}
Component.onCompleted: console.log("B", something);
}
As you can read from the official documentation (https://doc.qt.io/qt-5/qml-qtqml-component.html#completed-signal), "the order of running the onCompleted handlers is undefined". So you can not trust in your console output for know the object creation order.
If you want load components in a specific order, you can use the Loader item.
i got two Windows inside the same .qml file.
Window1 has a textinput1 and a button, and when I press the button, i'd like to send the string value from that textinput to the Window2 textInput2.
I'm new to Qt and QML, been reading a lot on signals, Loaders, properties and can't materialize this kind of transfer. Can anyone do a simple 10-line example of such transfer please?
Window {
id:window
TextInput {
id:text1
text: "This value is needed in the second Window!"
}
Button {
onClicked: window2.open()
}
Window {
id.window2
function open(){
visible = true
}
Text {
text: text1.text
}
}
}
If I do this it gives me ReferenceError: text1 is not defined, how can I reference the text1 from the first Window?
I would prefer to use signals in such case:
Window {
id: window1
title: "window 1"
visible: true
width: 600
height: 600
signal someSignal()
Button {
anchors.centerIn: parent
text: "Open window"
onClicked: window1.someSignal()
}
Window {
id: window2
title: "window 2"
width: 400
height: 400
// you can use this instead of Connections
//Component.onCompleted: {
// window1.someSignal.connect(show);
//}
}
Connections {
target: window1
onSomeSignal: {
window2.show();
}
}
}
I think this is more ... how do you say? ... more imperative -)
i got two Windows inside the same .qml file.
If you did then your code will work. Since it doesn't work, I will assume each window is defined in its own qml file, and you only instantiate the two windows in the same qml file.
If I do this it gives me ReferenceError: text1 is not defined, how can
I reference the text1 from the first Window?
You will have to be able to reference the window first, and it should provide an interface to reference the text.
Keep in mind that ideally ids should only be used to reference stuff in the same source. On rare occasions you could go further, and reference ids down the object tree, but only parents, and none of their out-of-line children, it will however work for in-line children that are given ids in that same source. Meaning that if window2 is created inside window then you will be able to reference window from inside window2. But if both windows are siblings in another object, the id won't resolve.
Obj1
Obj2
Obj4
Obj3
In this example object tree, Obj1 will resolve from any of the objects. However, Obj3 will not be able to resolve Obj2 if the id is given inside Obj2, but will resolve if the id for Obj2 is given inside Obj1. But there is no way to resolve Obj4 from Obj3. because the id doesn't act like a property, you can't do someId.someOtherId, that's only possible for properties. You cannot do somePropertyObject.someId neither. You can only begin with either an id or a property, and continue only with sub-properties.
When the id is not applicable, can expose objects or properties either as properties or property aliases. The first is useful when you want to expose a whole object, the second when you want to expose a particular property of an object:
Item {
property Item innerItem: inner // gives you access to the "entire" inner object
property alias innerWidth: inner.width // gives you access to a property of inner
Item {
id: inner
}
}
You can also have aliases to aliases.
I am just getting started in Qt, and trying to make function which operates ListView model's elements.
I have custom made button in "myButton.qml" which has states like "normal", "pressed", "selected", etc.
ListView is in "main.qml". Structure is like this:
ListView{
//...
model: nameModel
delegate: myButton {
//...
}
}
So here is my goal: this list of buttons should act like group of radiobuttons - only one can have selected state and selected state is when you press button. I think that I should have click handler and a function that calls on button click. Function should check the list of buttons and if one button was selected before function just changes its state to "Normal".
So I have no idea of how to write this func and where should I place it. I read Qt docs but still no idea.
A possible easy way to solve this problem is by exploiting ExclusiveGroup. As discussed in the documentation, support to this type can be added to any type:
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. It also needs to be bound with ExclusiveGroup::bindCheckable() when its ExclusiveGroup typed property is set.
You can define an ExclusiveGroup at the ListView level and implement the required logic in the ListView delegate. By binding the delegate ExclusiveGroup property to the ExclusiveGroup of the ListView you should achieve what you want, without the need of a function that crawls the model.
Final toy example to demonstrate the usage:
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
id: root
visible: true
width: 200
height: 500
ListView {
anchors.fill: parent
model: 10
spacing: 20
ExclusiveGroup { id: ex } // the group for all the delegate
delegate: Rectangle {
id: delegate
width: ListView.view.width
height: 30
color: checked ? "yellow" : "steelblue"
// code to have exclusive behaviour
property bool checked: false
property ExclusiveGroup exclusiveGroup: ex
onExclusiveGroupChanged: {
if (exclusiveGroup)
exclusiveGroup.bindCheckable(delegate)
}
// mouse area to trigger the property change
MouseArea {
anchors.fill: parent
onClicked: checked = true
}
}
}
}
I'm trying to implement some sort of custom Menu with custom elements. The ultimate goal is to create some sort of popup menu with text and icons. But during creation I faced with some issues. I can show 2 primary problems:
There is a strange menu element with title Hello world at the first position (looks like it's read title of application window):
From time to time I'm getting errors like qrc:/BreezeQuickMenu.qml:45: TypeError: Property 'clicked' of object QQuickListView(0x1120830) is not a function
Here is my actual code:
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.2
ApplicationWindow {
title: qsTr("Hello World")
width: Screen.width
height: Screen.height
visible: true
id: win
color: brPalette.normalBackground
BreezeQuickMenu{
id: brMenu
x: 490
y: 199
width: 128
height: 256
palette: brPalette
menuFont.pointSize: 16
BreezeQuickMenuItem{
title: "Item 1"
onClicked: mbox.show()
}
BreezeQuickMenuItem{
title: "Item 2"
}
BreezeQuickMenuItem{
title: "Item 3"
}
}
}
BreezeQuickMenu.qml
import QtQuick 2.4
Item {
id: root
property BreezeQuickPalette palette: BreezeQuickPalette
property alias currentIndex: menuList.currentIndex
property font menuFont
property bool menuVisible: false
implicitWidth: 128
implicitHeight: menuList.height
ListView{
id: menuList
anchors.fill: parent
model: root.children
clip: true
delegate: Component {
id: menuItem
Rectangle {
id: menuElement
property bool isCurrentItem: ListView.isCurrentItem
anchors {
left: parent.left
right: parent.right
}
color: palette.normalBackground
height: menuText.font.pixelSize*1.2
Text {
id: menuText
anchors.fill: parent
text: title
color: palette.normalText
font: menuFont
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
menuList.currentIndex = index
menuList.model[index].clicked()
}
}
}
}
}
}
BreezeQuickMenuItem.qml
import QtQuick 2.4
Item {
id: root
property string title: "Menu Element"
signal clicked
}
As you can see I'm trying to implement menu list and menu items with their own signals. I have 2 questions:
how can I properly get rid of using title property of parent element, since I need to read title property of childrens
what is the correct approach of using signals and slots in menu elements to avoid above error?
Please help me to understand. Full project can be pulled here:
git clone git://git.code.sf.net/p/breezequick/code breezequick-code
The problem with the signal is related to its declaration. Signals are always declared as a function would be: with a signature. In other words, a signal without parameters has the form
signal <signal_name>()
That's also why you got the error "is not a function". Apart from that, the usage of signals/signal handlers is correct. Anyhow, reading carefully the documentation wouldn't hurt. This page covers in detail the argument.
Coming to the other problem, you made the wrong assumption: anything that is declared inside a component is part of the children of the component itself. Here you declared a BreezeQuickMenu which has a child ListView. When you use it and add the BreezeQuickMenuItems, you add them to the same set to which the ListView belongs. In the end you have four elements in the children property. Also, by adding the ListView to itself through the model you mess up things to the point that a totally unrelated string is rendered.
There are several ways to handle Items as model members for a view, inclusing VisualItemModel and using object Instanced as models. However, by skimming your code, it is clear that you want to define a component which adds menu items in a declarative fashion. Using children is not sufficient in this case. You also need the default property:
An object definition can have a single default property. A default property is the property to which a value is assigned if an object is declared within another object's definition without declaring it as a value for a particular property.
Hence you can define the default property for your BreezeQuickMenu and exploit it to obtain the desired children for your list. A common approach would be the following (code simplified):
import QtQuick 2.4
Item {
id: root
property BreezeQuickPalette palette: BreezeQuickPalette
property alias currentIndex: menuList.currentIndex
// default declaration (1)
default property alias contents: addItem.children
// Item to which the inner declared meantime will belong (2)
Item {
id: addItem
}
property font menuFont
property bool menuVisible: false
implicitWidth: 128
implicitHeight: menuList.height
ListView{
id: menuList
anchors.fill: parent
model: contents // usage of the default property (3)
clip: true
delegate: Rectangle {
// your current delegate code
}
}
}
The basic idea is to exploit also property alias: basically in (1) we are saying that "all the Items declared inside BreezeQuickMenu are automatically children of addItem which is an inner declared Item (2). In this way the ListView is kept apart whereas all the BreezeQuickMenuItem are gathered together, under addItem children property. At this point, it is sufficient to use the same children property as the model (3) for the ListView and that's it.