Qt QML Focus an Item (TextField) when showing a StackView Page - qt

I want to enable TextField focus when QML file is loaded. But, it is not working. After loading TestUi.qml file I put some button and its onClick() method I did _recipientView.focus = true_, it works fine. The problem is that default focus is not enabled when view is loaded first time.
TestUi.qml
import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.0
Page {
function init() {
recipientView.focus = true;
}
TextField {
id: recipientView
Layout.fillWidth: true
font.pixelSize: 18
inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhEmailCharactersOnly
focus: true
placeholderText: "Email"
}
}
main.qml
onComposeBtnClicked: {
rootStackView.push(test)
test.init()
}
TestUi {
id: test
visible: false
}

Edit
The Page component already acts as a FocusScope, so only forcing the active focus is necessary. Thanks for the comments.
StackView {
id: stackView
initialItem: firstPage
// Ensures the focus changes to your page whenever
// you show a different page
onCurrentItemChanged: {
currentItem.forceActiveFocus()
}
}
Page {
id: firstPage
visible: false
TextField {
// Explicitly set the focus where needed
focus: true
}
}
Original answer
This is simply because you are pushing TestUi into your stack with rootStackView.push(test). When you do so, the focus is reset. This is typically handled with a QFocusScope, which role is to remember the focused Item, and give the focus back to it when the QFocusScope regains focus.
In your case, adding a QFocusScope to your base page would enable restoring the focus correctly when the page is shown:
StackView {
id: stackView
initialItem: firstPage
onCurrentItemChanged: {
currentItem.forceActiveFocus()
}
}
Page {
id: firstPage
visible: false
onFocusChanged: {
scope.focus = true
}
FocusScope {
id: scope
TextField {
focus: true
// ...
}
}
}
You can then use your page handler onVisibleChanged if you want to reset to focus when the user comes back to it (after a pop for instance), instead of memorizing it where the focus is. But in that case the FocusScope might be overkill.
For information, you can also use the StackView property initialItem in order to set the first page.
It is also kind of unrelated, but prefer importing the most recent version of the QtQuick components available. QtQuick version will be 2.12 for Qt 5.12. A bit less trivial for QtQtcuik.Controls version, but they are getting in line with that versioning scheme.

Related

How to open new page from page which is open from stackview in Qt

I have StackView in main.qml.I pushed menu.qml file from main.qml using stackview. I'm trying to access stackview in menu.qml file to open new item. Is there a way with which we can push component/items with properties using stackview? My components are basically.qml files for different views
ApplicationWindow {
id: settingsWindow
StackView {
id: stack
initialItem: view
Component {
id: view
MouseArea {
onClicked: stack.push(view)
}
}
}
Button{
id: button1
onClicked: {
stack.pop(StackView.Immediate)
stack.push (Qt.resolvedUrl("menu.qml"))
}
}
}
menu.qml
Item {
Button{
id: button1
onclicked : { stack.push (Qt.resolvedUrl("new.qml")) }
}
}
Assuming you mean you want to access the StackView object from withing pages you pushed on it.
StackView has an attached property, which lets you obtain a reference to the view that owns the page.
Long story short, in Menu.qml you can do:
Item {
id: root
Button {
id: button1
onClicked: { root.StackView.view.push(Qt.resolvedUrl("new.qml")) }
}
}
https://doc.qt.io/qt-5/qml-qtquick-controls2-stackview.html#view-attached-prop
Finally ended up creating each page in StackView as a component property and then pushing each of them using a signal. Added the signal to every page and connected it to main page where stackview existed . This answer helped
https://stackoverflow.com/a/45354861/11288640

QT QML Accessing Attached Property From Another QML Object

