I have used a TabbedPane in this while clicking i need to call an another qml file here is the code am using but its not working
TabbedPane {
showTabsOnActionBar: tabs
sidebarState: SidebarState.VisibleCompact
Tab {
imageSource: "asset:///msg.png"
Page {
id: page1
actions: [
ActionItem {
onTriggered: {
var page = pageDefinition.createObject();
navigationPane.push(page);
}
attachedObjects: ComponentDefinition {
id: pageDefinition;
source: "x.qml"
}
}
]
actionBarVisibility: ChromeVisibility.Visible
}
}
can anyone send me code how to add Click event inside this function
Thanks
Here is an example for creating tabs for a different screen. You are in main tab to go next qml as follows:
Tab {
title: "Puppies"
NavigationPane {
id: navigationPane
Sample //this is one qml page as like Sample.qml
{
}
}
}
Tab {
title: "Kittens"
NavigationPane
{
id: testpage
Test //this is one qml page as like Test.qml
{
}
}
}
You can access other QML files by setting the id.
Related
I want to check if an item of component is vissible or not but I don't know how to do this.
Here is my code but error is "ReferenceError: tagFilterPlaylist is not defined" how to solve this?
Repeater {
id: tagRepeater
model: main.playListBrowseModel
Component {
id: componentTagFilterPlaylist
BasicUI.Tag {
id: tagFilterPlaylist
tag: "playlist"
selected: true
}
}
Loader {
id: filterLoader
sourceComponent:
if (item_type === "playlist"){
console.debug("check"+tagFilterPlaylist)
if (!tagFilterPlaylist) {
tagFilterPlaylist.visible = true;
return componentTagFilterPlaylist
}
}
}
}
You can't refer to an id within a Component because you first need to have an instance of that Component. What you should do is simply keep a boolean property outside the Repeater that keeps track of whether or not you're displaying your one and only tagFilterPlaylist.
property bool playlistVisible: false
Component {
id: componentTagFilterPlaylist
...
}
Repeater {
id: tagRepeater
model: main.playListBrowseModel
Loader {
id: filterLoader
sourceComponent:
if (item_type === "playlist"){
if (!playlistVisible) {
playlistVisible = true;
return componentTagFilterPlaylist
}
}
}
}
Suppose I had the Component
Component {
id: myComp1
Item {
id: item
ListView {
id: listView
model : ListModel { id: listModel }
delegate : RowLayout { /* display model data*/ }
Component.onCompleted {
// get data from server ...
model.append(dataFromServer)
}
}
}
}
Then I have a second Component, which is another page in the stack, and I want to use this component to update mycomp1, i.e:
Component {
id: myComp2
Button {
onClicked: {
myComp1.item.listView.listModel.append(someNewData) // want to be able to do this
}
}
}
And these components are tied together in a StackView
Now, this doesnt seem to work since myComp2 cant seem to access the necessary scope to update the model of myComp1. Is there any way around this?
Thanks for the help.
The problem is that a Component is like a type declaration. It does not define an instance of an object, so you cannot access its members.
You could pull the ListModel outside of that Component so that both Components can access it.
ListModel {
id: listModel
}
Component {
id: comp1
ListView { model: listModel }
}
Component {
id: comp2
Button {
onClicked: { listModel.append(someNewData) }
}
}
I am trying to create Qt application, where will be possible to change view between video and images depends on called function. There is short example of my .qml file structure:
ApplicationWindow {
Rectangle {
Rectangle {
id: Container
function dispImage(_title, _path)
{
//show imgae
}
function dispVideo(_title, _path)
{
//show video
}
Rectangle {
id: titleContainer
Text {
id: title
}
}
Rectangle {
id: image
Image {
id: image
}
}
Rectangle {
id: video
Image {
id: image
}
}
}
}
Which one mechanism should I use? Is this possible to do that by calling proper function from code?
There are different ways to achieve that.
You can use a Loader and load a different Component, or you can simply hide one and show the other:
function dispImage(_title, _path)
{
image.visible = true
video.visible = false
//...
}
function dispVideo(_title, _path)
{
image.visible = false
video.visible = true
//...
}
However that code you have there isn't likely to work, seeing how you have the same id: image 3 times, you also have an id that begins with a capital letter, which is also "illegal" in QML. Maybe next time try posting working code to demonstrate some initial effort to accomplish your task.
in QML when I used Menu QML type, event.modifiers didn't work in Keys.onPressed, but after commenting Menu type it worked. What am I doing wrong? is there any bug related to Menu QML type?
I am using Qt 5.4.0.
Rectangle {
id: main
width: 600
height: 300
Menu {
id: menu
title: "Edit";
MenuItem { text: "Copy";shortcut: "Ctrl+C" }
MenuItem { text: "Paste";shortcut: "Ctrl+V" }
MenuItem { text: "Select" }
MenuItem { text: "Select all";shortcut: "Ctrl+A" }
MenuSeparator { }
MenuItem { text: "Delete";shortcut: "Delete" }
MenuItem { text: "Delete all" }
MenuSeparator { }
MenuItem { text: "Auto arrange" }
}
Keys.onPressed: {
if((event.key === Qt.Key_C) && (event.modifiers & Qt.ControlModifier))
{
console.log("Ctrl+C is pressed")
}
}
MouseArea{
anchors.fill : parent;
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
main.focus = true;
if(mouse.button === Qt.RightButton){
menu.popup();
}
}
}
}
Menu is not a visual primitive (QQuickItem), and hence doesn't receive events:
All visual primitives support key handling via the Keys attached property.
The shortcut property that you're currently using is the correct way to provide shortcuts to menus. You can also assign an action.
To respond to a shortcut being triggered, use the triggered signal.
I have my main.qml that contains a tabbedpane, in which, it has two tabs: tab1 and tab2.
I would like to be able to change the text from one tab to another.
If I do the same with navigationpane it works but not with tabs apparently. Is there any way I could share information between them? I've tried with signals in c++ but it doesn't work either(I guess it doesnt know the instance ?).
Any suggestion is appreciated.
main.qml:
TabbedPane {
Tab {
Tab1 {
}
}
Tab {
Tab2 {
}
}
attachedObjects: [
Tab1 {
id: tab1
},
Tab2 {
id: tab2
}
]
}
Tab1.qml:
Page {
property alias labeltab1: labeltab1
Container {
Label {
id: labeltab1
text: "label tab1"
}
Button {
id: buttontab1
text: "tab1"
onClicked: {
tab2.labeltab2.text = "This is coming from tab1"
}
}
}
}
Tab2.qml:
Page {
property alias labeltab2: labeltab2
Container {
Label {
id: labeltab2
text: "Label tab2"
}
Button {
id: buttontab2
text: "tab2"
onClicked: {
tab1.labeltab1.text = "This is coming from tab2"
}
}
}
}
I guess it's actually simpler with tabs and I found my own solution.
I noticed that momentics cannot detect that "thepane" is linkable and will not suggest its name when typing it from one of the tab. Also, a property with colon will automatically bind the value afterit, as: text: thepane.mystring
When clicking on buttons, it changes the value of mystring thus changing both labels texts.
main.qml
TabbedPane {
id: thepane
property string mystring
Tab {
Tab1 {
}
}
Tab {
Tab2 {
}
}
}
Tab1.qml
Page {
Container {
Label {
id: labeltab1
text: thepane.mystring
}
Button {
id: buttontab1
text: "tab1"
onClicked: {
thepane.mystring = "This is coming form tab1"
}
}
}
}
Tab2.qml
Page {
Container {
Label {
id: labeltab2
text: thepane.mystring
}
Button {
id: buttontab2
text: "tab2"
onClicked: {
thepane.mystring = "This is coming from tab2"
}
}
}
}
Thank you for your idea.
I changed the code. Now it is better for me, maybe for other one people :)
main.qml
TabbedPane {
id: main_Pane
property string action_1
property string action_2
Tab {
Tab1 {}
}
Tab {
Tab2 {}
}
}
Tab1.qml
Page {
Container {
Label {
text: main_Pane.action_1
}
Button {
text: "Button 1"
onClicked: {
main_Pane.action_2 = "This is action form Tab1"
}
}
}
}
Tab2.qml
Page {
Container {
Label {
text: main_Pane.action_2
}
Button {
text: "Button 2"
onClicked: {
main_Pane.action_1 = "This is action from Tab2"
}
}
}
}