I have a button with some text which is normally centered, but I want this text to align to the left. I have tried some things but they don't seem to work. Is this possible, if yes how can it be done?
import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.15
Window {
id: window
visible: true
height: 400
width: 400
Button {
id: button
text: "Align me to the left"
//horizontalAlignment: Text.AlignLeft
width: parent.width
height: 30
flat: true
onClicked: {
console.log("You clicked me")
}
}
}
To customize a Button, you can override the contentItem and/or background properties. If you want left-aligned text, just use the contentItem to create a Text object that looks the way you want it.
Button {
id: button
contentItem: Text {
text: button.text
font: button.font
horizontalAlignment : Text.AlignLeft
}
...
}
Button {
id: button
contentItem: Text {
text: "Align me to the left"
horizontalAlignment : Text.AlignLeft
}
width: parent.width
height: 30
flat: true
onClicked: {
console.log("You clicked me")
}
}
Related
I have created a custom tooltip style using this guide: https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#creating-a-custom-style
here is ToolTip.qml within my style:
import QtQuick.Templates 2.0 as T
import QtQuick
T.ToolTip {
id: ctrl
contentItem: Text{
color: "red"
text: ctrl.text
}
background: Rectangle {
color: "blue"
border.color: "yellow"
}
}
And here is how I use it:
import QtQuick.Controls 2.15
import QtQml 2.15
import QtQuick.Layouts 2.15
import QtQuick
ApplicationWindow {
id: mainWindow
visible: true
width: 800
height: 600
visibility: Window.Maximized
Button {
anchors.centerIn: parent
id: button
text: "Click me"
onClicked: {
console.log("Clicked")
}
ToolTip.visible: hovered
ToolTip.text: "hello world"
}
}
The text colour works, but the background doesn't.
Why does it not show the blue background rectangle?
I am using Qt6 with PySide6.
*edit:
I have tried using TextMetrics to give the background a width and height. Is this the idiomatic way to do it? It feels like I shouldn't need text metrics. This also leaves the Label uncentered in the background, which looks bad.
import QtQuick.Templates 2.0 as T
import QtQuick
import QtQuick.Controls
T.ToolTip {
id: ctrl
contentItem: Label {
color: "red"
text: ctrl.text
}
background: Rectangle {
id: bg
color: "yellow"
width: tmet.width + 5
height: tmet.height + 5
}
TextMetrics {
id: tmet
font: ctrl.font
text: ctrl.text
}
}
Everytime I need to create custom controls I'll look into the QtQuick Basic style. On my machine I can find it here Qt/6.4.0/gcc_64/qml/QtQuick/Controls/Basic/ToolTip.qml
Templates are non-visual implementations of controls' logic and
behavior.
You need to set a size on the ToolTip. Look how they are setting the implicitWidth and implicitHeight of the ToolTip.
import QtQuick
import QtQuick.Controls.impl
import QtQuick.Templates as T
T.ToolTip {
id: control
x: parent ? (parent.width - implicitWidth) / 2 : 0
y: -implicitHeight - 3
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
margins: 6
padding: 6
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
contentItem: Text {
text: control.text
font: control.font
wrapMode: Text.Wrap
color: control.palette.toolTipText
}
background: Rectangle {
border.color: control.palette.dark
color: control.palette.toolTipBase
}
}
To set the toolTip text color, it is not necessary to define a custom contentItem Label component. You can change the tooltip color by setting palette.toolTipText.
I can see your use case is to try to apply a custom ToolTip style so that all your components will inherit.
[EDIT: Change the direction of my answer to a custom Button instead of changing the default ToolTip style]
Alternatively, consider implementing custom components that have a custom ToolTip style. e.g. instead of Button, consider having MyButton. This way, we leave the default Button with the default style.
import QtQuick
import QtQuick.Controls
Page {
MyButton {
anchors.centerIn: parent
id: button
text: "Click me"
onClicked: {
console.log("Clicked")
}
ToolTip.visible: hovered
ToolTip.text: "hello world"
}
}
// MyButton.qml
import QtQuick
import QtQuick.Controls
Button {
ToolTip {
visible: parent.hovered
text: parent.ToolTip.text
palette.toolTipText: "red"
background: Rectangle {
color: "lightsteelblue"
border.color: "yellow"
}
}
}
You can Try it Online!
I want to show only half of a QML Drawer. The idea is to keep some important information in the visible part of the drawer and then let the user show the full drawer with more information.
From the documentation I thought that the
position property should be suitable for this:
Drawer {
modal: false
interactive: false
position: 0.5 // does not work
}
But setting the position does not have an effect. Is it possible to show only a part of the drawer?
As mentioned in my comment, you may want to turn your concept inside out, and have the Drawer inherit its size from its contents, and have the contents change, rather than hardcode its size and manipulate its position.
Here is a full example that shows the idea. The drawer contains a RowLayout which contains "info" and "extra info" - the extra info's visibility is toggled via interaction, and thus changes the size of the drawer, which always stays at the 100% open position, but changes width automatically.
import QtQuick 2.12
import QtQml 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
id: root
width: 640
height: 480
visible: true
Drawer {
id: drawer
height: root.height
// width automatically derived from RowLayout child's implicitWidth
onClosed: detailed.visible = false
RowLayout {
height: parent.height
spacing: 0
Rectangle {
id: detailed
color: "lightcyan"
Layout.fillHeight: true
Layout.preferredWidth: 200
visible: false // when not visible, this does not add to the RowLayout's implicitWidth
Text {
anchors {
centerIn: parent
}
text: "Extra Info\n Click to close"
}
MouseArea {
anchors {
fill: parent
}
onClicked: {
detailed.visible = false
}
}
}
Rectangle {
color: "lightpink"
Layout.fillHeight: true
Layout.preferredWidth: 200
Text {
anchors {
centerIn: parent
}
text: "Regular Info\n Click to open extra info"
}
MouseArea {
anchors {
fill: parent
}
onClicked: {
detailed.visible = true // toggling visibility automatically makes the Drawer wider
}
}
}
}
}
MouseArea {
id: mouse
anchors {
fill: parent
}
onClicked: {
drawer.open()
}
}
Text {
anchors {
centerIn: parent
}
text: "Click to open drawer"
}
}
I have the list view. When I scroll items the top element can stop any position and can be seen half height. enter image description here
But I need that after scrolling stop the top element can be seen full height.enter image description here
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.12
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
anchors.fill: parent
RowLayout {
id: buttonsRow
Button {
text: "Open dump file"
}
Button {
text: "Copy raw data to clipboard"
}
}
ListView {
id: listView
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
model: 100
clip: true
delegate: ItemDelegate {
text: modelData
Rectangle
{
width: parent.width - 5
height: parent.height - 5
color: "green"
}
}
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.vertical: ScrollBar {}
}
}
}
Use the snapMode property:
ListView {
snapMode: ListView.SnapToItem
// ...
}
Trying different code combinations and partially solving my problem I came across a behavior that I can not quite explain. So to the point, When I create a simple TextArea without Scrollview it looks like this:
RowLayout {
id: rowLayout
Rectangle{
height: 50
width: 295
TextArea {
id: textArea
text: (" message...")
wrapMode: Text.WrapAnywhere
anchors.fill: parent
}
}
Text area creates a default background. And now I want to do TextArea with ScrollView ALSO with the default TextArea background but it comes out something like that :
RowLayout {
id: rowLayout
Rectangle{
height: 50
width: 295
ScrollView {
id: scrollView1
anchors.fill: parent
TextArea {
id: textArea
text: (" message...")
wrapMode: Text.WrapAnywhere
}
}
}
The only chance to set the default TextArea background is set implicitHeight,implicitWidth but then after entering the text into a TextArea until the scrollbar appears, the background extends over the entire length by going behind the other components like this :
RowLayout {
id: rowLayout
Rectangle{
//color: "#00000000"
height: 50
width: 295
ScrollView {
id: scrollView1
anchors.fill: parent
TextArea {
id: textArea
text: (" message...")
wrapMode: Text.WrapAnywhere
implicitHeight: 50
implicitWidth: 295
}
}
}
So the only thing I want is a scrollable textarea but with this black default background and NOT my background which I can do with rectangle.
Can anyone take a look?
Thank you :)
I tried do my best. Check the example below, hope it will help =)
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 400
height: 400
RowLayout {
width: 295
height: 50
anchors.centerIn: parent
ScrollView {
Layout.fillHeight: true
Layout.fillWidth: true
background: Rectangle { color: "black" }
TextArea {
id: messageField
placeholderText: qsTr("message...")
color: "white"
wrapMode: TextArea.WrapAnywhere
}
}
}
}
Result:
I am using Qt qml to design a very simple user interface. The QML is as follows:
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
Rectangle {
width: 800; height: 600
ColumnLayout {
anchors.centerIn: parent
spacing: 25
TextField {
placeholderText: qsTr("User name")
width: 200
}
TextField {
placeholderText: qsTr("Password")
width: 200
echoMode: TextInput.Password
}
RowLayout {
Button {
text: "Log In"
}
Button {
text: "Cancel"
}
}
}
}
What I am trying to do is ensure that both the buttons take the same size and they occupy the same amount of space horizontally as the TextField components. Is it possible to achieve this using QML?
Just resize the Layout to the wanted width and use the attached property Layout.fillWidth: true to expand / reduce the size of the Item. Just updated your example to illustrate:
import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
Rectangle {
width: 800; height: 600
ColumnLayout {
width: 200
anchors.centerIn: parent
spacing: 25
TextField {
placeholderText: qsTr("User name")
Layout.fillWidth: true
}
TextField {
placeholderText: qsTr("Password")
Layout.fillWidth: true
echoMode: TextInput.Password
}
RowLayout {
Button {
text: "Log In"
Layout.fillWidth: true
}
Button {
text: "Cancel"
Layout.fillWidth: true
}
}
}
}
PS: It's not needed in a child-layout where Layout.fillWidth and Layout.fillHeight is set by default.
If you have any questions on that feel free to ask...
Yes, you just need to give an id to your TextField
TextField {
id: myTextField
...
}
and reference the width of your TextField in your Button:
Button{
...
width: myTextField.width
}