QML Dialog positioning in ApplicationWindow - qt

I am finding it impossible to position a Dialog central to my ApplicationWindow in QT 5.12
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
id:mainApplicationWindow
visible: true
height: 500
width: 500
Item {
anchors.centerIn: parent
MainWindowMessageDialog{
id: messageDialog
}
}
Component.onCompleted: {
messageDialog.open()
}
}
With MainWindowMessageDialog.qml
import QtQuick 2.0
import QtQuick.Dialogs 1.2
Dialog {
title: "There seems to be a problem"
standardButtons: StandardButton.Ok
onAccepted: {
this.close()
}
}
Gives me the image below. I've tried adding a fixed z position but nothing seems to shift the Dialog downwards into the window. I've tried MainWindowMessageDialog on its own outside of an Item. Nothing seems to shift it? Am I missing something?

This turned out to be an issue of modality.
https://bugreports.qt.io/browse/QTBUG-82737?jql=text%20~%20%22MessageDialog%22
Adding
modality: Qt.ApplicationModal
Did the trick

Related

Custom QML Quick 2 Control with TabBar Inside

I am creating a custom QML Quick 2 TabBar control in Qt 5.15. If I make a simple control (CustomTabBarSimple.qml) as
import QtQuick 2.0
import QtQuick.Controls 2.15
TabBar {
}
Then I can use it with
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Window {
visible: true
width: 640; height: 480
color:"silver"
CustomTabBarSimple
{
id:bar
TabButton { text:"Button1" }
TabButton { text:"Button2" }
}
StackLayout {
anchors.top: bar.bottom
currentIndex: bar.currentIndex
Text {text: "First Stack"}
Text {text: "Second Stack"}
}
}
But if instead I wrap the TabBar in another control like this is no longer functions:
import QtQuick 2.0
import QtQuick.Controls 2.15
Rectangle
{
default property alias contents: bar.data
width: 300; height:50
color: "red"
TabBar {
id: bar
}
}
You can see I tried to use default property alias contents: bar.data to put the TabButton inside the custom control's TabBar but it appears that the TabBar no longer organizes the buttons properly and they no longer change the currentIndex when clicked---likely because the data field is overwriting critical elements.
Is it possible to inject the TabButton into the proper place using a default alias? Second, how would I be able to discover this for myself from the documentation?
There's two problems with your code:
You're trying to access currentIndex from the TabBar, but you're not exposing that property in your CustomTabBarSimple. You can fix that by adding this:
property alias currentIndex: bar.currentIndex
The list of TabButtons are not direct children of the TabBar. TabBar is derived from a Container, which has a list of child objects in contentData. You can read about that here.
default property alias contents: bar.contentData

QML Button exclusiveGroup property?

