I am not able to click on the VirtualKeyboard if the TextField is in the dialog and Application Window is the base class.
Following is the code:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.VirtualKeyboard 2.2
ApplicationWindow {
id:appwindow
visible: true
width: 600
height: 500
title: qsTr("Test")
Button{
id:button
text:qsTr("Open")
onClicked:{
dialog.visible=true
dialog.open()
}
}
Dialog{
id:dialog
width:200
height:300
visible:false
TextField {
id: textfield
color: "#2B2C2E"
}
}
InputPanel {
id: inputPanel
z: 89
anchors.bottom:parent.bottom
anchors.left: parent.left
anchors.right: parent.right
visible: Qt.inputMethod.visible
}
}
There will be no issues if I change ApplicationWindow to Window, Is that a QT Bug in v5.9.1?
ApplicationWindow offers a nice extra layer overlay to which you may reparent everything that shall be above the rest of the content - just the right place for your VirtualKeyboard
InputPanel {
id: inputPanel
parent: ApplicationWindow.overlay // <-- This will do the trick
anchors.bottom:parent.bottom
anchors.left: parent.left
anchors.right: parent.right
visible: Qt.inputMethod.visible
}
Related
I'm trying to use a scrollbar inside a scrollview. The scrollbar shows up and I can interact with it (hover/pressed), but it doesn't move, and I can't understand why. I wrote my code by following the official documentation and online examples.
Here's the code:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Window {
width: 740
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")
Rectangle {
id: rectangle
color: "#40405f"
anchors.fill: parent
Button {
id: button
text: qsTr("Menu")
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 10
anchors.bottomMargin: 466
anchors.topMargin: 74
onClicked: animationMenu.running = true
}
ScrollView {
id: scrollView
width: 0
anchors.left: button.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 10
anchors.bottomMargin: 10
anchors.topMargin: 10
clip: true
Rectangle {
id: rectangle1
color: "#00000000"
border.color: "#00000000"
border.width: 0
anchors.fill: parent
PropertyAnimation {
id: animationMenu
target: scrollView
property: "width"
to: if(scrollView.width == 0) return 240; else return 0
duration: 800
easing.type: Easing.InOutQuint
}
Column {
id: columnMenu
width: 0
anchors.fill: parent
spacing: 10
Button {
id: button1
text: qsTr("Button")
}
Button {
id: button2
text: qsTr("Button")
}
Button {
id: button3
text: qsTr("Button")
}
Button {
id: button4
text: qsTr("Button")
}
}
}
ScrollBar {
id: vbar
hoverEnabled: true
orientation: Qt.Vertical
size: scrollView.height / rectangle1.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
wheelEnabled: true
pressed: true
active: true
}
}
}
}
Ok, so I edited the code to a smaller version so that it can be run.
Some advices:
Use anchors or Layouts. Do not use fixed values or some kind of treats, no matter if it works. The long term value of your code will be bad.
You should read carefully the (ScrollView documentatio). Also the Size section and the Touch and Mouse Interaction Section.
I am able to modify your example without the animation.
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.15
Window {
width: 740
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")
Rectangle {
id: rectangle
color: "#40405f"
anchors.fill: parent
RowLayout{
anchors.fill: parent
Button {
id: button
text: qsTr("Menu")
width: 100
height: 50
}
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout{
implicitHeight: 2000
implicitWidth: 2000
Column {
id: columnMenu
width: 0
anchors.fill: parent
spacing: 10
Repeater{
model: 50
delegate: Button {
text: qsTr("Button")
}
}
}
}
}
}
}
}
I'm trying to learn Qt and wrap my head around the UI forms. The doc states that I should be able to implement headers in the implementation file. However, I cannot do this (nor override any attributes assigned in the designer).
Here's my BasicWindowForm.ui.qml:
import QtQuick 2.4
import QtQuick.Controls 2.12
Item {
id: element
width: 400
height: 400
property alias quitButton: quitButton
Rectangle {
id: rectangle
x: 100
width: 200
height: 86
color: "#ffffff"
radius: 10
border.width: 3
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 25
}
Row {
id: row
y: 222
height: 100
layoutDirection: Qt.RightToLeft
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Button {
id: quitButton
text: qsTr("Quit")
}
}
}
/*##^##
Designer {
D{i:1;anchors_y:20}D{i:2;anchors_width:200;anchors_x:21}
}
##^##*/
Here's how it looks in the design mode:
Here's BasicWindow.qml:
import QtQuick 2.4
BasicWindowForm {
quitButton.text: "Lorem"
quitButton.onClicked: Qt.quit()
}
And main.qml:
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Play QtQuick")
BasicWindowForm {
anchors.fill: parent
id: winform
}
}
If I move the handler to the main.qml file, it works. But, as it is here, clicking on the button does nothing, and it still reads "quit".
What am I doing wrong?
Let's say I have a text field and a button. I'd like to set the button's width and height to the text field's rendered height but it's not working.
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
Window {
id: window
visible: true
width: 640
height: 200
color: "#f0eded"
title: qsTr("Hello World")
RowLayout {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
TextField {
id: txtPassword
text: qsTr("Text Field")
font.pointSize: 22
}
Button {
id: btnSubmit
width: txtPassword.height
height: txtPassword.height
text: qsTr("»")
}
}
}
It looks like the button is ignoring the binding to the text field's height. My theory is that since this attribute isn't explicitly set, QML doesn't know which width/height to assign to the button.
What would be the proper way to take on the text field's actual rendered height?
If you use layout you should not use width or height, in case you want to obtain the same height you must use implicitWidth or implicitHeight, if you want the item to occupy the height of the row then you must use Layout.fillHeight: true. In the same way for the width.
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
Window {
id: window
visible: true
width: 640
height: 200
color: "#f0eded"
title: qsTr("Hello World")
RowLayout {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
TextField {
id: txtPassword
text: qsTr("Text Field")
font.pointSize: 22
}
Button {
id: btnSubmit
implicitHeight: txtPassword.implicitHeight // or Layout.fillHeight: true
implicitWidth: implicitHeight
text: qsTr("»")
}
}
}
Or instead of using RowLayout you could use a Row:
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
Window {
id: window
visible: true
width: 640
height: 200
color: "#f0eded"
title: qsTr("Hello World")
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 5
TextField {
id: txtPassword
text: qsTr("Text Field")
font.pointSize: 22
}
Button {
id: btnSubmit
width: txtPassword.height
height: txtPassword.height
text: qsTr("»")
}
}
}
I'm trying to add padding/margins to my layout so my controls to appear so close to the border of the window. When i set the anchor margins it doesn't appear to actually affect anything.
This is the qml file displayed for the Settings Tab.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
Page {
id: control
title: qsTr("Settings")
objectName: "SettingsView"
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Switch {
text: qsTr("Theme")
checked: root.Material.theme === Material.Dark
Layout.fillWidth: true
LayoutMirroring.enabled: true
onClicked: {
root.Material.theme = checked ? Material.Dark : Material.Ligth
//Settings.currentTheme = root.Material.theme
}
}
}
}
This is the main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
ApplicationWindow {
id: root
visible: true
width: 300
height: 500
// Theme
Material.theme: Material.Dark
Material.accent: "#4096DD"
Material.primary: "#4096DD"
// Controls
header: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
//text: qsTr("Home")
icon.source: "qrc:/Images/home.svg"
}
TabButton {
//text: qsTr("Settings")
icon.source: "qrc:/Images/settings.svg"
}
}
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1 {
}
SettingsView {
}
}
}
If an Item is affected by a Layout then you must use Layout.margins if you want to set all the margins to the same value, but if you want to set a different margin in each direction you must use Layout.leftMargin, Layout.topMargin, Layout.rightMargin and Layout .bottomMargin, in your case:
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Switch {
Layout.leftMargin: 20
Layout.topMargin: 20
Layout.rightMargin: 20
// ...
Update:
Then set the margin at the anchor:
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.leftMargin: 20
anchors.topMargin: 20
anchors.rightMargin: 20
Switch {
text: qsTr("Theme")
// ...
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextField {
id:textField
width: 130
height: 50
}
Button {
anchors.right: parent.right
text: "lose Focus"
}
}
why textField don't lose Focus when Button Click?
How to achieve click an area outside the TextField to make the TextField lose focus?
The simplest way using your existing code is to force active focus on another item when the button is clicked:
Button {
anchors.right: parent.right
text: "lose Focus"
onClicked: forceActiveFocus()
}
To make the TextField lose focus when clicking the area outside of it, you can do something similar with MouseArea:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: forceActiveFocus()
}
TextField {
id: textField
width: 130
height: 50
}
}
This item needs to be below (i.e have a lower Z value than) other items in the scene. You can also make it a parent of the other items to achieve this:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: forceActiveFocus()
TextField {
id: textField
width: 130
height: 50
}
}
}
If you're using Qt Quick Controls 2, you can use the focusPolicy property on e.g. Pane:
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Pane {
anchors.fill: parent
focusPolicy: Qt.ClickFocus
}
TextField {
id: textField
width: 130
height: 50
}
}