Is there a way to set size of text used in checkbox?
I have following code:
CheckBox {
text: qsTr("Use Delays")
checked: false
anchors.horizontalCenter: parent.horizontalCenter
onCheckedChanged:
{
middle.useDelays = checked
}
}
Thanks a lot!
You can define the Text item displayed by the CheckBox using CheckBoxStyle.label
import QtQuick.Controls.Styles 1.4
CheckBox {
style: CheckBoxStyle {
label: Text {
text: "Label"
font.pointSize: 16
}
}
}
For QtQuick Controls 2 you can do:
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-checkbox
import QtQuick 2.12
import QtQuick.Controls 2.12
CheckBox {
id: control
text: qsTr("CheckBox")
checked: true
indicator: Rectangle {
implicitWidth: 26
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3
border.color: control.down ? "#17a81a" : "#21be2b"
Rectangle {
width: 14
height: 14
x: 6
y: 6
radius: 2
color: control.down ? "#17a81a" : "#21be2b"
visible: control.checked
}
}
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
leftPadding: control.indicator.width + control.spacing
}
}
Related
I'm using the example from QML website on how to customize ComboBox as seen below:
#Combo.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
// ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
delegate: Rectangle {
color: "#080808"
Text {
anchors.fill: parent
text: modelData
}
}
///////////////////////////////////////////////////
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#080808"
radius: 2
}
}
}
#main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Combo {
width: 200
height: 40
anchors.centerIn: parent
}
}
I added some new code to Combo.qml as seen above to turn the background of the ListView items to a darker color to match the background color of the Popup itself, but nothing is changing. The ListView background color for the items is always white. I'd appreciate some help on figuring this out. Thanks
There are two issues going on. First, the delegate: on the ComboBox apparently takes precedence over the delegate: on the ListView. Second, the ItemDelegate has some pretty specific highlighting behavior so you need to override it's background and the coloring behavior of it like this:
import QtQuick 2.12
import QtQuick.Controls 2.12
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
id: itemDelegate
width: control.width
background: Rectangle {
visible: itemDelegate.down || itemDelegate.highlighted || itemDelegate.visualFocus
color: itemDelegate.highlighted ? "#808080" : "#080808"
implicitWidth: 100
implicitHeight: 40
}
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
// ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
// delegate: Rectangle {
// width: parent.width
// height: 40
// color: "#080808"
// Text {
// anchors.fill: parent
// text: modelData
// }
// }
///////////////////////////////////////////////////
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#080808"
radius: 2
}
}
}
I want to style my QML based combo/dropdown box so that each item will have a "delete" button on it like so
How can I achieve this? is there any article or links I can refer to to achieve this?
I am using QML to design the widget.
You can simply customize a QC2 combobox starting from here:
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox
To this:
import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle {
id: root
width: 400
height: 400
ComboBox {
id: control
x: 50
y: 50
model: ["My Brackets 2021", "New Preset 22", "Super Br1", "New thingy", "Element of that list"]
delegate: ItemDelegate {
width: control.width - 20
contentItem: Text {
text: modelData
color: "#787878"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
Button {
x: parent.width - 25
y: (parent.height - height) / 2
width: 30
height: 30
text: "\u26CC"
onClicked: { /* --Perform delete action here-- */ }
}
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#B4C8DA";
context.fill();
}
}
contentItem: Text {
leftPadding: 10
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#787878"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 250
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#B4C8DA"
border.width: control.visualFocus ? 2 : 1
radius: 20
}
popup: Popup {
y: control.height + 3
width: control.width
implicitHeight: contentItem.implicitHeight + 20
padding: 10
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
border.color: "#B4C8DA"
radius: 20
}
}
}
}
Will look like this:
I am new to QML development. I would like to customize the QML button for our requirement. In some QML sample projects, the customization is done as Button.QML by
drawing a rectangle and implementing mouse area onclick() events. example,
import QtQuick 2.5
Rectangle {
id: button
signal clicked
property alias text: text.text
border.width: 1
border.color: "white"
property real textHeight: height - 2
property real fontHeight: 0.3
property bool pressed: mouse.pressed
property real implicitMargin: (width - text.implicitWidth) / 2
Text {
id: text
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: parent.textHeight
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: height * fontHeight
color: "#1b1c1d"
font.family: "Open Sans Regular"
}
MouseArea {
id: mouse
anchors.fill: parent
onClicked: button.clicked()
}
}
This code is works for me. But I saw another QT example as
import QtQuick 2.12
import QtQuick.Controls 2.0
Button {
id: controlBt
text: qsTr("Test")
font.pixelSize: 32
contentItem: Text {
text: controlBt.text
font: controlBt.font
opacity: enabled ? 1.0 : 0.3
color: controlBt.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 550
implicitHeight: 66
opacity: enabled ? 1 : 0.3
border.color: controlBt.down ? "#17a81a" : "#21be2b"
border.width: 1
radius: 2
}
}
But by using this code for customization, Focus and key events are not working for the button.
Could anyone provide me the best and correct way to customize a QML button.
Thanks
I have used the following code for the customization
UiButton.qml
import QtQuick 2.12
import QtQuick.Controls 2.0
Button {
id: controlBt
text: qsTr("Test")
font.pixelSize: 32
contentItem: Text {
text: controlBt.text
font: controlBt.font
opacity: enabled ? 1.0 : 0.3
color: controlBt.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 550
implicitHeight: 66
opacity: enabled ? 1 : 0.3
border.color: controlBt.down ? "#17a81a" : "#21be2b"
border.width: 1
radius: 2
}
}
In the test.qml i have used the above button as
UiButton
{
id: idTestButton
x: 250
y: 512
focus: true
visible: false
KeyNavigation.down:
{
console.log(">>>>>>>>>>>>>>>>>>>>idTestButton: down")
}
Keys.onLeftPressed:
{
console.log(">>>>>>>>>>>>>>>>>>>>idTestButton: onLeftPressed")
}
onClicked: {
console.log(">>>>>>>>>>>>>>>>>>>>idTestButton: onClicked")
}
}
in the application, I have a listView and on pressing down from the last item of listView, i need to set focus on the test button.
on listView Keys.onDownPressed:
Keys.onDownPressed:
{
// on pressing down from last item, I set focus to button as
idTestButton.forceActiveFocus()
}
on using forceActiveFocus(), everything worked for me. Thank you all for your support
Thanks you
I have next listview component:
CustomListRadio.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import "."
Rectangle {
id: radio_content
x: 0
y: 40
width: 320
height: 158
color: "black"
property int counter: 0
property int savedIndex: 0
property int checkedIndex: 0
property variant internalModel
ButtonGroup {
id: buttonGroup
}
ListView {
id: list
x: 0
y: 0
width: 320
height: 158
model: parent.internalModel
anchors.fill: radio_content
delegate: RadioDelegate {
text: modelData
checked: index == radio_content.savedIndex
ButtonGroup.group: buttonGroup
font.pixelSize: 23
font.family: "Futura Condensed"
font.styleName: "Medium"
MouseArea {
anchors.fill: parent
onClicked: {
parent.checked = true
radio_content.checkedIndex = model.index
}
}
}
}
}
RadioDelegate.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
RadioDelegate {
id: control
text: qsTr("RadioDelegate")
checked: true
contentItem: Text {
leftPadding: control.indicator.width + control.spacing
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "white"
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
indicator: Rectangle {
implicitWidth: 30
implicitHeight: 30
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 15
color: control.checked ? "#0088FF" : "white"
border.color: "#0088FF"
Rectangle {
width: 10
height: 10
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
radius: 5
color: "white"
visible: control.checked
}
}
background: Rectangle {
implicitWidth: 320
implicitHeight: 40
color: "black"
border {
color: "#383838"
width: 1
}
}
}
How add component
CustomListRadio {
id: radio_list
internalModel: msg.languageVariantList
savedIndex: msg.language
}
It creates a list of radiobuttons. It works well. But, I can't select default checked radio button. Selecting a switch with the mouse, works. But from the code, at best, my solution selects the switch only if the length of the list is equal to the number of visible elements.
Problem in RadioDelegate.qml, need to remove next string:
checked: true
currently I am trying to get into QML for a future software project. I got a small application running and wanted to make a checkable MenuItem. I looked through the QtQuick2 Controls Customizing Guide and already changed the Indicator. Now is my problem that I want the Textposition of the checkable MenuItem to be the same as the non checkable MenuItem.
Menu {
id: viewMenu
y: parent.height
MenuItem {
text: qsTr("Switch Mode")
}
MenuItem {
id: showSidebar
checkable: true
checked: true
text: qsTr("Show Sidebar")
leftPadding: 0
indicator: Rectangle {
implicitHeight: 26
implicitWidth: 26
x: parent.width - 35
y: parent.height / 2 - height / 2
radius: 3
border.color: showSidebar.down ? "#17a81a" : "#a451a4"
Rectangle {
x: 6
y: 6
width: 14
height: 14
radius: 2
color: showSidebar.down ? "#17a81a" : "#a451a4"
visible: showSidebar.checked
}
}
contentItem: Text {
text: showSidebar.text
font: showSidebar.font
opacity: enabled ? 1.0 : 0.3
color: showSidebar.down ? "#17a81a" : "#a451a4"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
rightPadding: showSidebar.indicator.width + showSidebar.spacing
}
}
}
I tried to change the x position in the contentItem: Text part but didn't work . Changing the padding didn't work either. I am using Qt 5.9 (cannot switch to 5.10).
Comment out the leftPadding and horizontalAlignment lines in your showSidebar MenuItem, and you should be good to go.
leftPadding will default to the same padding value as the other menu item, while horizontal alignment will default to Text.AlignLeft.
MenuItem {
id: showSidebar
checkable: true
checked: true
text: qsTr("Show Sidebar")
// leftPadding: 0
indicator: Rectangle {
implicitHeight: 26
implicitWidth: 26
x: parent.width - 35
y: parent.height / 2 - height / 2
radius: 3
border.color: showSidebar.down ? "#17a81a" : "#a451a4"
Rectangle {
x: 6
y: 6
width: 14
height: 14
radius: 2
color: showSidebar.down ? "#17a81a" : "#a451a4"
visible: showSidebar.checked
}
}
contentItem: Text {
text: showSidebar.text
font: showSidebar.font
opacity: enabled ? 1.0 : 0.3
color: showSidebar.down ? "#17a81a" : "#a451a4"
// horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
rightPadding: showSidebar.indicator.width + showSidebar.spacing
}
}