I have the following custom Label:
import QtQuick 2.3
import QtQuick.Controls 1.4
Label
{
anchors.centerIn: parent
text: "DashboardLabel!"
font.pixelSize: 22
font.italic: true
color: "steelblue"
Rectangle
{
id: rectangle
}
}
I'm trying to change the position of the label by accessing the x and y variables from rectangle:
import QtQuick 2.3
import QtQuick.Controls 1.4
import CustomGraphics 1.0
Item
{
anchors.centerIn: parent
CustomLabel
{
id: customLabel
width: 100
height: 100
rectangle.x: 200
}
}
It doesn't seem to be working since my custom Label is not moved. Should I use the property feature? Here is the error I'm getting:
Cannot assign to non-existent property "rectangle"
EDIT: I've just tried to add property alias rect: rectangle in order to access x with rect.x. I do not get any errors but nothing appears on the window.
You can't access the private properties of the child element like that. You have to create alias in order for the subclass to access them. Try this
import QtQuick 2.3
import QtQuick.Controls 1.4
Label
{
property alias childRect: rectangle
anchors.centerIn: parent
text: "DashboardLabel!"
font.pixelSize: 22
font.italic: true
color: "steelblue"
Rectangle
{
id: rectangle
width: 100
height: 100
}
}
and then
import QtQuick 2.3
import QtQuick.Controls 1.4
import CustomGraphics 1.0
Item
{
anchors.centerIn: parent
CustomLabel
{
id: customLabel
width: 100
height: 100
childRec.x: 200
}
}
UPDATE as OP changed the description
You haven't set width and height properties for the rectangle. See my edit.
Related
I am trying to access items that are in a Repeater, using JavaScript. This works as long as everything is in a single QML file. I understand that, when I split things into two files, the id of the Repeater moves out of the scope of my script.
What I don't understand is how I best solve this problem, since I cannot export the id as property.
Here is a MWE with two files:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
Window {
id: root
visible: true
width: 640
height: 480
ColumnLayout {
Mwe2 {}
Button {
text: "Test"
onClicked: {
console.log("Clicked");
rect.itemAt(1).color = 'yellow'; # <- out of scope
}
}
}
}
File Mwe2.qml
import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
RowLayout {
spacing: 2
Repeater {
id: rect
model: 3
Rectangle {
color: 'red'
width: 50
height: 20
}
}
}
As you indicate, the ids have the scope of the qml file, so if you want to access those elements you must expose it through a property, function, etc. of the top level of the qml. In this case for simplicity I will use an alias.
import QtQuick 2.9
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
RowLayout {
property alias repeater: rect
spacing: 2
Repeater {
id: rect
model: 3
Rectangle {
color: 'red'
width: 50
height: 20
}
}
}
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.2
Window {
id: root
visible: true
width: 640
height: 480
ColumnLayout {
Mwe2 {
id: mwe2
}
Button {
text: "Test"
onClicked: {
console.log("Clicked")
mwe2.repeater.itemAt(1).color = "yellow"
}
}
}
}
Is it possible to pick between different types of sub-components dynamically (during instantiation)?
For example, some pseudocode (using Qt 5.9):
//MyComp.qml
import QtQuick 2.9
import QtQuick.Layouts 1.3
Item {
property bool useLayout: true
//Here I want to allow the user to choose
//whether a ColumnLayout or Column is used
//(e.g., by means of the useLayout property)
ColumnLayout { //Or Column
...
}
...
}
//main.qml
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.9
ApplicationWindow {
width: 640
height: 480
...
MyComp {
id: a
useLayout: false
...
}
}
I don't think there is a way to do exactly what you want, without a lot of javascript. The cleanest way to do this, that I can think of would be the following.
You could make the ColumnLayout invisible and set the Column as the parent of its children with something like this:
//MyComp.qml
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
Item {
property bool useLayout: true
ColumnLayout {
id: columnLayout
visible: useLayout
Component.onCompleted: {
if (!useLayout) {
butt1.parent = column;
butt2.parent = column;
butt3.parent = column;
}
}
Button {
id: butt1
text: "butt 1"
}
Button {
id: butt2
text: "butt 2"
}
Button {
id: butt3
text: "butt 3"
}
}
Column {
id: column
visible: !useLayout
}
}
I waste my time to find how set the visible property to false, the delegate being in an another qml file.
For instance here is a simple example based on Places Map.
Marker.qml
import QtQuick 2.0
import QtLocation 5.6
MapQuickItem {
id: idPointsMarker
sourceItem: Loader{sourceComponent: idRect}
visible: true //if set manually to false, everything works correctly
Component{
id: idRect
Rectangle{
width: 20
height: 20
color: "blue"
}
}
}
and the main.qml
import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
Window {
width: 512
height: 512
visible: true
PositionSource {
...
}
property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)
PlaceSearchModel {
...
}
Map {
id: map
anchors.fill: parent
plugin: Plugin {name: "osm"}
center: locationOslo
zoomLevel: 13
MouseArea {
id : mouseMap
anchors.fill: parent
onDoubleClicked: {
console.log("DoubleClicked")
Marker.idPointsMarker.visible = false // pb is here
}
}
MapItemView {
model: searchModel
delegate: Marker{
coordinate: place.location.coordinate
}
}
}
}
I wish to toggle the visibility to false on doubleclick. I am not able to access the property anyhow the way i write it. What is the correct syntax?
Sorry for a so simple question. Thanks for help.
You do not have to set the property in main.qml, you must do it in Marker.qml, since the elements of Marker.qml can access all the elements of main.qml. One solution is to establish a property of type bool that manages the visibility and that changes in the double click:
main.qml
Map {
[...]
property bool isVisibleItems: true
MouseArea {
id : mouseMap
anchors.fill: parent
onDoubleClicked: map.isVisibleItems = !map.isVisibleItems
}
[...]
Marker.qml
import QtQuick 2.0
import QtLocation 5.6
MapQuickItem {
id: idPointsMarker
sourceItem: Loader{sourceComponent: idRect}
visible: map.isVisibleItems
Component{
id: idRect
Rectangle{
width: 20
height: 20
color: "blue"
}
}
}
In the following link there is an example
When I use TumblerColumn in my Tumbler, I get QML QQuickText: Cannot anchor to an item that isn't a parent or sibling, When I use Tumbler alone the error doesn't appear. I can't figure out what is the problem with TumblerColumn.
Here is my Dialog code
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.2
Dialog {
id: customTimerInputDialog
title: "Custom timer"
height: 150
width: 300
standardButtons: StandardButton.Ok | StandardButton.Cancel
onAccepted: {
}
onRejected: {
console.log("Rejected")
}
Column {
anchors.fill: parent
Text {
text: "Timer"
height: 40
}
Tumbler {
id: tumbler
TumblerColumn {
model: 10
}
TumblerColumn {
model: 60
}
}
}
}
TumblerColumn (TumblerStyle.qml) complete source code
...
// line 294
property Component delegate: Item {
implicitHeight: (control.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount
Text {
id: label
text: styleData.value
color: "#666666"
opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
font.pixelSize: Math.round(TextSingleton.font.pixelSize * 1.25)
anchors.centerIn: parent
}
}
...
Error message
UPDATE
I get the same error with Popup QML Type
Popup {
id: popup
x: 100
y: 100
width: 200
height: 300
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
Tumbler {
id: intervalPicker
TumblerColumn {
model: 10
}
TumblerColumn {
model: 60
}
}
}
You are mixing Qt Quick Controls 1 and 2. In your Dialog/Popup you import
QtQuick.Controls 2.2 and QtQuick.Extras 1.2. Both imports define a Tumbler, but the one from Qt Quick Extras is made to work with Qt Quick Controls 1 (see the imports in TumblerStyle.qml).
If you want to use TumblerColumn and TumblerStyle, you have to use the Tumbler from Qt Quick Extras 1.2.
If you want to use the Tumbler from Qt Quick Controls 2, you cannot use any of the tumbler facility from Qt Quick Extras 1.2.
If you need to have both Qt Quick Extras 1.2 and Qt Quick Controls 2 imported in a qml file, you need to use the as qualifier:
import QtQuick.Extras 1.2 as Extra
import QtQuick.Controls 2.2 as Controls2
...
Extra.Tumbler
{
...
}
Controls2.Tumbler
{
...
}
...
I created a component (SidebarMenuButton) that is used in the main qml file multiple times. The button has styles that should be inherited by all it's 'instances'. Here is the SidebarMenuButton.qml:
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Button {
width: buttonNewMessage.width
height: buttonNewMessage.height
anchors {
horizontalCenter: parent.horizontalCenter
topMargin: 5
}
style: ButtonStyle {
background: Rectangle {
color: 'transparent'
}
label: Text {
text: parent.text // undefined here
color: 'white'
font.family: 'Helvetica'
font.pixelSize: 12
font.bold: true
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
And a part of my main qml file:
import QtQuick 2.3
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
id: main
title: 'Messenger'
width: 1024
height: 768
minimumWidth: 800
minimumHeight: 600
RowLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: sidebar
color: '#3C3E55'
Layout.fillHeight: true
Layout.preferredWidth: 200
ButtonCompanyName {
id: buttonCompanyName
}
ButtonNewMessage {
id: buttonNewMessage
}
SidebarMenuButton {
id: buttonInbox
text: 'Inbox (1)'
anchors.top: buttonNewMessage.bottom
}
SidebarMenuButton {
id: buttonSentMessages
text: 'Sent messages'
anchors.top: buttonInbox.bottom
}
SidebarMenuButton {
id: buttonStarred
text: 'Starred'
anchors.top: buttonSentMessages.bottom
}
}
I commented the line with error. parent there doesn't refer to button so the text in all buttons is empty. I need to access parent button from there and get it's text property. The component has no id cause it's used multiple times and ids are assigned in the main qml file. So the question is: how can I get that button text without id?
There are two ways to set text in your case.
1)The Button for which you are applying the style is available as control property in ButtonStyle class. You can set the the text as text:control.text
Reference:control property(ButtonStyle)
2)You can give an id to the Button in SidebarMenuButton type and access its textproperty.
Button
{
id:button
.
.
.
text: button.text
}
You can assign an id inside your component file that would not conflict with the id you use when you instantiate the component somewhere else. I use the same value for the id of most of my QML components: container so that I can easily reference properties from the root of the item.
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Button {
id: container
style: ButtonStyle {
background: Rectangle {
color: 'transparent'
}
label: Text {
text: container.text
}
}
}
Then when you instantiate this component in another file you set whichever id you want and it would still work