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();
}
}
}
}
Related
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
}
I have TabView with two tabs. Each tab has Item element (which contains other stuff). I need to send signal from one tab and to catch (to handle) it in other tab.
If I try to send signal from one Tab (Item) to other - it doesn't work, without showing of any errors.
I found a way to send signal out from tab to TabView scope using Connections as written here (http://qt-project.org/doc/qt-5/qml-qtquick-loader.html).
declare in the first tab signal:
signal message()
Make a call in this tab (in onClicked handler? for example):
onClicked: {
nameOfItemInFirstTab.message()
}
In TabView scope I declared Connections:
Connections {
target: nameOfTheFirstTab.item
onMessage:
{
doSomething()
}
}
Using this way, it's possible to catch the signal out of the first tab. But how, now, to send signal to the second tab? Is there another way to do it?
You can do it like this:
import QtQuick 2.3
import QtQuick.Controls 1.2
Rectangle {
id: myRect
width: 100
height: 100
TabView {
anchors.fill: parent
Component.onCompleted: {
tab1.tab1Signal.connect(tab2.onTab1Signal)
tab2.tab2Signal.connect(tab1.onTab2Signal)
}
Tab {
id: tab1
title: "Tab 1"
signal tab1Signal
function onTab2Signal() {
print("Tab 1 received Tab 2's signal")
}
Item {
Button {
text: "Send signal"
anchors.centerIn: parent
onClicked: tab1Signal()
}
}
}
Tab {
id: tab2
title: "Tab 2"
signal tab2Signal
function onTab1Signal() {
print("Tab 2 received Tab 1's signal")
}
Item {
Button {
text: "Send signal"
anchors.centerIn: parent
onClicked: tab2Signal()
}
}
}
}
}
The functions can of course be named anything; I only prefixed them with "on" because that's the convention for signal handler names.
For more information on connecting signals in QML, see Connecting Signals to Methods and Signals.
Is it possible to make a onTab1Signal() in Item? I need to send some information (String/int) to elements of Item of tab2.
Yes, but it's a bit trickier. First of all, remember that Tab is a Loader, so your Item declared inside it may not always be valid. In fact, if you look at the implementation of Tab, you'll see that it sets its active property to false, effectively meaning that tab content is loaded only after that tab has been made current (a design called lazy loading). A naive implementation (i.e my first attempt :p) will encounter strange errors, so you must either:
Set active to true in each Tab, or
Add an intermediate item that accounts for this
The first solution is the easiest:
import QtQuick 2.3
import QtQuick.Controls 1.2
Rectangle {
id: myRect
width: 100
height: 100
TabView {
id: tabView
anchors.fill: parent
Component.onCompleted: {
tab1.tab1Signal.connect(tab2Item.onTab1Signal)
tab2.tab2Signal.connect(tab1Item.onTab2Signal)
}
// You can also use connections if you prefer:
// Connections {
// target: tab1
// onTab1Signal: tabView.tab2Item.onTab1Signal()
// }
// Connections {
// target: tab2
// onTab2Signal: tabView.tab1Item.onTab2Signal()
// }
property alias tab1Item: tab1.item
property alias tab2Item: tab2.item
Tab {
id: tab1
title: "Tab 1"
active: true
signal tab1Signal
Item {
id: tab1Item
function onTab2Signal() {
print("Tab 1 received Tab 2's signal")
}
Button {
text: "Send signal"
anchors.centerIn: parent
onClicked: tab1Signal()
}
}
}
Tab {
id: tab2
title: "Tab 2"
active: true
signal tab2Signal
Item {
function onTab1Signal() {
print("Tab 2 received Tab 1's signal")
}
Button {
text: "Send signal"
anchors.centerIn: parent
onClicked: tab2Signal()
}
}
}
}
}
The second solution is slightly more difficult, and comes with a caveat:
import QtQuick 2.3
import QtQuick.Controls 1.2
Rectangle {
id: myRect
width: 100
height: 100
TabView {
id: tabView
anchors.fill: parent
QtObject {
id: signalManager
signal tab1Signal
signal tab2Signal
}
property alias tab1Item: tab1.item
property alias tab2Item: tab2.item
Tab {
id: tab1
title: "Tab 1"
signal tab1Signal
onLoaded: {
tab1Signal.connect(signalManager.tab1Signal)
signalManager.tab2Signal.connect(tab1.item.onTab2Signal)
}
Item {
id: tab1Item
function onTab2Signal() {
print("Tab 1 received Tab 2's signal")
}
Button {
text: "Send signal"
anchors.centerIn: parent
onClicked: tab1Signal()
}
}
}
Tab {
id: tab2
title: "Tab 2"
signal tab2Signal
onLoaded: {
tab2Signal.connect(signalManager.tab2Signal)
signalManager.tab1Signal.connect(tab2.item.onTab1Signal)
}
Item {
function onTab1Signal() {
print("Tab 2 received Tab 1's signal")
}
Button {
text: "Send signal"
anchors.centerIn: parent
onClicked: tab2Signal()
}
}
}
}
}
Because active isn't set to true, the second tab isn't loaded at start up, so it won't receive the first tab's signals until it's made current (i.e by clicking on it). Perhaps that's acceptable for you, so I documented this solution as well.
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.
I need make small app on BB10 using QML, which record and play some voice. I have all needed permision (microphone and store file) and this code:
import bb.cascades 1.0
import bb.multimedia 1.0
Page {
property string dataUrl;
Container {
background: Color.create("#001100")
layout: StackLayout {
}
attachedObjects: [
MediaPlayer {
id: audioPlayer
sourceUrl: dataUrl + "/recording.mp4"
},
AudioRecorder {
id: recorder
outputUrl: dataUrl + "/recording.mp4"
}
]
Button {
id: btnRecord
text: "Record"
onClicked: {
recorder.record();
}
}
Button {
id: btnStop
text: "Stop Record"
onClicked: {
recorder.reset();
}
}
Button {
text: "Play Audio"
onClicked: {
audioPlayer.play()
}
}
Button {
text: "Stop Audio"
onClicked: {audioPlayer.stop()
}
}
}
}
After running I can see all buttons, but recording and/or playing is not work. I dont know what is wrong. I cant see any errors.
You're almost there. The problem is your sourceUrl is wrong. The best place to store your recording is in your app's data directory but your QML has no idea where that is.
To solve this you need to expose your app's data path to your QML using C++. You can do this using a property (more info here).
Add the following C++ code under where you create your AbstractPane object (in my case called root). This is normally done in applicationui.cpp.
root->setProperty("dataUrl", "file://" + QDir::currentPath() + "/data");
Now add the dataUrl property to your QML and use it for your sourceUrl:
Page {
property string dataUrl;
Container {
background: Color.create("#001100")
layout: StackLayout {
}
attachedObjects: [
MediaPlayer {
id: audioPlayer
sourceUrl: dataUrl + "/recording.m4a"
},
AudioRecorder {
id: recorder
outputUrl: dataUrl + "/recording.m4a"
}
]
....
}
Edit: Make sure you call audioPlayer.reset() after you've finished recording, this forces the player to reload the recorded audio. If you don't do this your audio playback may be truncated.
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.