I'm unable to assign ExclusiveGroup to my checkable buttons.
ExclusiveGroup {
id: group
onCurrentChanged: {
if(current != null) {
console.info("button checked...no!")
current = null
//current.checked = false <--- also this
}
}
}
Column {
width: parent.width
spacing: 0
Button {
id: btnScan
flat: true
text: qsTr("But1")
width: parent.width
checkable: true
exclusiveGroup: group
}
Button {
id: btnWhiteList
flat: true
text: qsTr("But2")
width: parent.width
checkable: true
exclusiveGroup: group
}
}
The documentation states clearly that Button does have exclusiveGroup property http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#exclusiveGroup-prop. However, when I run the example, I get this error:
qrc:/main.qml:48 Cannot assign to non-existent property "exclusiveGroup"
Hovering mouse over "exclusiveGroup" makes a tooltip show up saying: "Invalid property name exclusiveGroup".
I have Qt 5.9.1 installed. Here's my import statements:
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
What am I doing wrong?
Thanks
The reason for your problem is this:
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
You have a Button in both, but they have a different API.
So at first you import the Button from QtQuick.Controls 1.4. Then you import the Button from QtQuick.Controls 2.0. As QML doesn't know, which one you want to use, it will take the one, you imported the last. If you want to be more specific, on which Button you want to use, you can use named imports
import QtQuick.Controls 1.4 as OldCtrl
import QtQuick.Controls 2.0 as NewCtrl
Then you can use Buttons from both versions as you like:
OldCtrl.Button { // from the QtQuick.Controls 1.4 }
NewCtrl.Button { // from the QtQuick.Controls 2.0 }
The documentation you quote is for QtQuick.Controls 1.x, and from there is the imported ExclusiveGroup. So you are trying to mix things from two libraries, that wont work together.
See ButtonGroup for a similar solution for QtQuick.Controls 2.x
For more on the differences and usecases of the both sets of controls read:
http://blog.qt.io/blog/2016/06/10/qt-quick-controls-2-0-a-new-beginning/
https://doc.qt.io/qt-5/qtquickcontrols2-differences.html

Behavior not working in inheritance sometimes

I found strange behavior when using Behavior. I want to animate the height of a Pane when I changed the Pane's height:
ModulePanelCard.qml:
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
Pane{
id: root
property bool isToggled: true
Material.elevation: 6
height: root.isToggled? 300: 100
Behavior on height {
NumberAnimation{duration: 300}
}
Button{
text: "click"
anchors{top: parent.top; right: parent.right; left: parent.left}
height: 40
onClicked: root.isToggled = !root.isToggled
}
}
main.qml:
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtQuick 2.6
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
ModulePanelCard{
id: strategyCard
width: 300
anchors{top:parent.top; right: parent.right; left: parent.left}
}
}
OK. The animation shows up and everything goes fine! However when I want to do some inheritance, i.e. inherit from ModulePanelCard, strange things happen:
StrategyCard.qml
import QtQuick 2.7
ModulePanelCard{
}
main.qml:
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtQuick 2.6
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
StrategyCard{
id: strategyCard
width: 300
anchors{top:parent.top; right: parent.right; left: parent.left}
}
}
If I put nothing into StrategyCard, everything is the same as previous. However, when I insert even one property or signal to StrategyCard, the animation of the height is just gone! The Behavior on the height won't work anymore!
StategyCard.qml:
import QtQuick 2.7
ModulePanelCard{
property string xxx: "hello"
}
However, if I put the Behavior statement into StrategyCard.qml, then the animation comes back!
New StrategyCard.qml:
import QtQuick 2.7
ModulePanelCard{
property string xxx: "hello"
Behavior on height {
NumberAnimation{duration: 300}
}
}
What happened? Anyone helps me? Thanks!
My development environment is: Windows 10 64bit, Qt 5.9.0 64bit for VS2015, Qt Creator 4.3.0

Qt QML MenuItem iconSource not show

I have a very simple setup just to exemplify the problem:
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
menuBar:MenuBar{
Menu{
id:mainmenu
title:"&File"
MenuItem{action: settingsAction}
}
}
Action {
id: settingsAction
text: "Settings"
iconName: "icon-settings"
iconSource: "qrc:///images/images/cog.png"
}
Button{
text:"Push"
iconSource: "qrc:///images/images/cog.png"
anchors.centerIn: parent
}
}
As you ca see, the button and the menu item has the same url as iconSource.
The button shows the image, but the menu item doesn't.
screencapture
Can you please tell me what i'm doing wrong here?
Thank you.
Indeed the problem of yours is a bug that is already know, but as QtQuick.Controls 1.x is not maintained any more, I don't know if it will ever be fixed (unless it is a bug in QtGuiApplication?)
As described in the bugreport, you may use QApplication instead of QGuiApplication in your main to have it shown.
What you are doing wrong?
Nothing. It's all QT's fault.

Material theme doesn't seem to work in QML

I have a simple QML with an ApplicationWindow, RowLayout and a bunch of Buttons inside. I have applied the Qt Quick Controls 2 Material theme as per the docs, but nothing changed. What's wrong?
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
Material.theme: Material.Dark
Material.accent: Material.Orange
id: window
visible: true
RowLayout {
anchors.horizontalCenter: window.horizontalCenter
anchors.bottomMargin: 32
Button {
text: "A"
}
Button {
text: "B"
}
Button {
text: "C"
}
}
}
Importing QtQuick.Controls.Material 2.0 and setting some Material specific properties do not apply the Material theme. They will be used if the theme is set using one of the methods described here:
http://doc.qt.io/qt-5/qtquickcontrols2-styles.html

Resources