main.qml:
import QtQuick 2.11
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: window
x: 200
y: 200
visible: true
Component {
id: firstViewComponent
FirstView {
id: firstView
}
}
StackView {
id: stackView
anchors.fill: parent
Component.onCompleted: push(firstViewComponent)
}
Timer {
interval: 1000
running: true
onTriggered: stackView.pop()
}
}
FirstView.qml:
Rectangle {
id: view
StackView.onDeactivating: console.log('view: view is deactivating')
ListModel {
id: aModel
ListElement {
name: 'Element 0'
}
ListElement {
name: 'Element 1'
}
}
ListView {
id: listView
model: aModel
delegate: Rectangle {
id: listViewDelegate
Connections {
target: view.StackView // <---- DOESN'T WORK
onDeactivating: console.log('delegate ' + index + ': needs to do some housekeeping now')
}
}
}
}
I have a view that is instantiated by a StackView in main.qml. The StackView attaches a signal StackView.onDeactivating to the view. Is there any way to attach to the signal from an object other than the one the signal is attached to? I need to do some cleanup in listViewDelegate when the view is popped.
I could have view emit its own signal, and have the delegate respond to that signal. But what I'm wondering is if there is a way to connect to the attached signal: StackView.onDeactivating from a different object (listViewDelegate).
Yes and no. The Qt documentation partially addresses this: A Note About Accessing Attached Properties and Signal Handlers
It is not possible to directly access the property from a child. Attached properties need to be explicitly read by the class providing them. For your example, the parent class (StackView) simply searches for all attached properties it does provide in the child item (FirstView) as soon as it gets added, and handles all found properties/signals etc. by connecting them internally to whatever logic provides them.
However, nothing prevents you from gettings the attached property from the parent item, as long as you refer to it by id:
sampleProp: view.StackView.someProperty
The thing is: This indirect access only works this way for properties and nor for signals, as you can't simply refer to the attached object via view.StackView - so sadly, you are stuck with forwarding the signal to the child elements indirectly by creating a second signal in the root item and emitting it when the attached signal gets emitted.

QML ListView - change all but current item

