I have a problem using the style property to change the text color of a scrollable TextArea.
I also added the included modules from the .pro file:
QT += qml quick core quickcontrols2
This is what my .qml file looks like:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Material 2.0
import QtGraphicalEffects 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Test")
Page {
width: parent.width
height: parent.height
background: Rectangle {
color: "#000000"
width: parent.width
height: parent.height
}
Flickable {
id: flickable
anchors.bottom: parent.bottom
width: parent.width-50
flickableDirection: Flickable.VerticalFlick
height: 200
TextArea.flickable: TextArea {
id: pane1
text: "This is some text"
font.bold: false
font.pointSize: 10
wrapMode: Text.WordWrap
clip: true
style: TextAreaStyle {
textColor: "#4F4F4F"
}
background: Rectangle {
color: "#FFFFFF"
width: parent.width
height: parent.height
}
}
ScrollBar.vertical: ScrollBar { }
}
}
}
The Error message I get when running this example:
QQmlApplicationEngine failed to load component
qrc:/main.qml:38 Cannot assign to non-existent property "style"
I guess I am missing some dependency, but couldn't find anything in the documentation pointing me into the right direction.
Posting #BaCaRoZzo's comment as a community answer.
style property is not available in controls 2. Styling is inlined in the control. See here.
You can also remove import QtQuick.Controls.Styles 1.4 since it is necessary to styling controls 1.x, which you didn't import.
Related
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("»")
}
}
}
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
}
}
Whenever I apply a mask to an image to make it circular, the alignment of UI elements breaks. The image is offset to the right by some number of pixels.
// main.qml
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Example")
Page1Form {
}
}
// Page1Form.qml
import QtQuick 2.8
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
Item {
RowLayout {
id: playerRowLayout
Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true
RoundedImage {
id: displayImage
width: 50
height: 50
Layout.preferredWidth: 50
Layout.preferredHeight: 50
source: "Images/DisplayPicture.jpeg"
sourceSize.width: width
sourceSize.height: height
}
Text {
id: playerText
text: qsTr("Hameer Abbasi (Pro)")
font.family: "Source Sans Pro"
font.pixelSize: 12
}
}
}
// RoundedImage.qml
import QtQuick 2.8
import QtGraphicalEffects 1.0
Image {
id: img
property bool rounded: true
property bool adapt: true
layer.enabled: rounded
layer.effect: OpacityMask {
maskSource: Rectangle {
anchors.centerIn: parent
width: adapt ? img.width : Math.min(img.width, img.height)
height: adapt ? img.height : Math.min(img.width, img.height)
radius: Math.min(width, height)*0.5
}
}
}
When I change RoundedImage to Image, the misalignment disappears, like so:
Also, when I add anchors.fill: img or anchors.centerIn: img to the OpacityMask, I get the following result (as you can see, the misalignment has not disappeared but just moved):
The only thing that does seem to work is setting the anchors.right: displayImage.left on the textbox, but that somehow seems like a hack and I feel like I'm not doing something right somehow. Can someone help me figure out where the issue is and what the "proper" way to fix this would be?
I can't explain you why this thing is happening. To me it looks like a bug.
Seemingly there is an easy workaround: Don't have the Image directly inside the Layout. Change the RoundedImage.qml to this:
// RoundedImage.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0
Item {
id: img
property bool rounded: true
property bool adapt: true
property alias source: image.source
property alias sourceSize: image.sourceSize
Image {
id: image
width: img.width
height: img.height
layer.enabled: rounded
layer.effect: OpacityMask {
maskSource: Rectangle {
width: adapt ? img.width : Math.min(img.width, img.height)
height: adapt ? img.height : Math.min(img.width, img.height)
radius: Math.min(width, height)*0.5
}
}
}
}
and the strange behavior is gone.
In the example below the Button component doesn't work because Drawer dragMargin overlap it.
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
title: qsTr("Drawer example")
Drawer {
id: menu
dragMargin: 60
width: window.width * 0.85
height: window.height
background: Rectangle {
color: "blue"
}
}
Button {
id: log
text: "Click me!"
anchors.top: parent.top
anchors.left: parent.left
onClicked: {
console.log("Clicked!");
}
}
}
Is there a way to fix this issue? I tried to change z properties but it doesn't work.
I found this link on the Qt forum. It seems that the problem described is an open issue to be resolved by Qt.
I am trying to use topMargin in ColumnLayout. but i am facing some issues.
Could some one help me out of this.
Here is my code
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
ColumnLayout{
id: columlayout
Rectangle{
width: 100
height: 100
color: "red"
}
Rectangle{
Layout.topMargin: 50
width: 100
height: 100
color: "green"
}
Rectangle{
width: 100
height: 100
color: "blue"
}
}
}
}
Issue:
Cannot assign to non-existent property "topMargin"
The margin properties were introduced in QtQuick.Layouts 1.2, so you must import that version, not 1.1.