Pop to specific item in QtQuick StackView - qml

I am using Qt 5.2.1 on Android, and I have a main application window with code as below (the example is a bit contrived, but it illustrates accurately what I am doing):
property Component mainMenuView: MainMenuView {
onMoviesSelected: {
stackView.push(moviesListView)
}
onSettingsSeleted: { }
onAboutSeleted: { }
}
property Component moviesListView: MovieListView {
onMovieSelected: {
stackView.push(movieDetailView)
}
onBack: stackView.pop()
}
property Component movieDetailView: MovieDetailView {
onCreditsSelected: {
stackView.push(personListView)
}
onBack: stackView.pop()
}
property Component personListView: PersonListView {
onPersonSelected: {
// Pending...
}
onBack: stackView.pop()
}
The idea is you choose from the menu, you see the movies. You choose from the movies, you see movie detail. You choose to view credits, you see the list of cast and crew. All of this uses a StackView and works just fine. The back button also works fine, popping off the views one at a time as you go back.
So now when I choose a particular person from the personListView, I want to skip right back to the moviesListView and miss out the intermediate movieDetailView. The idea is that the movie list now shows only the movies that include the selected person.
I know that I could, any maybe should, just push another moviesListView in this case - but this example is contrived to describe the general issue.
To do this, you can invoke the StackView pop() method and supply the 'item' you want to go back to - so I tried this:
property Component personListView: PersonListView {
onPersonSelected: {
stackView.pop(moviesListView)
}
onBack: stackView.pop()
}
When this runs, there are no error messages (so I assume it knows that movieListView is something that exists) but it pops back to the immediately previous view, i.e. the movieDetailView. It should miss out that view and show the movieListView.
If I try to pop back to the mainMenuView, it still just pops back to the immediately previous movieDetailView.
Is this somehow related to how I am using Component for my views and if so what should I do, or is something else wrong?

Looks like a bug. I can reproduce it with this example:
import QtQuick 2.2
import QtQuick.Controls 1.1
Rectangle {
property Component mainMenuView: Button {
text: "mainMenuView"
onClicked: {
Stack.view.push(moviesListView)
}
}
property Component moviesListView: Button {
text: "moviesListView"
onClicked: {
Stack.view.push(movieDetailView)
}
}
property Component movieDetailView: Button {
text: "movieDetailView"
onClicked: {
Stack.view.push(personListView)
}
}
property Component personListView: Button {
text: "personListView"
onClicked: {
// Wrong: goes to movieDetailView.
Stack.view.pop(moviesListView)
// Wrong: goes to mainMenuView.
// Stack.view.pop({item: moviesListView})
}
}
StackView {
initialItem: mainMenuView
}
}
I've created QTBUG-39423 for this.

Related

QML - change how transition between pages looks

I know this is probably super basic, but I am new to learning QML and have a question about transition between pages.
In this example I have a button with which I want to switch between my 3 pages.
the transition works, but the pages always move from the right-to-the-left-side of the window.
how can I change this? I need the new page to appear as a whole right away.
(e.g. when changing from firstPage to secondPage, for the user it looks like only the AppText changes, because the button is at the same position in both cases)
code example:
App {
id: app
width: px(250); height: px(250)
NavigationStack {
Page {
id: page
navigationBarHidden: true
AppText { text: "startpage" }
SimpleButton{
x: 220; y: 0
onClicked: page.navigationStack.push(firstPage)
}
}
}
Component {
id: firstPage
Page {
navigationBarHidden: true
AppText { text: qsTr("1st page") }
SimpleButton{
x: 220; y: 0
onClicked: page.navigationStack.push(secondPage)
}
}
}
Component {
id: secondPage
Page {
navigationBarHidden: true
AppText { text: qsTr("2nd page") }
SimpleButton{
x: 220; y: 0
onClicked: page.navigationStack.push(page)
}
}
}
}
Any help would be greatly appreciated!
It looks like you're using Felgo, which I think is an extra library on top of Qt. For instance, there is no built-in QML component called NavigationStack. That comes from Felgo. You should mention that in your question to get better help with it.
I've never used Felgo myself, but just looking at the documentation real quick, it looks like you need to define a new transitionDelegate for your needs. Here is the example they give where new pages fade in/fade out.
NavigationStack {
// custom transition delegate
transitionDelegate: StackViewDelegate {
pushTransition: StackViewTransition {
NumberAnimation {
target: enterItem
property: "opacity"
from: 0
to: 1
duration: 1000
}
}
popTransition: StackViewTransition {
NumberAnimation {
target: exitItem
property: "opacity"
from: 1
to: 0
duration: 1000
}
}
}
initialPage: pageComponent
}

