We are developing an application on IMX6 using Qt 5.3.2. The Qt libraries are provided by Yocto.
Our requirement is to list items inside a drop down menu using a particular background style. For this purpose we are using ComboBox provided by Qt Quick Controls and QtQuick.Controls.Styles for customizing the drop down background style. We are using MenuStyle component to customize the drop down.
When we apply the styles, we observed that the drop down bottom border does not close.
Please use the following link to view the picture.
We are not facing this issue in the Desktop. We tried running the same application on Ubuntu 12.04.
https://www.dropbox.com/s/33a57jaxs452c4r/IMX6.JPG?dl=0
https://www.dropbox.com/s/cmvvf3ytxg615q8/Ubuntu.JPG?dl=0
Also, below I've listed the qml code which we used for Customizing the drop down.
ComboBox {
id: comboFilterBy
x: 10
y: 130
z:1
width: 285
height: 39
model : eventFiltersList
Rectangle {
id: arrow
anchors.right: parent.right
width: 20; height: parent.height
border.color: "black"
border.width: 1
Image {
id: arrowIcon
// anchors.fill: parent
width: 10
height: arrow.height
anchors.centerIn: parent
clip: true
smooth: true
fillMode: Image.PreserveAspectFit
source: "images/dropDownArrow.png"
}
}
style: ComboBoxStyle {
background:
Rectangle {
color: "#FFFFFF"
border.width: 1
border.color: "black"
antialiasing: true
}
label: Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.left
font.pointSize: 19
font.family: "WenQuanYi Micro Hei Mono"
color: "black"
text: control.currentText
}
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: 240
__menuItemType: "comboboxitem"
padding.bottom : getPaddingLength(1)
frame: Rectangle { // background
color: "#fff"
border.width: 1
}
itemDelegate.label: // an item text
Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: 19
font.family: "WenQuanYi Micro Hei Mono"
color: "black"
text: styleData.text
}
itemDelegate.background: Rectangle { // selection of an item
color: styleData.selected ? "#5692c4" : "transparent"
}
__scrollerStyle: ScrollViewStyle { }
}
}
Any help is greatly appreciated.
--Narayanan K
Related
I am using a template to create an app using QT Creator and QML and am hoping to create a landing page that allows users to select which "page" they want to navigate to by clicking an icon.
I've figured out how to get a button on the landing page and have it open another page. However, I am using x and y positions of the button and it doesn't scale correctly when the window size changes.
Ultimately, I am trying to put 6 buttons on the landing page in a way that scales correctly.
I have attached an image of my ideal Landing Page design and have also attached code for what I already have.
I hope I was able to explain this well enough. Please let me know if I can clarify anything.
import QtQuick 2.2
import QtQuick 2.6
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
import "components" as Components
//BACKGROUND COLOR
Rectangle {
signal signInClicked(string tourId)
color: "#242424"
AnimatedImage {
anchors.fill: parent
source: app.landingpageBackground
fillMode: Image.PreserveAspectCrop
visible: source > ""
}
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "#00000000";}
GradientStop { position: 1.0; color: "#00000000";}
}
}
//TITLE TEXT
Text {
id: titleText
anchors {
left: parent.left
right: parent.right
top: parent.top
topMargin: app.height/10
}
font.family: app.customTitleFont.name
text: app.info.title
font {
pointSize: 60
pointSize: app.titleFontSize * 1.4
}
color: "#00000000"
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.Wrap
}
Button {
id: signInButton
anchors {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 60 * app.scaleFactor
}
opacity: 0.0
style: ButtonStyle {
id: btnStyle
property real width: parent.width
label: Text {
id: lbl
text: signInButton.text
anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
width: parent.width
maximumLineCount: 2
elide: Text.ElideRight
wrapMode: Text.WordWrap
color: app.titleColor
font.family: app.customTextFont.name
font.pointSize: app.baseFontSize
}
background: Rectangle {
color: Qt.darker(app.headerBackgroundColor, 1.2)
border.color: app.titleColor
radius: app.scaleFactor * 2
}
}
height: implicitHeight < app.units(56) ? app.units(56) : undefined // set minHeight = 64, otherwise let it scale by content height which is the default behavior
width: Math.min(0.5 * parent.width, app.units(250))
text: qsTr("Let's Play!")
MouseArea{
anchors.fill: parent
onClicked: {
signInClicked("");
}
}
NumberAnimation{
id: signInButtonAnimation
target: signInButton
running: false
properties: "opacity"
from: 0.0
to: 1.0
easing.type: Easing.InQuad
duration: 1000
}
}
AboutPage {
id: aboutPage
}
NewsAndUpdates {
id: newsPage
}
ProgramsPage {
id: programsPage
}
Connections {
target: app
onUrlParametersChanged: {
if (app.urlParameters.hasOwnProperty("appid")) {
signInClicked(app.urlParameters.appid)
}
}
}
Component.onCompleted: {
signInButtonAnimation.start()
}
}
I think this doc should help you. You haven't really defined what you want very well, but I'll show you some examples so you can hopefully take from it what you need.
QML has the concept of "positioners" and "layouts". Positioners help automatically position your objects neatly on the screen. And Layouts try to do that too, but can also stretch your objects to fill available space.
Row:
You can arrange all your buttons in a row and center the row horizontally.
Row {
anchors.horizontalCenter: parent.horizontalCenter
Button { id: btn1 }
Button { id: btn2 }
...
}
Grid:
Similarly, Grid is a positioner that arranges objects into a grid:
Grid {
anchors.horizontalCenter: parent.horizontalCenter
columns: 3
Button { id: btn1 }
Button { id: btn2 }
...
}
GridLayout:
A GridLayout is just like a Grid, but it can also resize the objects to fill up the space. My opinion is layouts can do more, but they're often trickier to use. In this example, the first button should be a fixed size, while the second button should fill up the remaining width.
GridLayout {
anchors.fill: parent
rows: 2
Button { id: btn1; Layout.preferredWidth: 200 }
Button { id: btn2; Layout.fillWidth: true}
...
}
I am getting some weird behaviour from the Qt Virtual Keyboard on QML. I have a TextInput which has focus, but it will not receive the keystrokes until I do an actual click (using a real mouse, not touch) somewhere on the screen. I am also getting "input method not set" in the log. The system is running Ubuntu 20.04. Anybody came across something like this. Any hints/help would be appreciated.
Would also like to mention that the touch screen works for all the other screen navigation
Please see my code below:
Rectangle {
id: passwordFieldId
anchors.top: passwordPromptId.bottom
anchors.topMargin: 30
anchors.horizontalCenter: userPasswordBackgroundId.horizontalCenter
color: HLGStyles.white
border.color: HLGStyles.black
border.width: 1
width: 350
height: 40
TextInput {
id: passwordInputFieldId
echoMode: TextInput.Password
anchors.fill: parent
font {family: liberationSansRegular.name; pointSize: HLGStyles.mediumFont}
color: HLGStyles.black
visible: passwordVirtualKeyboardId.visible
onVisibleChanged: if(visible) passwordInputFieldId.forceActiveFocus()
onActiveFocusChanged: {
if(activeFocus) {
Qt.inputMethod.update(Qt.ImQueryInput)
}
}
focus: passwordVirtualKeyboardId.visible
padding: 2
verticalAlignment: TextInput.AlignVCenter
anchors.centerIn: parent
Keys.onReturnPressed: viewModel.onEnterPressed(passwordInputFieldId.text)
}
}
InputPanel {
id: passwordVirtualKeyboardId
visible: (guiManager.currentScreenDisplayed === Screens.SoftwareUpdate) && (viewModel.currentScreen === viewModel.userPasswordScreenName) ? true : false
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width * 0.95
height: parent.height * 0.5
anchors.bottom: parent.bottom
anchors.bottomMargin: 140
}
I was working with a GridView in QML. When I click on an element, I want to following highlight to happen:
However, my problem is that I want the blue color to appear below the delegate (not in the white area but still visible on the transparent side part) while the checkmark appears above (so it is visible). I have tried playing around with the z values so that the lowest z should be the blue rectangle, the middle should be the white rectangle part of the delegate, and the highest should be the check mark but i can't seem to make it work. Either the highlight or the delegate has to be on top. Does anyone know any way I can fix this so that it works correctly?
Code for highlight:
highlight:
Rectangle {
z:5
color: "steelblue"; radius: 5; opacity: 0.5
Image{
z:8
id: checkMark
visible: found;
x: parent.width-8-width
y: 8
width: 40;
height: 40;
source: "file:///Users/arjun/Documents/CompetitiveBall/images/checkMark.png"
}
}
Code for delegate:
Component {
id: contactsDelegate
Rectangle{
width: grid.cellWidth
height: grid.cellHeight
color: "transparent"
Rectangle {
z:7
width: grid.cellWidth-20
height: grid.cellHeight-20
id: wrapper
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
border.width: 3
border.color: "black"
radius: 5;
Image{
id: mImage
x:parent.x
width: 65
height:65;
source: picSource
}
Text{
width: grid.cellWidth-15
y: mImage.y+mImage.height+4
anchors.horizontalCenter: parent.horizontalCenter
id: nameText
text: name
font.family: "Palatino Linotype"
font.bold: (grid.isCurrentItem===true)?"true":"false"
horizontalAlignment: Text.AlignHCenter
color:"#050027"
}
MouseArea{
anchors.fill: parent
onClicked:{
console.log("Clicked on :" + name)
//what happens when u click
grid.currentIndex=index;
}
}
}
}
}
Since you want part of the highlight to be underneath the delegate and part of it to be on top, you need to break it up into different pieces. I tested the code below with Qt 5.15.0. I made the normal highlight object draw underneath the delegate. Then I added another Rectangle that follows the highlight that draws on top of the delegate.
GridView
{
id: lv
anchors.fill: parent
anchors.margins: 50
cellWidth: 50
cellHeight: 50
model: 30
// By default, highlight draws behind delegates
// (You can specify a positive z-value to make it draw on top)
highlight: Item
{
Rectangle
{
anchors.centerIn: parent
width: 50
height: 50
color: "green"
}
}
delegate: Rectangle
{
width: 30
height: 30
color: "red"
MouseArea
{
anchors.fill: parent
onClicked: lv.currentIndex = index;
}
}
// This will draw on top of the delegates
// (You can change that by specifying a negative z-value.)
Rectangle
{
id: checkbox
x: lv.highlightItem.x - lv.contentX
y: lv.highlightItem.y - lv.contentY
width: 10
height: 10
color: "blue"
}
}
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'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.