I'm following this tutorial (without the flickable content in each entry) for Qt 4.8 while using Qt 5.7 with QtQuick 2.0. The way the ListView there works is as follows:
User clicks on item in list
Alternative (detailed) view of item is displayed
User has to click on Close button in detailed view to reset the state of entry to its default compact view.
This leads to a clutter where at some point if the user clicks on all items in which case all will be shown in their full view. Having the user click on the Close button every time he/she opens a detailed view also is (omho) not that handy.
I've altered the entry to close when the user clicks on the view. I'm also trying to prevent this clutter and achieve a more (omho) flowing behaviour:
User clicks on item in list
Alternative view of item is displayed
User clicks on detailed view to reset state of entry to its default compact view OR
User clicks on another entry and all currently in detailed view entries are reset to their compact view
Currently I'm looping through my ListView's contentItem.children[loop_index] and setting the state to "" ("Details" = show detailed view | "" = show compact view). Due to the way ListView works (loading/unloading delegates on demand) this is quite unreliable and I often get an undefined reference when I try to access the state of other delegates. The following MouseArea, which I'm using to do all that, is part of every delegate:
// state is a QML `State` that is bound to the delegate (see below for the details on it)
MouseArea {
anchors.fill: background
onClicked: {
// Iterate through all other entries and close them
for (var entry = 0; entry < listView.count; ++entry) {
if(listView.contentItem.children[entry] !== gestureEntry) {
console.log("Hide other element");
listView.contentItem.children[entry].state = ""; // IT FAILS HERE (SOMETIMES)
}
}
// Change view of current entry
if(gestureEntry.state === "Details") {
gestureEntry.state = "";
console.log("Hiding details")
}
else {
gestureEntry.state = "Details";
console.log("Showing details");
}
}
}
with state being a delegate's state:
states: State {
name: "Details"
PropertyChanges { target: background; color: "white" }
PropertyChanges { target: gestureImage; width: 130; height: 130 } // Make picture bigger
PropertyChanges { target: gestureEntry; detailsOpacity: 1; x: 0; y: 0 } // Make details visible
PropertyChanges { target: gestureEntry; height: listView.height } // Fill the entire list area with the detailed view
}
I'm thinking that the state information can be stored inside the ListModel itself making it possible to iterate through the model's contents (which are always there unlike the contents of the delegates) however I don't know how to automatically update my list (and the currently visible/invisible delegates) when an entry changes in the model. From what I've found so far it seems not possible to do that since the ListView doesn't actively monitor its ListModel.
Is this indeed the case? If yes, then is it possible to go around this problem in a different way?
Why don't you use the currentIndex property of your ListView?
Just modify your delegate like this:
Item {
id: gestureEntry
...
state: ListView.isCurrentItem?"Details":""
...
MouseArea {
anchors.fill: background
onClicked: {
if(listView.currentIndex == index)
listView.currentIndex = -1
else
listView.currentIndex = index
}
}
}
EDIT:
The only issue with the solution above is that - upon loading - an entry in the ListView is preselected which automatically triggers the detailed view of that entry. In order to avoid that the following needs to be added to listView:
Component.onCompleted: {
listView.currentIndex = -1;
}
This ensures that no entry will be preselected.
guess it is an issue because you stored a state in your delegate. You should not do this as described in the delegate-property (Link), because the delegates get reused when they get out of view.
At least you should use a when: ListView.isCurrentItem in the State and depend on a value of the ListView. So only your current delegate is maximized. Then in the MouseArea only set `ListView.view.currentIndex = index'. Don't change the state manually in the function!
I ran in the same trouble, removed the states completely and just used the attached property ListView.isCurrentItem. But binding the state to a Value from the ListView should also work, because it's not stored in the delegate.
Minimal example:
import QtQuick 2.0
Item {
width: 800
height: 600
ListView {
id: view
anchors.fill: parent
model: 3
spacing: 5
currentIndex: -1
delegate: Rectangle {
id: delegate
color: ListView.isCurrentItem ? "lightblue" : "green" // directly change properties depending on isCurrentItem
height: 100
width: 100
states: State {
name: "maximized"
when: delegate.ListView.isCurrentItem // bind to isCurrentItem to set the state
PropertyChanges {
target: delegate
height: 200
}
}
MouseArea {
anchors.fill: parent
//onClicked: delegate.ListView.view.currentIndex = model.index // if only selection is wanted
onClicked: {
//console.debug("click");
if (delegate.ListView.isCurrentItem)
{
delegate.ListView.view.currentIndex = -1;
}
else
{
delegate.ListView.view.currentIndex = model.index;
}
}
}
Text {
anchors.centerIn: parent
text: index
}
}
Text {
text: "CurrentIndex: " + parent.currentIndex
}
}
}

Return value from QML Window to parent

I use QML to build GUI in my app + simple logics.
At some step I open dialog and after closing it I want to get back a result value.
This is sample code:
Button {
id: myButton
onClicked: {
var component = Qt.createComponent("Dialog.qml");
if (component.status === Component.Ready) {
var dialog = component.createObject(parent);
dialog.show();
dialog.onClosing: {} // that not works
}
}
}
Dialog.qml:
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
Window {
id: dialogWindow
width: 800
height: 600
flags: Qt.Dialog
Button {
id: closeButton
onClicked: {
dialogWindow.close();
}
}
}
But I have no idea how can I get some return value after the dialog was closed.
My advice would be to not bother with Window and use Qt Quick Dialogs.
If you want to use Window, you have to define your own return value in the form of some Yes/No buttons in the window, for example. When one of these is clicked, set a yes property to true/false. Then, within your Button:
Connections {
target: dialogWindow
onVisibleChanged: // some action depending on value of "yes" property
}
Note that I used onVisibleChanged instead of onClosing, as the latter is only emitted upon the user closing the window:
This signal is emitted when the user tries to close the window.
If we follow the documentation for the CloseEvent argument, we see that it's explained in slightly more detail:
Notification that a window is about to be closed by the windowing system (e.g. the user clicked the titlebar close button).

Reject external files dragged in a DropArea without breaking the DropArea

In my application I'm displaying a list of audio files and the user can drag an external file to add it to the list. I want to be able to refuse the drag if no file in the list is supported by my application.
The issue is that when I call drag.accepted = false; in onEntered of my DropArea then it becomes completely unresponsive to any other event.
Here is some sample code showing the issue. If you drag an MP3 in the window you see that it works. Then if you drag any other file it won't work, as expected. But then dragging an MP3 file back will not work either.
import QtQuick 2.1
import QtQuick.Window 2.0
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
DropArea {
anchors.fill: parent
onEntered: {
console.log("[Droparea] entered");
// Ensure at least one file is supported before accepted the drag
var validFile = false;
for(var i = 0; i < drag.urls.length; i++) {
if(validateFileExtension(drag.urls[i])) {
validFile = true;
break;
}
}
if(!validFile) {
console.log("No valid files, refusing drag event");
drag.accepted = false;
return false;
}
}
onExited: {
console.log("[Droparea] entered");
}
onDropped: {
console.log("[Droparea] dropped");
}
// Only MP3s
function validateFileExtension(filePath) {
var extension = filePath.split('.').pop();
var valid = false;
if(extension == "mp3") {
valid = true;
}
return valid;
}
}
Text {
id: textDrop
anchors.centerIn: parent
text: "Please drag element"
}
}
Is there a bug in the DropArea or did I misunderstood something? I know I can filter the files in the onDropped but then you loose the visual feedback you get on OSX when dragging file on an area that does not accept them.
It has been a known bug for a long time. A patch has been submitted and after been stalled for several months is now merged into 5.6 branch.
Anyone who wants to use this functionality MUST upgrade to Qt 5.6 or MANULLY integrate the available patch into his/her Qt version.
QQuickDropAreaPrivate, contained in DropArea, updates the containsDrag flag to true when a dragEnterEvent occurs, emitting the entered signal. It updates containsDrag to false when adragLeaveEvent occurs, emitting an exited signal. However, when the drag event is not accepted dragLeaveEvent is never called, leaving the private object in a incosistent state. Each subsequent dragEnterEvent is discarded since containsDrag is still true, i.e. the previous drag event is still considered active and the entered is no more emitted.
Since the issue is related to an interaction between private APIs and usage of the public APIs, the problem does not affect filtering using keys. Unfortunately, this approach does not seem to fit for the presented use case.
A quite partial workaround is to use a MouseArea along with the DropArea. The latter disables itself when a rejection occurs while the former enables back the DropArea for the next drop. This workaround covers the common case in which a wrong item is dropped inside the DropArea, which is the most common and intuitive for an end user. Releasing the wrong item outside the DropArea invalidate the mechanism (until the next drop).
Here's the code:
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
MouseArea {
anchors.fill: parent
hoverEnabled: true
enabled: !drop.enabled
onContainsMouseChanged: drop.enabled = true
}
DropArea {
id: drop
anchors.fill: parent
onEntered: {
console.log("[Droparea] entered");
// Ensure at least one file is supported before accepted the drag
for(var i = 0; i < drag.urls.length; i++)
if(validateFileExtension(drag.urls[i]))
return
console.log("No valid files, refusing drag event")
drag.accept()
drop.enabled = false
}
onExited: console.log("[Droparea] exited")
onDropped: console.log("[Droparea] dropped")
// Only MP3s
function validateFileExtension(filePath) {
return filePath.split('.').pop() == "mp3"
}
}
Text {
id: textDrop
anchors.centerIn: parent
text: "Please drag element"
}
}
you never put accepteed = true
just add drag.accepted = true after you set the valid as valid
for(var i = 0; i < drag.urls.length; i++) {
if(validateFileExtension(drag.urls[i])) {
validFile = true;
drag.accepted = true;
break;
}
}

Resources