SwiftUI NavigationLink not displaying view until physical rotation then all is ok?

The opening view of App is blank with a Back Button. However, the intended view will appear after complete rotation of physical device (before touching anything) or by tapping the Back Button on the displayed empty view.
This is a weird bug. After that rotation (to landscape and back to protrait) everything is peachy-keen-o.
I am aware that adding: .navigationViewStyle(StackNavigationViewStyle()) to the NavigationView will sorta resolve the problem. But this solution is a poor fix for my App's needs.
Is there a command to intentionally rotate device in code to resolve this? Or some other fix to get that first view to appear without counting on the user to rotate the device?
I've tried various solutions with no luck.
Below is a quick setup of the problem.
struct FirstView: View {
#Binding var viewNum: Int?
var body: some View {
VStack {
Text("View One")
.padding(20)
Button {
viewNum = 2
} label: {
Text("Go to 2nd view")
}
}
.onAppear {
viewNum = 1
}
}
}
struct MainView: View {
#State var selection: Int? = 1
var body: some View {
// VStack {
NavigationView {
List {
NavigationLink("First View", tag: 1, selection: $selection){ FirstView(viewNum: $selection)}
NavigationLink("Second View", tag: 2, selection: $selection){
Text("View 2").padding(20)
Button {
selection = 1
} label: {
Text("Go to first view")
}
}
}
}
// .navigationViewStyle(StackNavigationViewStyle())
//}
}
}

Retrieving the used modifiers on button click with QtQuick 2.9

I've got that pure QML application working on QtQuick 2.9.
I'm trying to retrieve the keyboard modifier used during the mouseclick.
From QtQuick 2.15, I could write this:
Button {
text: "button"
onClicked: {
if ((mouse.button == Qt.LeftButton) && (mouse.modifiers & Qt.ShiftModifier)) {
doSomething();
} else {
doSomethingElse();
}
}
}
But the MouseEvent isn't available in QtQuick 2.9.
What's the alternative ?
A Button's clicked signal does not provide a MouseEvent (no matter what version of Qt you're using). The clicked signal could be generated via the keyboard too, so it wouldn't make sense to provide a MouseEvent. You will need to create a MouseArea and handle the events yourself to do what you want.
Button {
id: button
MouseArea {
id: mouse
anchors.fill: parent
onPressed: {
if ((mouse.button == Qt.LeftButton) && (mouse.modifiers & Qt.ShiftModifier)) {
doSomething();
} else {
doSomethingElse();
}
}
}
}

Vue: Emitter isn't working in child when using button click

My emit call is not getting called on my button click. I tried to run a debugger and step through it and it gets triggered but looks like it steps right through and skips it. I'm not sure what the issue is or why it's skipping.
Parent
<step-review #emitgetappdata="getAppData"></step-review>
getAppData: function(data=null) {
debugger
}
Step Review
<button #click="this.clickedButton()">Test</button>
clickedButton: function() {
console.log("reached here");
let data = {
text: "Foo",
}
this.$emit('emitgetappdata', data);
}
You can't use this on view
<button #click="clickedButton()">Test</button>
clickedButton() {
console.log("reached here");
let data = {
text: "Foo",
}
this.$emit('emitgetappdata', data);
}
and your component code to this a bit more clean.
<step-review #emitgetappdata="getAppData"></step-review>
getAppData(data=null) {
debugger
}
Edited after reading some docs :
https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

How do I create an image button in BlackBerry 10 Cascades?

I need to create custom UI elements like buttons and lists with image backgrounds in Cascades Qml, However there doesn't seem to be a way to set the background of controls such as Button.
I can't find any examples of this anywhere.
It seems like this could be possible by using a container and creating a custom control, but I don't see a way of getting that container to have an onClick event.
Custom control is actually very easy in BB10. Here's an example of what you are trying to do:
Container {
property alias text: label.text
property alias image: imagev.imageSource
ImageView {
id: imagev
imageSource: "asset:///images/Button1.png"
}
Label {
id: label
text: "demo"
}
gestureHandlers: [
TapHandler {
onTapped: {
//do tapped code
}
},
LongPressHandler {
onLongPressed: {
//do long press code
}
}
]
}
Save it as "CustomButton.qml" and then in your main QML file you can access it like so:
Page {
CustomButton {
text: "my text"
image: "images/myimage.png"
}
}
You can do this by using MouseArea element:
Item {
Image {
anchors.fill: parent
source: "yourimg.png"
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log("do your action here!")
}
}
}
If you put this code in a separate QML file e.g. CustomButton.qml. You can use it in the other QML file like a custom button element:
CustomButton {
}
You can read more about this here.