import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
ApplicationWindow {
flags: Qt.FramelessWindowHint
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "black"
opacity: 0.8
Flickable {
anchors.fill: parent
contentWidth: html.paintedWidth
contentHeight: html.paintedHeight
boundsBehavior: Flickable.StopAtBounds
TextEdit {
id: html
objectName: "html"
anchors.fill: parent
textFormat: TextEdit.RichText
focus: true
Keys.onEscapePressed: Qt.quit()
font.family: "Droid Sans Mono"
font.pointSize: 11
selectByMouse: true
readOnly: true
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("clicked")
mouse.accepted = false
}
}
}
}
}
I'm unable to get "clicked" printed... it seems like propagateComposedEvents and mouse.accepted are just not working as expected.
I'm using Qt 5.3 Beta.
contentWidth/Height is wrong,
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
ApplicationWindow {
flags: Qt.FramelessWindowHint
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
//color: "black"
opacity: 0.8
visible: true
Flickable {
anchors.fill: parent
//contentWidth: html.paintedWidth
//contentHeight: html.paintedHeight
boundsBehavior: Flickable.StopAtBounds
TextEdit {
id: html
objectName: "html"
anchors.fill: parent
textFormat: TextEdit.RichText
focus: true
Keys.onEscapePressed: Qt.quit()
font.family: "Droid Sans Mono"
font.pointSize: 11
selectByMouse: true
readOnly: true
text: "hello world"
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("clicked")
mouse.accepted = false
}
}
}
}
}
Related
I have a simple question - is there a way I can make my rowLayout change its height evenly with the rest of columnLayout items? Or what exactly does it prevent from adjusting its height along with the rectangles?
A simple piece of code:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout {
anchors.fill: parent
anchors.margins: 30
RowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
Rectangle {
id: rec1
width: 30; height: 30
Layout.alignment: Qt.AlignVCenter
color: "darkslateblue"
}
Label {
text: qsTr("Heading 1")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
}
}
Rectangle {
id: rec2
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
Rectangle {
id: rec3
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
}
}
Right now I'm getting something like this:
One possible option is to use an Item as a RowLayout container:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout {
anchors.fill: parent
anchors.margins: 30
Item{
Layout.fillWidth: true
Layout.fillHeight: true
RowLayout {
Layout.alignment: Qt.AlignHCenter
anchors.fill: parent
Rectangle {
id: rec1
width: 30; height: 30
Layout.alignment: Qt.AlignVCenter
color: "darkslateblue"
}
Label {
text: qsTr("Heading 1")
font.pixelSize: 25
verticalAlignment: Text.AlignVCenter
}
}
}
Rectangle {
id: rec2
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
Rectangle {
id: rec3
Layout.fillWidth: true
Layout.fillHeight: true
color: "bisque"
}
}
}
How can i make the buttons wrap when a dialog window is resized to be narrow by the user? Currently they are just cutoff.
QML
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Frame {
width: parent.width
height: parent.height
ColumnLayout {
width: implicitWidth
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
Layout.alignment: Qt.AlignTop
// Config
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "Config"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\config.txt)")
Layout.fillWidth: true
}
RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignRight
Button {
text: qsTr("Edit")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Browse")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
// File
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "File"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\file.txt)")
Layout.fillWidth: true
}
RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignRight
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
}
}
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Page1 {
anchors.centerIn: parent
}
}
You have to use Flow instead of RowLayout:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
Frame {
width: parent.width
height: parent.height
ColumnLayout {
width: implicitWidth
spacing: 20
anchors.left: parent.left
anchors.right: parent.right
Layout.alignment: Qt.AlignTop
// Config
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "Config"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\config.txt)")
Layout.fillWidth: true
}
Flow {
Layout.fillWidth: true
layoutDirection: Qt.RightToLeft
Button {
text: qsTr("Edit")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Browse")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
// File
ColumnLayout {
Layout.fillWidth: true
spacing: 2
Label {
text: "File"
font.bold: true
}
TextField {
readOnly: true
placeholderText: qsTr("Path to config.json file (C:\\desktop\\file.txt)")
Layout.fillWidth: true
}
Flow {
Layout.fillWidth: true
layoutDirection: Qt.RightToLeft
Button {
text: qsTr("Clear")
implicitWidth: implicitHeight
}
Button {
text: qsTr("Find")
implicitWidth: implicitHeight
}
}
}
}
}
I've got a draggable object that is created by a Javascript, which is working fine. But when I create a PieMenu inside it, the object isn't created/visible in the Javascript context:
import QtQuick 2.8
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQml.Models 2.2
Rectangle {
id: rev
width: 100
height: 80
color: "transparent"
antialiasing: false
Drag.active: dragArea.drag.active
MouseArea {
id: dragArea
width: parent.width
height: parent.height + 10 // easier to get
anchors.centerIn: parent
drag.target: parent
drag.axis: Drag.XAndYAxis
onClicked: pieMenu.popup(mouseX, mouseY), console.log("clicked")
}
PieMenu {
id: pieMenu
MenuItem {
text: "Add vertical bar"
onTriggered: print("Action 2")
}
}
Gauge {
id: revgauge
anchors.fill: parent
anchors.margins: 10
orientation : Qt.Horizontal
minorTickmarkCount: 4
tickmarkStepSize : 5000
minimumValue: 0
maximumValue: 10000
Behavior on value {
NumberAnimation {
duration: 5
}
}
Text {
font.pixelSize: (parent.height / 3)
anchors.top : parent.top
font.bold: true
font.family: "Eurostile"
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
}
style: GaugeStyle {
valueBar: Rectangle {
implicitWidth: rev.height /3
color: Qt.rgba(revgauge.value / revgauge.maximumValue, 0, 1 - revgauge.value / revgauge.maximumValue, 1)
}
}
}
}
Can Mousearea handle dragging and a PieMenu at once? If not how can it be solved?
Consider QML PieMenu boundingItem. It addresses an exact issue with MouseArea you presented.
I have following QML Tumbler:
import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1
import "../items"
Rectangle
{
id: ueNumericTumbler
color: "grey"
ColumnLayout
{
id: ueMainLayout
anchors.rightMargin: parent.radius
anchors.leftMargin: parent.radius
anchors.bottomMargin: parent.radius
anchors.topMargin: parent.radius
anchors.centerIn: parent
antialiasing: true
spacing: 4
anchors.fill: parent
layoutDirection: Qt.LeftToRight
Tumbler
{
id: ueLoginKeypadTumbler
antialiasing: true
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: false
Layout.minimumWidth: parent.width
Layout.minimumHeight: parent.height*70/100
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height*70/100
Layout.maximumWidth: parent.width
Layout.maximumHeight: parent.height*70/100
activeFocusOnTab: false
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit1000
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit100
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit10
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
UeNumericTumblerColumn
{
id: ueTumblerColumnDigit1
ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
} // UeNumericTumblerColumn
} // Tumbler
} // ColumnLayout
} // Rectangle
Now, as you can see in screenshot, Tumbler Columns width is greater than parent's, ColumnLayout geometry, which is wrong. What did I miss? I've taken into acount ueNumericTumbler's ColumnLayout but the problem persits, I do not know what to do! Should I use anchors?
Or is it maybe problem in ueNumericTumbler's parent contaniner rectangle/window, named ueKeypad:
import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1
import "../delegates"
import "../items"
Rectangle
{
id: ueKeypad
width: 512
height: 384
color: "grey"
radius: 8
border.color: "steelblue"
border.width: 4
ColumnLayout
{
id: ueMainLayout
anchors.rightMargin: parent.radius
anchors.leftMargin: parent.radius
anchors.bottomMargin: parent.radius
anchors.topMargin: parent.radius
anchors.centerIn: parent
antialiasing: true
spacing: 4
anchors.fill: parent
layoutDirection: Qt.LeftToRight
UeNumericTumbler
{
id: ueLoginKeypadTumbler
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: false
Layout.minimumWidth: parent.width
Layout.minimumHeight: parent.height*70/100
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height*70/100
Layout.maximumWidth: parent.width
Layout.maximumHeight: parent.height*70/100
} // UeNumericTumbler
} // ColumnLayout
states:
[
State
{
name: "ueStateLoginOk"
PropertyChanges
{
target: ueKeypad
border.color: "#00ff00"
}
},
State
{
name: "ueStateLoginOkFailed"
PropertyChanges
{
target: ueKeypad
border.color: "#ff0000"
}
}
]
}
You're using the Layout attached property on the wrong object; Layout.preferredWidth was only set on the Tumbler, not the TumblerColumn. You can debug this by adding a print() line before the return statement of the expression:
TumblerColumn
{
model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
width: {
print(Layout.preferredWidth)
Layout.preferredWidth/4
}
}
This prints -1, which is the default value. You can set the width to this instead:
ueLoginKeypadTumbler.Layout.preferredWidth / 4
You'll need to account for the width of the separators though... ugh. This is not very nice. Please open a bug report that mentions that this use case should be easier.
I have a simple login form written in QML with a custom component, MediumText, and two TextFields. Unfortunately, I'm not able to properly align the elements, as shown by the following picture:
I want the labels to the left (MediumText type), as well as the TextField instances on the right, to take up the same amount of space so that they are correctly aligned. Can you suggest me an approach? Here is my current code.
MediumText.qml:
import QtQuick 2.3
Text {
clip: true
font.pixelSize: 20
font.family: "Liberation Mono"
smooth: true
font.bold: true
wrapMode: Text.WordWrap
opacity: 1
}
Login.qml:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
Rectangle {
id:rootRect
anchors.centerIn: parent
Layout.preferredWidth: 480
Layout.preferredHeight: 640
ColumnLayout {
anchors.centerIn: parent
Layout.fillWidth: true
spacing: 16
Row{
Image {
id: logoimage
height: 135
fillMode: Image.PreserveAspectFit
source: "images/logo.png"
}
}
RowLayout {
anchors.left: parent.left; anchors.right: parent.right
spacing: 4
MediumText { text: "Username: ";Layout.fillWidth:true; }
TextField { id:usernameText; placeholderText: "username"; Layout.fillWidth: true;}
}
RowLayout {
anchors.left: parent.left; anchors.right: parent.right
spacing: 4
MediumText { text: "Password:";Layout.fillWidth:true }
TextField { id:passwordText; placeholderText: "password"; echoMode: TextInput.Password; Layout.fillWidth: true;}
}
RowLayout {
spacing: 16
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "Login"; onClicked: {
console.log(mojoLoginLoader.visible);
mojoLoginLoader.visible=true;
passwordText.enabled=false;
usernameText.enabled=false;
//auth_controller.sayHello();
mojoRootViewHolder.source="Welcome.qml"
}
}
Button { text: "Exit"; onClicked: auth_controller.sayNay() }
}
}
CenteredLoader{visible:false; id:mojoLoginLoader}
}
One fix that works is setting the preferredWidth property of the TextField:
MediumText { text: "Username: ";Layout.fillWidth:true;Layout.preferredWidth: parent.width/2}
You can use a GridLayout instead of building a grid by means of ColumnLayout and RowLayout.
By using the GridLayout, what you want is already guaranteed by the component.
Here is a full example from which you can start:
import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Window {
visible: true
width: 500
height: 500
title: "Grid example"
ColumnLayout {
anchors.centerIn: parent
Layout.fillWidth: true
spacing: 16
Row{
Image {
id: logoimage
height: 135
fillMode: Image.PreserveAspectFit
source: "images/logo.png"
}
}
GridLayout {
anchors.centerIn: parent
Layout.fillWidth: true
columnSpacing: 16
rowSpacing: 4
columns: 2
MediumText { text: "Username: "; Layout.fillWidth:true; }
TextField { id:usernameText; placeholderText: "username"; Layout.fillWidth: true;}
MediumText { text: "Password:";Layout.fillWidth:true }
TextField { id:passwordText; placeholderText: "password"; echoMode: TextInput.Password; Layout.fillWidth: true;}
}
RowLayout {
spacing: 16
anchors.horizontalCenter: parent.horizontalCenter
Button { text: "Login"; onClicked: {
console.log(mojoLoginLoader.visible);
mojoLoginLoader.visible=true;
passwordText.enabled=false;
usernameText.enabled=false;
//auth_controller.sayHello();
mojoRootViewHolder.source="Welcome.qml"
}
}
Button { text: "Exit"; onClicked: auth_controller.sayNay() }
}
}
}