Since these properties of DropShadow don't change:
radius: 10
samples: 15
color: "black"
in my usage, I tried to create a Custom Component named Shadow.qml that sets these:
anchors.fill: target
source: target
two properties. Here it is:
import QtQuick 2.0
import QtGraphicalEffects 1.0
DropShadow{
id: root
/*
property string target
anchors.fill: target
source: target
*/
//property alias target: root.anchors.fill | root.source
/*
property alias fill: root.anchors.fill
property alias source: root.source
*/
radius: 10
samples: 15
color: "black"
}
and in my usage, I can use it like this:
Shadow{
anchors.fill: myTarget
source: myTarget
}
and it works. The problem is I've to write myTarget in two places (i.e. anchors.fill and source) so I want to reduce it to a single line like this Shadow{ target: myTarget }
I've tried with each of those 3 commented out parts of Shadow.qml and none of those work!
The Target should not be a string it should be the Object on which the DropShadow should be applied to, which can be any kind of graphical Item
property Item target
anchors.fill: target
source: target
should work.
However you can also just make it fill the source:
anchors.fill: source
now, instead of setting the target, you set the Source:
Shadow {
source: Rectangle { ... }
}
If the property name target is required, create an alias for source:
DropShadow {
property alias target: source
anchors.fill: source
...
}
Creating an alias instead of a real property should be more efficient.
Related
Now, while porting my app to Qt 5.9 I've faced some strange behavior. The code describing the issue is below:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 600
height: 800
title: qsTr("Test")
Row {
id: base
property var arr: []
property color currentColor: "red"
anchors.centerIn: parent
spacing: 5
Repeater {
model: 10
delegate: Rectangle {
width: 50
height: 50
border.width: 1
border.color: "grey"
color: base.arr[index] === undefined ? "white" : base.arr[index]
MouseArea {
anchors.fill: parent
onClicked: {
base.currentColor = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
base.arr[index] = base.currentColor;
base.arr = base.arr; // trick to fire changing event
console.log(base.arr)
}
}
}
}
}
}
So there is array of rectangles and while pressing one of them I get random color and place it in the array base.arr at some index as item one. There is a property base.currentColor to keep the current color. But the problem is that if I assign new color to an item all previous items change color too.
I guess the problem is in line
base.arr[index] = base.currentColor;
It looks that this line creates some unexpected binding or reference or whatever I don't see. As I know the only way to create binding in Js is Qt.binding but here I don't use that.
The workaround to break this behavior is something like this:
base.arr[index] = Qt.rgba(base.currentColor.r, base.currentColor.g, base.currentColor.b, base.currentColor.a);
but it looks overhead and dirty solution.
I would be glad if someone can explain this strange behavior.
QML color is actually a color object.
In JavaScript objects are copied by reference, so a QML color variable actually behaves more like a pointer.
On this line:
base.arr[index] = base.currentColor;
the array element is set as a reference to the currentColor object.
When each array element is set, it gets set as a reference to the same currentColor object! Thus changing the currentColor changes every element in the array.
Instead of this:
property color currentColor: "red"
use this:
property string currentColor: "red"
strings in QML are always copied by value, so you will no longer have a problem.
Full code:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 600
height: 800
title: qsTr("Test")
Row {
id: base
property var arr: []
property string currentColor: "red"
anchors.centerIn: parent
spacing: 5
Repeater {
model: 10
delegate: Rectangle {
width: 50
height: 50
border.width: 1
border.color: "grey"
color: base.arr[index] === undefined ? "white" : base.arr[index]
MouseArea {
anchors.fill: parent
onClicked: {
base.currentColor = Qt.rgba(Math.random(),Math.random(),Math.random(),1);
base.arr[index] = base.currentColor;
base.arr = base.arr; // trick to fire changing event
console.log(base.arr)
}
}
}
}
}
}
What I can't understand is -
you said you are porting your app to Qt 5.9... If you are porting from a previous version of Qt, then I am surprised that the code did not behave the same way in the previous version.
I want to write an app in QtQuick that dynamically loads content. I decided to use Loader. Now I have a problem, which overwhelms me. I thought I would spend two minutes on that, but it took me two days and my problem is still unresolved.
I want to load an object from a .qml file, when the button is clicked. Clicking different buttons will set different properties to that object. The object is a simple rectangle with text within it. It has properties like width, height, text, color of rectangle and color of text. The problem is that loading the rectangle with different parameters DOESN'T change anything else than the color of the rectangle. I tried so many combinations of naming, property aliases etc, but it gave me nothing. Only color changes. Let me introduce you my code:
//StartStateContent.qml --> I wish to use Loaders in my Finite States Machine, hence the name
import QtQuick 2.0
import QtQuick.Controls 2.0
Rectangle {
id: startStateContent
property int myWidth
property int myHeight
property color myColor
property alias myText: name.text
property string myText2
property alias myTextColor: name.color
property color myTextColor2
// width: myWidth
// height: myHeight
color: kolor
Text {
anchors.centerIn: parent
id: name
text: "test"
//text: myText2
color: "yellow"
//color: myTextColor2
}
}
And a snippet of main.qml
Window {
visible: true
id: root
width: 500
height: 500
title: qsTr("Hello World")
Loader
{
id: pageLoader
anchors.top: root.top
anchors.left: root.left
width: root.width
height: root.height/2
}
Button{
id: but1
text: "red"
anchors.top: pageLoader.bottom
anchors.left: root.left
height: root.height/2
onClicked: {
pageLoader.setSource("StartStateContent.qml", {"myColor": "red"}, {"myTextColor" : "white"})
console.log("button red clicked")
}
}
Button{
id: but2
text: "green"
anchors.top: pageLoader.bottom
anchors.left: but1.right
height: root.height/2
width: root.width/2
onClicked: {
pageLoader.setSource("StartStateContent.qml", {"myColor": "green"}, {"myTextColor" : "green"})
console.log("button green clicked")
}
}
DSM.StateMachine{
id: stateMachine
initialState: startState
running:true
onStarted: {
pageLoader.setSource("StartStateContent.qml", {"myColor": "blue"}, {"myTextColor" : "orange"})
console.log("App started")
}
Here I try to set only color and text.color, but earlier I tried to change text rectangle size too. At first, I tried to just write {"height" : 100}. Then {"height" : "100"}, {"height" = 100}, etc. Then I added property myHeight (commented in first file), but with no luck. Then I did the same to text. Later I tried to create an alias property of text. I did that to every property (but cut that out of that example to spare space), without any success. Of course I changed also the anchors of loader. I tried to use anchors, to use explicitly set x,y, width, height; to use centering. Independently of attempts, the very thing that is being changed when I click buttons is color of the rectangle. Unfortunately, the only example of using Loader with properties in official Qt Documentation changes only the color property, so it doesn't help me.
My question is: how can I change properties (other than color) of a loaded object, using Loader.setProperty() method? Thank you in advance.
Btw, that is my first post here, so Hello Qt World:)
And sorry for possible lingual mistakes, as english isn't my native language.
I got the answer from official QtForum:
Instead of using
pageLoader.setSource("StartStateContent.qml", {"myColor": "red"}, {"myTextColor" : "white"})
one should use
pageLoader.setSource("StartStateContent.qml", {"myColor": "red", "myTextColor" : "white"})
because the setSource method expects an object. Works 100% that way!
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.
I'm designing the Spinner control (or You can Scollable list of items). Its working fine as far as the functionality is concerned
The main issue is the i want to create a circular motion feel in scrolling the items. So to give that effect in the scrolling list we decided to have preceding & trailing item size comparatively small than current item
I'm really struggling to get the different size of the items. Can any one suggest me how to proceed with the same.
Below is my code snippet
ContentModel.qml
import QtQuick 1.1
Rectangle {
property alias model: view.model
property alias delegate: view.delegate
property real itemHeight: height/5
clip: true
PathView {
id: view
anchors.fill: parent
//number of items visible on the path at any one time.
pathItemCount: height/itemHeight
// Ensuring the selected componenet to be at the center
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
// select maximum distance from the path that initiate mouse dragging
dragMargin: view.width
//Declare the path of list
path: Path {
startX: view.width/2; startY: -itemHeight/2
PathLine { x: view.width/2; y: view.pathItemCount*itemHeight + itemHeight/.8}
}
}
}
The main.qml snippet
main.qml
.......
ContentModel{
id: ContentModel_spinner
width: ContentModel_scroll.width; height: ContentModel_scroll.height
focus: true
model: 20
delegate: Text { font.pixelSize: index === ContentModel_spinner.currentIndex ? sec_spinner.height/4 : ContentModel_spinner.height/4.5; text: formatindex(index); height: ContentModel_scroll.height }
}
Check the tutorial here. They have given examples with different shapes of path views.
I really like QML. I like how I can define components (comparable to classes) and their properties, and instantiate them from somewhere else (comparable to objects).
I can define, let's say, a button, having some look and feel, and a label text on it. This could be done, for example, using this component definition (Button.qml):
Item {
id: button
property string label
anchors.fill: parent
Rectangle {
anchors.fill: parent
radius: 10
color: "gray"
Text {
anchors.centerIn: parent
font.pixelSize: 20
text: button.label
color: "white"
}
}
}
and instanciated in this main file (main.qml):
Rectangle {
width: 300
height: 200
Button {
anchors.centerIn: parent
anchors.margins: 50
label: "Hello button!"
}
}
But I see the following restriction: I can only define a button template with some properties, not with some placeholder. All children defined in the instance will be direct children, at least per default, and I want to change this behavior.
Let's say I want to place an item (let's say an image, but I don't want to tell the definition of Button that it will be an image) in the button. I imagine something like this:
Item {
id: button
property Item contents <-- the client can set the placeholder content here
anchors.fill: parent
Rectangle {
anchors.fill: parent
radius: 10
color: "gray"
Item {
id: placeholder <-- where the placeholder should be inserted
}
}
Component.onCompleted: {
// move the contents into the placeholder...
}
}
How can I achieve this? I don't know if using Component.onCompleted is the correct way. Note that, however, that in my case the contents will never change afterwards (at least in my current design of the application...).
Also, I want anchoring to work within the placeholder. For example, if I define the contents to be a Text element, being centered in its parent (which will first be the template itself). Then my code moves this Text instance into the placeholder and the parent anchors should then be those of the placeholder item, not the template item.
I found a much nicer answer to this question, suggested in a presentation of the Qt Developer Days 2011 "Qt Quick Best Practices and Design Patterns".
They use default property alias ... to alias the child items to any property of any item. If you don't want to alias the children but give the alias property a name, just remove default. (Literal children are per QML definition the value of the default property.)
Item {
id: button
default property alias contents: placeholder.children
anchors.fill: parent
Rectangle {
anchors.fill: parent
radius: 10
color: "gray"
Item {
id: placeholder <-- where the placeholder should be inserted
}
}
}
Necro answering in case someone else end up here as I did.
In Qt5 somewhere along the line the default property became "data" and not "children".
This makes it possible to add other object types than "Item".
e.g. Connections can be added as well (to answer my own question above)
So in Qt5 you should do:
Item {
id: button
default property alias contents: placeholder.data
anchors.fill: parent
Rectangle {
anchors.fill: parent
radius: 10
color: "gray"
Item {
id: placeholder <-- where the placeholder should be inserted
}
}
}
Note the:
placeholder.data instead of placeholder.children
Also please note that you don't have to use the alias name contents - this can be anything you like. An example:
Item {
id: button
default property alias foo: placeholder.data
...
}
Actually, the correct answer from what I've heard is to use a QML Loader to accomplish what you want.
[that being said; I haven't actually tried it yet but it's on my near-term to-try list and looks fairly straight forward]
Also, search stackoverflow for other "QML Loader" questions as there are a number that will help you get started.
You can move the item(s) (if you want to support multiple items within the placeholder) using this piece of code:
property list<Item> contents
Component.onCompleted: {
var contentItems = [];
for(var i = 0; i < contents.length; ++i)
contentItems.push(contents[i]);
placeholder.children = contentItems;
}
Note that you do not have to provide a list of Items for the contents property, as single values will be accepted by the QML engine also for list properties.
In short (to show the idea):
import QtQuick 1.1
Item {
width: 200
height: 100
//<-- the client can set the placeholder content here
property Item contents: Rectangle {
anchors.fill: parent
anchors.margins: 25
color: "red"
}
Rectangle {
id: container
anchors.fill: parent
radius: 10
color: "gray"
//<-- where the placeholder should be inserted
}
Component.onCompleted: {
contents.parent = container
}
}
Somewhat longer version (supporting contents reassignment):
import QtQuick 1.1
Item {
width: 200
height: 100
//<-- the client can set the placeholder content here
property Item contents: Rectangle {
//anchors can be "presupplied", or set within the insertion code
//anchors.fill: parent
//anchors.margins: 25
color: "red"
}
Rectangle {
id: container
anchors.fill: parent
radius: 10
color: "gray"
//<-- where the placeholder should be inserted
//Item {
// id: placeholder
//}
}
//"__" means private by QML convention
function __insertContents() {
// move the contents into the placeholder...
contents.parent = container
contents.anchors.fill = container
contents.anchors.margins = 25
}
onContentsChanged: {
if (contents !== null)
__insertContents()
}
Component.onCompleted: {
__insertContents()
}
}
Hope this helps :)