I have BasePage.qml like this:
Item {
property alias content: loader.sourceComponent
signal topBarLeftButtonClicked()
TopBar {
...
}
Loader {
id: loader
}
BottomBar {
...
}
}
This way I can change dynamically the content of the page, but I must use Component, and I can't read properties of the content in a DerivedPage.
For example:
DerivedPage.qml
BasePage {
onTopBarLeftIconClicked: item.text //error, item is not defined
content: Component {
TextField {
id: item
}
}
}
Any solution?
You can define an alias to the Loader's item property inside BasePage, like that:
property alias contentItem: loader.item
And refer to it instead of content item within DerivedPage.
Putting it all together:
// BasePage.qml
Item {
property alias content: loader.sourceComponent
property alias contentItem: loader.item
signal topBarLeftButtonClicked()
Loader { id: loader }
}
// DerivedPage.qml
BasePage {
onTopBarLeftIconClicked: { contentItem.text = "clicked" }
content: Component { TextField { } }
}
I found a way to replace loader and components:
//BasePage.qml
Item {
default property alias data: item.data
signal topBarLeftButtonClicked()
TopBar {
...
}
Item{
id: item
}
BottomBar {
...
}
}
//DerivedPage.qml
BasePage {
onTopBarLeftIconClicked: textField.text = "string"
TextField {
anchors.fill: parent
id: textField
}
}
This way textField replace item in BasePage.qml
Related
If I replace component with Rectangle, then the scrollview works.....
Any idea? How to include dynamic parts in ScrollView?
Thanks in advance
ScrollView {
id:template1
contentHeight: 2000
....
Component {
id: routeComp
CruiseRouteButton {
}
}
function createTab() {
}
Component.onCompleted: {
for(var i = 0; i < mainWnd.config.routes.length; i++) {
....
let t = routeComp.createObject(template1, cfg);
routes[i] = t
}
createTab()
}
This component is used to dynamically set some routes for user to choose
I have a ListView that displays a list of all notifications for a user. Right now since I'm using Component.onCompleted, if the list updates, the new list is not displayed, but the one which existed during instantiation. How could we solve this? Would using a Loader with a separate component instead help?
property int numNotifications: backend_service.num_notifications
property var notifications: []
onNumNotificationsChanged: {
for(var x=0; x<numNotifications; x++) {
var notif = backend_service.notifications.get(x);
notifications.push(notif)
}
}
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
color: "black"
height: 500
width: 0.95 * parent.width
ListView {
anchors.fill: parent
model: notifModel
delegate: notifDelegate
}
}
ListModel {
id: notifModel
Component.onCompleted: {
for(var i in notifications) {
notifModel.append({"name": notifications[i]})
}
}
}
Component {
id: notifDelegate
Row {
spacing: 10
Text { text: name; color: "white" }
}
}
Component.onCompleted only runs when the object is built and never again. So using that method to add items to the model is useless, instead you should use the function that reports the new data:
onNumNotificationsChanged: {
for(var x=0; x<numNotifications; x++) {
var notif = backend_service.notifications.get(x);
notifModel.append({"name": notif})
}
}
Item {
Component.onComplete: {
for (var i=0;i < 10;i++) {
myModel.append({"myTxt": "SomeThing"+i});
}
}
ListModel {
id: myModel
}
ListView {
id: listView
width: parent.width
height: parent.height
model: myModel
delegate: Rectangle {
property string propItemState: 0;
MyListItem {
id: test
itemText: myText
itemState: propItemState;
}
}
}
}
I want to update the propItemState once the list is displayed.
For that, I have tried the below method but am getting an undefined error.
I am calling this method once the list model is updated.
function updateListItems() {
for (var index=0;index < listView.count;index++) {
console.log("propItemState: "+listView.contentItem.children[index].propItemState);
listView.contentItem.children[index].propItemState = 2;
}
}
You can bind propItemState to something outside of your delegate. Or you can add signal handler (Connections), which listens to your model (for example; or to some another class) and changes state when your conditions met.
Example:
Item {
Component.onComplete: {
for (var i=0;i < 10;i++) {
myModel.append({"myTxt": "SomeThing"+i});
}
internal.state = "1";
}
ListModel {
id: myModel
}
QtObject {
id: internal
property string state: "0"
}
ListView {
id: listView
width: parent.width
height: parent.height
model: myModel
delegate: Rectangle {
property string propItemState: internal.state
MyListItem {
id: test
itemText: myText
itemState: propItemState;
}
}
}
}
I am using Qt 5.9.3. I have a QML Item like so:
Item {
id: root
width : 400
height: 700
}
How do I track when the Item was first time visible on screen of my application window? onVisibilityChanged?
How do I do track the same for a MyQuickItem which is something like this:
// C++ definition
class MyQuickItem : public QQuickitem {
}
// QML side
MyQuickItem {
id: some_id
}
I guess the complete code suppose like:
ApplicationWindow{
visible: true
onVisibilityChanged: {
console.log("ApplicationWindow is ", visibility)
}
Component.onCompleted: {
console.log("ApplicationWindow is onCompleted")
}
Item {
id: root
width : 400
height: 700
onVisibleChanged: {
console.log("Item is ", visible)
}
Component.onCompleted: {
console.log("Item is onCompleted")
}
}
}
Obviously the onVisibilityChanged of ApplicationWindow will trigger when the visibility property is changed, so it triggers when you minimize and reshow the window. As you mention the first time visible, so I think you are looking for Component.onCompleted.
Suppose we have a QML file like the following:
Window {
Component.onCompleted: rect.color ="green"
TabView {
Tab {
Rectangle {
id: rect
color: "white"
}
}
}
}
When I run this code, for some reason, it gives me this error:
ReferenceError: rect is not defined
Somebody can say it's a scope problem but the following code works fine:
Window {
Component.onCompleted: rect.color ="green"
Item {
Item {
Rectangle {
id: rect
color: "white"
}
}
}
}
In my case I have a big form with tabs and controls inside it and I pass all the controls to several functions to validate the form, i.e. some code like this:
function onClose() {
validate(control1);
validate(control2);
// etc
}
but while accessing controls by id I get the above error.
How about just binding the rectangle to a color parameter instead of a hardcoded value?
This wil separate your Model and View code further to make it more readable elsewhere in your project as well...try:
Window {
property string myColor: "White"
Component.onCompleted: myColor = "Green"
TabView {
Tab {
Rectangle {
id: rect
color: myColor
}
}
}
}
To view the QML object tree, you need to start your project in debug mode. Then split your code window so that the "Locals and Expressions" view is showing (checkbox ticked on the right side). You will see your root item and all the other controls nested in a tree and now you can directly edit the values of their properties, and the changes will render immediately. There is a youtube video tutorial on debugging: https://youtu.be/mPXn6L2Wftc?t=19m55s
I'm not sure if the tree would give you access to the controls at runtime, but it might help you with debugging.
Ok, since Tab item cannot be accessed from outside I think it can be done in this way:
TabView {
id: tabView
Tab {
title: "tab1"
function validate() { /* validate all the controls related to tab1 only */ }
Item { id: item1 }
Item { id: item2 }
}
Tab {
title: "tab2"
function validate() { /* validate all the controls related to tab2 only */ }
Item { id: item3 }
Item { id: item4 }
}
function validateTabs() {
for(var i = 0; i < tabView.count;i ++) {
var tab = tabView.getTab(i);
if(tab && tab.active && tab.item.validate) {
if(!tab.item.validate())
return false;
}
}
return true;
}
}
The good point that if some Tab wasn't opened and so not changed it will not be validated.