My application is running very well inside Ubuntu operational system. But when I try to run it inside the Yocto using Boot2Qt it throws the following error message:
QML ToolBar (parent or ancestor of Material): Binding loop detected for property "foreground"
Here is a spinet of my code that throws this error.
Page{
id: mainPage
anchors.fill: parent
visible: true
header: ToolBar{id: toolBarHeader
parent: mainPage
height: root.toolBarHeight
anchors.left: parent.left
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 0
anchors.leftMargin: 0
Material.background: Material.color(Material.BlueGrey, functionsJS.toolBarIntensity())
Here is the result that I'm getting: nasty application response:
Trying to figure out what is going on. I've done this:
Page{
id: mainPage
anchors.fill: parent
visible: true
header: ToolBar{id: toolBarHeader
parent: mainPage
height: root.toolBarHeight
anchors.left: parent.left
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 0
anchors.leftMargin: 0
background: Rectangle{anchors.fill: parent; color: "red"}}
End now, I'm getting this: Maybe problem with material?:
Related
I want to create a custom Scrollbar.Like this.
This is my code, i want to use ScrollBar component in Qml.
Rectangle {
id: frame
clip: true
width: 160
height: 160
border.color: "black"
anchors.centerIn: parent
Text {
id: content
text: "ABC"
font.pixelSize: 160
x: -hbar.position * width
y: -vbar.position * height
}
ScrollBar {
id: vbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: frame.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
In my case, i want to create with my Scrollbar image.
I tried「source: "./bar.bng" 」,but it said ScrollBar haven't have the parameter "source". How can i use custom image.
Stylesheets (in a form of .qss files, as used for QWidget's) are not used for QML.
Here are examples of how you can implement them though.
For your exact use-case, check out Customizing ScrollBar
If I have the following:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 800
height: 700
visible: true
property var myArray: [1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
menuBar: MenuBar {
Menu {
title: qsTr("&File")
MenuItem {
text: qsTr("&Open")
onTriggered: messageDialog.show(qsTr("Open action triggered"));
}
MenuItem {
text: qsTr("E&xit")
onTriggered: Qt.quit();
}
}
}
Rectangle {
id: myButton
anchors.top: parent.top
anchors.topMargin: 5
color: "yellow"
width: 100
height: 25
radius: 3
anchors.horizontalCenter: parent.horizontalCenter
Text {
text: "Clear Selection"
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea {
anchors.fill: parent
onClicked: {
myListView.currentIndex = -1
}
}
}
ListView {
id: myListView
width: 300
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: myButton.bottom
anchors.topMargin: 5
anchors.bottom: parent.bottom
currentIndex: -1
//highlightFollowsCurrentItem: false
highlight: Rectangle {
color: "pink"
radius: 3
width: parent.width - 10
height: 25
//y: myListView.currentItem.y
anchors.horizontalCenter: parent.horizontalCenter
}
clip: true
model: myArray
delegate: Rectangle {
width: parent.width - 10
height: 25
color: "transparent"
border.color: "cyan"
anchors.horizontalCenter: parent.horizontalCenter
Text {
text: myArray[index]
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: myListView.currentIndex = index
}
}
}
MessageDialog {
id: messageDialog
title: qsTr("May I have your attention, please?")
function show(caption) {
messageDialog.text = caption;
messageDialog.open();
}
}
}
When clicking the Clear Selection button I receive the following:
qrc:/main.qml:67: TypeError: Cannot read property of null
qrc:/main.qml:64: TypeError: Cannot read property of null
How can I clear the selection without getting the error? It doesn't appear to crash the application but I have a list view that changes based on another list view selection and the error occurs several times, cluttering up the debug output in Qt Creator. I have noticed this in Qt 5.4 and 5.5
The documentation for ListView says:
An instance of the highlight component is created for each list. The geometry of the resulting component instance is managed by the list so as to stay with the current item, unless the highlightFollowsCurrentItem property is false.
So you don't need to try to manage the position of the highlight item yourself. If you want to position the highlight, create an intermediate parent item instead:
highlight: Item {
Rectangle {
color: "pink"
radius: 3
width: parent.width - 10
height: 25
anchors.horizontalCenter: parent.horizontalCenter
}
}
As for why it happens, it's likely because the highlight item is reparented, leaving it in a state where its parent property is null. You can test this out with the following code:
anchors.horizontalCenter: { print(parent); parent.horizontalCenter }
The problem in general is that if you have a foo, which is supposed to have a bar, then you reference it as foo.bar, however, if foo was not properly initialized, then it cannot have a bar, since it does not exist (yet). In your case it seems that parent is not properly initialized, so it does not have a width and horizontalCenter (in the delegate, maybe), respectively. The solution is to initialize properly the object whose members are to be used, in our case, parent.
I had asked this question over on the Qt forum (https://forum.qt.io/topic/62328/clearing-a-qml-listview-selection) as well, but stack was quicker with a response. Checking the parent value works:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 800
height: 700
visible: true
property int myMargin: 5
menuBar: MenuBar {
Menu {
title: qsTr("&File")
MenuItem {
text: qsTr("&Open")
onTriggered: messageDialog.show(qsTr("Open action triggered"));
}
MenuItem {
text: qsTr("E&xit")
onTriggered: Qt.quit();
}
}
}
Rectangle {
id: myButton
anchors.top: parent.top
anchors.topMargin: myMargin
color: "yellow"
width: 100
height: 25
radius: 3
anchors.horizontalCenter: parent.horizontalCenter
Text {
text: "Clear Selection"
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
MouseArea {
anchors.fill: parent
onClicked: {
myListView.currentIndex = -1
}
}
}
Rectangle {
width: 300
anchors.top: myButton.bottom
anchors.topMargin: myMargin
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
ListView {
id: myListView
anchors.fill: parent
currentIndex: -1
spacing: 3
highlightMoveDuration: 25
highlight: Rectangle {
width: parent ? parent.width - 10 : 0
height: parent ? 25 : 0
color: "pink"
radius: 3
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
}
clip: true
model: ListModel {
id: myArray
Component.onCompleted: {
for (var i = 1; i < 46; i++)
append({number: i})
}
}
delegate: Rectangle {
width: parent ? parent.width - 10 : 0
height: parent ? 25 : 0
color: "transparent"
border.color: "cyan"
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
Text {
text: number
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
myListView.currentIndex = index
}
}
}
}
}
MessageDialog {
id: messageDialog
title: qsTr("May I have your attention, please?")
function show(caption) {
messageDialog.text = caption;
messageDialog.open();
}
}
}
How to send a variable, or signal between qml files ?
http://i.stack.imgur.com/MChCG.png
Mainwindow -> create a component Item2.qml
MainWindow -> create a component item1.qml
item1.qml -> create a component Item3.qml
Item3.qml -> change/send variable or signal to ItemII.qml(is created in mainwindow) - How ?
Someone could write a small example ?
Example code:
Item1.qml
//Item 1
import QtQuick 2.1
Rectangle {
width: 200
height: 100
color:"red"
Text{
anchors.centerIn: parent
font.pixelSize: 16
text:"Item1"
width:parent.width
horizontalAlignment: Text.AlignRight
color:"white"
}
}
Item2.qml
//Item 2
import QtQuick 2.1
Rectangle {
width: 100
height: 100
color:"blue"
Text{
anchors.centerIn: parent
font.pixelSize: 16
text:"Item2"
color:"white"
}
}
Item3.qml
//Item 3
import QtQuick 2.1
Rectangle {
id:item3
width: item3Area.pressed?90:100
height: item3Area.pressed?90:100
color:"green"
signal superAwesomeSignal(string txt)
Text{
anchors.centerIn: parent
font.pixelSize: 16
text:"Item3"
color:"white"
}
MouseArea{
id:item3Area
anchors.fill: parent
onClicked:item3.superAwesomeSignal("Hello, from Item 3 ")
}
}
Main.qml
//Main.qml
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Item1{
anchors.top: parent.top
anchors.left: parent.left
Item3{
id:item3
anchors.top: parent.top
onSuperAwesomeSignal: item2.item3SignalReceived(txt)
}
}
Item2{
id:item2
anchors.bottom: parent.bottom
signal item3SignalReceived(string txt)
onItem3SignalReceived:console.debug(txt)
}
}
I have a qml GUI of my main window. I just created a qt quick2 application and copied and pasted qml GUI of my main window to main.qml. When I run the application, it displays blank window and following is my qml log:
QML debugging is enabled. Only use this in a safe environment.
Both point size and pixel size set. Using pixel size.
Both point size and pixel size set. Using pixel size.
Both point size and pixel size set. Using pixel size.
file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/qml/convQML/main.qml:99:9: QML Text: Cannot anchor to an item that isn't a parent or sibling.
file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/qml/convQML/main.qml:31:9: QML BasicButton: Cannot anchor to an item that isn't a parent or sibling.
file:///home/khajvah/Qt5.1.0/5.1.0/gcc_64/qml/QtQuick/Controls/Styles/Base/ToolButtonStyle.qml:73:9: QML Image: Cannot open: file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/logout-512.png
file:///home/khajvah/Qt5.1.0/5.1.0/gcc_64/qml/QtQuick/Controls/Styles/Base/ToolButtonStyle.qml:73:9: QML Image: Cannot open: file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/console.ico
file:///home/khajvah/Qt5.1.0/5.1.0/gcc_64/qml/QtQuick/Controls/Styles/Base/ToolButtonStyle.qml:73:9: QML Image: Cannot open: file:///home/khajvah/build-convQML-Desktop_Qt_5_1_0_GCC_64bit-Debug/mod.png
QQuickView only supports loading of root objects that derive from QQuickItem.
If your example is using QML 2, (such as qmlscene) and the .qml file you
loaded has 'import QtQuick 1.0' or 'import Qt 4.7', this error will occur.
To load files with 'import QtQuick 1.0' or 'import Qt 4.7', use the
QDeclarativeView class in the Qt Quick 1 module.
the following is my qml file:
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
ApplicationWindow {
id: applicationwindow1
title: qsTr("Converter")
width: 500
//height: 600
// menuBar: MenuBar {
// }
ToolBar {
id: tool_bars
x: 0
y: 0
width: applicationwindow1.width
height: 39
clip: true
smooth: false
opacity: 1
transformOrigin: Item.Center
ToolButton {
id: modify
y: 1
scale: 1
anchors.right: tool_bars.left
iconSource: "../../mod.png"
}
ToolButton {
id: consolebtn
x: 32
y: 1
scale: 1
anchors.left: modify.right
anchors.leftMargin: 6
iconSource: "../../console.ico"
}
ToolButton {
id: exit;
x: 75
y: 1
scale: 1
anchors.left: consolebtn.right;
anchors.leftMargin: 6
iconSource: "../../logout-512.png"
}
}
GroupBox {
id: group_box1
x: 0
y: 30
width: 500
height: 136
anchors.top: tool_bars.bottom
anchors.topMargin: -9
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
ComboBox {
id: typebox
anchors.left: text1.right
anchors.leftMargin: 5
width: 70
height: 23
anchors.top: parent.top
anchors.topMargin: 37
}
Text {
id: text1
anchors.left: group_box1.left
anchors.leftMargin: 5
text: "Type:"
anchors.top: parent.top
anchors.topMargin: 41
font.italic: true
style: Text.Normal
font.pointSize: 12
font.pixelSize: 12
}
ComboBox {
id: frombox
x: 205
anchors.left: text2.right
anchors.leftMargin: 8
width: 70
height: 23
anchors.top: parent.top
anchors.topMargin: 37
}
Text {
id: text2
x: 189
anchors.leftMargin: 20
text: "From:"
anchors.top: parent.top
anchors.topMargin: 41
anchors.horizontalCenterOffset: -32
anchors.horizontalCenter: parent.horizontalCenter
font.italic: true
style: Text.Normal
font.pointSize: 12
font.pixelSize: 12
}
ComboBox {
id: tobox
x: 412
anchors.right: parent.right
anchors.rightMargin: 5
width: 70
height: 23
anchors.top: parent.top
anchors.topMargin: 37
}
Text {
id: text3
x: 0
text: "To:"
anchors.top: parent.top
anchors.topMargin: 41
anchors.right: tobox.left
anchors.rightMargin: 5
font.italic: true
style: Text.Normal
font.pointSize: 12
font.pixelSize: 12
}
TextField {
id: text_field1
y: 78
width: 197
height: 22
anchors.bottom: parent.bottom
anchors.bottomMargin: 15
anchors.left: parent.left
anchors.leftMargin: 5
placeholderText: "Input"
}
TextField {
id: text_field2
x: 293
y: 78
width: 186
height: 22
anchors.bottom: parent.bottom
anchors.bottomMargin: 15
anchors.right: parent.right
anchors.rightMargin: 5
readOnly: true
placeholderText: "Result"
}
}
TextArea {
id: text_area1
x: 0
y: 178
width: 500
height: 80
anchors.left: parent.left
anchors.leftMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: group_box1.bottom
anchors.topMargin: 12
anchors.bottom: addlogbtn.top
anchors.bottomMargin: 5
}
Button {
id: addlogbtn
x: 7
y: 212
width: 110
height: 23
text: "Add to Log"
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.left: parent.left
anchors.leftMargin: 7
}
Button {
id: button1
x: 195
y: 212
width: 118
height: 23
text: "Export"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
}
Button {
id: button2
x: 359
y: 212
width: 117
height: 23
text: "Clear"
anchors.right: parent.right
anchors.rightMargin: 7
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
}
}
and automatically generated main.cpp:
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/convQML/main.qml"));
viewer.showExpanded();
return app.exec();
}
Any ideas why this does not work? I am new to qml and I am really confused how it is connected to c++.
You can definitely use ApplicationWindow, but you need to use QQmlApplicationEngine, and you need to explicitly show your toplevel window. You can see a complete example in another answer. Below is just a main.cpp file that should work for you.
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl("qml/convQML/main.qml"));
QObject *topLevel = engine.rootObjects().value(0);
QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
window->show();
return app.exec();
}
I am trying to create a simple window using QML which has 2 controls, a TextEdit and TextInput. I am trying to get the TextInput (single) to be anchored to the bottom of the parent window, while the TextEdit (multiline) is a resizable control above the TextInput. The single-line textInput can resize to fit the width of the parent, but the multiline TextEdit can resize to fill the rest of the screen above the TextInput.
This is what I have so far:
import QtQuick 1.0
Item {
id: container
width: 500
height: 400
TextEdit {
color: "red"
id:outputWindow
anchors.top: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: inputWindow.bottom
wrapMode: Text.Wrap
text: "Welcome"
}
TextInput {
color:"blue"
id:inputWindow
anchors.left: parent.left
anchors.right: parent.right
//anchors.top: outputWindow.bottom
anchors.bottom: parent.bottom
text: "Input here"
focus:true
}
}
I would like inputWindow (2nd control) to be anchored to the bottom (and left/right) of the parent, while outputWindow (the 1st control) is anchored to top/left/right of parent. When the parent is resized vertically, the outputWindow resizes vertically to fill the available space. This does not happen using the code above, what I get is the inputWindow is stuck to the bottom of the outputWindow and moves with it.
I am able to do this easily using a QT UI file, but after having searched extensively for any information on how to do this using QML, I have to ask here. Any help would be appreciated. Thanks.
You have some small errors in the outputWindow definition
TextEdit {
color: "red"
id:outputWindow
anchors.top: parent.top // anchor to top of parent
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: inputWindow.top // anchor bottom to top of input window
wrapMode: Text.Wrap
text: "Welcome"
}
This way outputWindow starts at the top of its container and ends at inputWindow.
Just use the correct anchors, and use wrapMode and clip :
import QtQuick 1.1
Item {
id: container;
width: 500;
height: 400;
TextEdit {
color: "red";
id:outputWindow;
anchors.top: parent.top;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: inputWindow.top;
wrapMode: Text.WrapAtWordBoundaryOrAnywhere;
text: new Array(100).join("Welcome\n"); // dumb content to show layout
clip: true;
}
TextInput {
id: inputWindow;
color:"blue"
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
text: "Input here";
focus: true;
}
}
Use columns are rows as much as possible. I've found them to be most effective while laying out various UI elements.
Also, anchoring items to other items on the same level doesn't work all the time i think, i think its best practice to anchor to the parent.
TextEdit {
color: "red"
id:outputWindow
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height : parent.height - inputWindow.height //replace bottom anchor with this
wrapMode: Text.Wrap
text: "Welcome"
}