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
}
}
Related
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
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
}
}
I'm beginner. I'm trying to use combobox to populate a list of elements, but when I tried to style there is some problem while displaying text.
Here is the code:
import QtQuick 2.7
import QtQuick.Controls 2.2
Item {
property string btntext : "First"
signal dropDownIndexChanged(int index)
id: mainDropDown
ListModel{
id: modelList
ListElement{ text: "First" }
ListElement{ text: "Second" }
ListElement{ text: "Third" }
}
ComboBox {
id: comboButton
width: parent.width
height: parent.height
model:modelList
currentIndex: 0
editText : btntext
Image {
id: imageMainButton
x: 119
anchors.top: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 9
anchors.topMargin: -7
fillMode: Image.Tile
sourceSize.height: 25
sourceSize.width: 25
source: "<some image>"
}
delegate: ItemDelegate {
id:itemDelegate
width: comboButton.width
background:Rectangle{
gradient: Gradient {
GradientStop {
position: 0.0
color: itemDelegate.down ? "white" : "blue"
}
GradientStop {
position: 1.0
color: itemDelegate.down ? "yellow" : "orange"
}
}
}
contentItem: Text {
text: modelData
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
font.pointSize: 11
font.family: "Arial"
color: itemDelegate.down ? "black" : "white"
}
highlighted: comboButton.highlightedIndex === index
}
indicator: Canvas {
}
//When this is added combo box text disapears or will be empty until something else is selected from the dropdown.
contentItem: Text {
text: comboButton.displayText
anchors.centerIn: parent
//font: comboButton.font
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
renderType: Text.NativeRendering
anchors.left : parent.left
anchors.leftMargin: 10
font.family: "Verdena"
font.pointSize: 12
font.bold: true
color: "white"
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
radius: 2
color : "white"
//height:100
smooth: true
//border.width: 1
border.color: "white"
}
popup: Popup {
y: comboButton.height
width: comboButton.width -5
//implicitHeight: contentItem.implicitHeight -1
padding: 1
background: Rectangle {
border.color: "black"
radius: 2
color : "white"
}
contentItem: ListView {
//clip: true
implicitHeight: contentHeight
model: comboButton.popup.visible ? comboButton.delegateModel : null
currentIndex: comboButton.highlightedIndex
interactive: false
}
}
onCurrentIndexChanged:
{
btntext = mainDropDown.get(currentIndex).text
dropDownIndexChanged(currentIndex)
console.log(btntext ,currentIndex)
}
}
}
1) As mentioned above why does combobox text is not displayed until I select an item from the drop down?
2) The selected index/item is not highlighted at all.
1) As mentioned above why does combobox text is not displayed until I select an item from the drop down?
This is because your background Rectangle color is "White", same as your Text color ("white" is default color).
2) The selected index/item is not highlighted at all.
This is because inside delegate (id: itemDelegate), you are changing color based on itemDelegate.down condition. Change this to itemDelegate.highlighted.