I have the follow toggle switch:
Developed by this QML code
Row {
id: myToggle
anchors.horizontalCenter: parent.horizontalCenter
width: 270
height: 25
StyledLabel {
id: myToggleLabel
text: qsTr("Toggle")
width: parent.width - myToggleSwitch.width
anchors.verticalCenter: parent.verticalCenter
}
Switch {
id: myToggleSwitch
height: parent.height
implicitWidth: parent.width * 0.25 // changing 0.25 to 0.5
// or 0.75 or ...
// doesn't have any effect
// Also replacing "implicitWidth" with "width" doesn't help!
anchors.horizontalCenter: parent.horizontalCenter
checked: true
onCheckedChanged: { console.log("checked: ", checked) }
}
}
I intend to change how much of row width is occupied by label and how much row width is occupied by switch itself.
I change the 0.25 value in the code to 0.5 or 0.75 or ... but it has no effect. Does anybody know why?
Setting anchors was interfering with setting width.
Removing this line off of Switch with ID id: myToggleSwitch solved the problem:
anchors.horizontalCenter: parent.horizontalCenter
Now the switch width can be adjusted:
Related
I have a QtQuick Controls 1.3 SplitView(as I am on QT 5.11), which contains 3 rectangles in vertical orientation. It displays fine, and I can drag-resize the childs as intended.
Now I want to add a button which allows the user to completely hide the bottom most rectangle, effectively collapsing it. However, nothing I am trying to resize the rect works:
import QtQuick.Controls 1.3 as C1
[...]
C1.SplitView {
id: splitView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: parent.width - flightSelector.width - separator.width
orientation: Qt.Vertical
LateralChart {
id: lateralChart
width: parent.width
height: mainPage.height * 0.75
Layout.minimumHeight: 30
Layout.maximumHeight: mainPage.height - 30 - 30
}
UtilityBar {
id: utilityBar
Layout.minimumHeight: 30
Layout.maximumHeight: 30
onCollapse: {
console.log("minimize")
flightList.height = 0 // no effect
flightList.preferredHeight = 0 // no effect
flightlist.Layout.maximumHeight = 0 // no effect
flightList.shouldCollapse = true // no effect
}
}
FlightListTable {
id: flightList
width: parent.width
Layout.minimumHeight: 0
Layout.maximumHeight: mainPage.height - 60 - 30
model: flightListFilterModel
property bool shouldCollapse: false
C1.SplitView.preferredHeight: shouldCollapse ? 0 : 300
}
}
[...]
If I just go flightList.visible = false, then the rect will be hidden, but the position of the middle rect remains, so it is positioned wrong (it should move to the bottom).
How can I resize SplitView child contents dynamically via JS code?
According to the docs, there must always be one (and only one) child object that has Layout.fillheight set to true. By default, it will choose the last visible child in the SplitView. In your case, it sounds like you want that to actually be the first child. So adding Layout.fillHeight: true to your LateralChart should give you the desired output.
I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable.
So far so good, I had the result I wanted.
So I just copied this code inside MyPb.qml to use it as a component:
import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4
T.ProgressBar {
id: control
property real radius: 3
contentItem: ProgressBarImpl {
implicitHeight: control.height
scale: control.mirrored ? -1 : 1
color: control.Material.accentColor
progress: control.position
indeterminate: control.visible && control.indeterminate
}
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
radius: control.radius
color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
}
}
Which gives this result for the sake of example:
With the code:
Rectangle {
width: 600
height: 300
color: "black"
MyPb {
anchors.centerIn: parent
id: prg
width: 100
height: 20
indeterminate: false
radius: 5
visible: true
value: 0.5
}
}
Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).
Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much
simpler to reuse the Qt implementation than starting making my own
animations.
So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.
Any help would be appreciated!
See the following post in the Qt forum:
https://forum.qt.io/topic/91649/make-a-round-progress-bar/7
The progress bar proposed there consists of the following components:
a rounded Rectangle for the "trough" of the progress bar
an Item that acts as a rectangular clip path
a rounded Rectangle inside that Item, used as the coloured bar
Adapted to your question, I get the following code as a proof-of-concept:
import QtQuick 2.9
Rectangle {
property int percentage: 40
id: root
width: 400
height: 100
radius: height / 2
color: "#333"
Item {
id: cliprect
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.left: parent.left
width: parent.width * parent.percentage / 100
clip: true
Rectangle {
width: root.width
height: root.height
radius: height / 2
anchors.bottom: parent.bottom
anchors.left: parent.left
color: "#e33"
}
}
}
It should be easy to move that into a template / make it compatible with the Material properties.
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
Text type has this nice feature fontSizeMode, which tries to fit the font size to the actual size of the visual component. So that when I set the font size to 20 and I resize the window so this font size is too big, it automatically lowers the font size.
Text {
text: qsTr("Text")
font.pointSize: 20
fontSizeMode: Text.Fit
}
Now I wanted to use this functionality with the TextInput type, but there is no fontSizeMode available. So my question is, how can I achieve the same functionality with TextInput? Now, when the font size is set and I downsize the window, the string in the TextInput is cut in half like this:
You can scale the element down to constrain it to a specific width:
Rectangle {
width: 100
height: 50
color: "red"
TextInput {
anchors.centerIn: parent
font.pointSize: 20
text: "test"
scale: Math.min(1, parent.width / contentWidth)
Rectangle {
color: "white"
anchors.fill: parent
z: -1
}
}
}
I sticked with this solution. Bind the font.pixelSize property to the parent height. Although I'm not sure if it is 100% correct, it does exactly what I want. If there is some problem about it, please make me know.
Text {
text: qsTr("Text")
font.pixelSize: 0.1 * parent.height
}
I am developing a Qt program using QML in which a user has to enter a variable-sized input (up to 50 chars). Since the program window is not big enough I cannot accommodate a 50 char-wide input rectangle. I would like the input box ("inputNameField" below) to act as a mask over the text so that the characters that are out of the input box are not visible. Here is my base code:
Rectangle
{
id: inputNameBox
onVisibleChanged: if (visible) textNameInput.forceActiveFocus()
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: 'grey'
radius: 5
height: parent.height/8
width: parent.width/4
TextInput
{
id: textNameInput
autoScroll: true
anchors.margins: inputNameBox.radius
anchors.fill: inputNameBox
font.pixelSize: inputNameBox.height/2
maximumLength: 50
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
}
}
I have tried using the inputNameField as an OpacityMask over the textNameInput to no avail.
EDIT: duplicate of Custom TextEdit, how to hide TextInput when it goes wide
I have one Checkbox with onCheckedChanged handler and what I want is, when the Checkbox is checked, dropdown a menu with several texts and text fields. I have the following code:
CheckBox {
id: box
onCheckedChanged: {
// TODO here to dropdown a menu with settings
}
}
I have texts and text fields like the following:
Component {
id: label
Text {
color: "red"
antialiasing: true
smooth: true
}
}
I'm a newbie in QML so please be patient.
You didn't really say where this menu is located, if it's floating or if it is to just appear maybe displacing other elements on the view. Anyway, to anwser your question, you can achieve what you're asking by setting the height of your 'menu' to zero then, when the CheckBox is checked, setting it to however tall you want it to be. To make the menu grow smoothing you can use a NumberAnimation.
You can change your onCheckedChanged() slot to look like this:
onCheckedChanged: {
menu.height = checked ? 100 : 0
}
and add the following, as a child of your menu element:
Behavior on height { NumberAnimation {...} }
to make the menu's height grow from 0 to 100 over a period of time to make it grow smoothly.
Another approach, which I'd prefer, is to use States with a Transition (instead of a Behavior).
Here is an example of a 'menu' which, when the CheckBox is checked, will slide out from beneath the CheckBox:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
Rectangle {
id: checkboxContainer
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 100
color: "pink"
CheckBox {
id: menuCheckBox
anchors.centerIn: parent
text: qsTr("Click Me")
}
}
Rectangle {
id: menu
anchors.top: checkboxContainer.bottom
anchors.left: parent.left
anchors.right: parent.right
height: 0 //This is the default value when the 'default' state is active. That is whenever we're not in the "openState"
clip: true // this hurts rendering performance a bit but is required to make sure child elements don't exceed the bounderies of this object (so when height is zero you don't see the text)
color: "lightblue"
states: [
State {
name: "openState"
when: menuCheckBox.checked // This state is only active when the check box is checked. When you uncheck the check box we move to the 'default' state (which sets the menu's hight back to zero)
PropertyChanges {
target: menu
height: 100
}
}
]
transitions: Transition {
NumberAnimation {
property: "height"
duration: 350 //This means when the height property is changed it will take 350ms to move from what its at to what your changing it to (i.e. 0 to 100 or 100 to 0).
easing.type: Easing.InOutQuad
}
}
Text {
anchors.centerIn: parent
color: "red"
antialiasing: true
smooth: true
text: qsTr("HELLO")
}
}
}
I hope this answers your question.