highlighting on hover
I want to disable this highlighting that appears on delegate hovering. I've already tried to set interactive: false and transparent rect for "highlight" property. Image in link.
Code:
ListView {
id: friendsListView
anchors.top: parent
width: parent.width
height: friendsModel.count *
((stl.setsCmnTxtHght + stl.setsCmnBtnHght) * 2 + stl.setsCmnVertSpace * 3 + stl.setsCmnVertSpace);
interactive: false
spacing: stl.setsCmnVertSpace
model: ListModel {
id: friendsModel
}
delegate: Widgets.FriendInfoWidget {
id: friendsInfoDelegate
mActive: model.isActive
isCoach: model.isCoach
mName: model.nickname
mID: model.ID
mIndex: (index + 1)
}
Component.onCompleted: refreshFriendsModel();
}
I solved my problem. The issue was that I need to define "background" component of the delegate explicitly. In my case:
background: Rectangle {
anchors.fill: friendDelegate
color: "transparent"
}
Related
Please can someone explain me one thing. Suppose I have an item, if I click it, then a drop-down menu appears. How to make that when you hover over menu items, they stand out like that?
Code:
Rectangle {
id: main_window
width: 600
height: 600
property int mrg: 10
Rectangle {
anchors.centerIn: parent
width: 500
height: 500
color: 'green'
Text {
id: field
text: "Click!"
font.pointSize: 20
color: 'white'
anchors.centerIn: parent
MouseArea {
id: ma
anchors.fill: parent
hoverEnabled: true
onClicked: {
menu.x = ma.mouseX
menu.open()
}
}
Menu {
id: menu
y: field.height
MenuItem {
text: "Menu item"
highlighted: true
}
}
}
}
}
In the documentation, I came across the point that the proper highlight is responsible for selecting the appropriate menu item. I installed it in the True, but it did not change anything.
Please tell me what I'm doing wrong. Thanks a lot.
Although it's an old question, I came across this as it was something I was wanting to do myself. I think m7913d's answer can be simplified a little by making use of the hovered property of MenuItem.
MenuItem {
id: control
text: "Menu item"
hoverEnabled: true
background: Item {
implicitWidth: 200
implicitHeight: 40
Rectangle {
anchors.fill: parent
anchors.margins: 1
color: control.hovered ? "blue" : "transparent"
}
}
}
The other thing I did was to retain the control.down handling of the original implementation, so the color expression is slightly more involved than shown here.
The default implementation of MenuItem doesn't include any visual highlighting feature, but you can adapt the graphical representation to your needs as explained in the Qt manuals. So, your MenuItem should look like this:
MenuItem {
id: control
text: "Menu item"
background: Item {
implicitWidth: 200
implicitHeight: 40
Rectangle {
anchors.fill: parent
anchors.margins: 1
color: control.highlighted ? "blue" : "transparent" // blue background if the control is highlighed
MouseArea {
anchors.fill: parent
hoverEnabled: true // enable mouse enter events when no mouse buttons are pressed
onContainsMouseChanged: control.highlighted = containsMouse // set the highlighted flag when the mouse hovers the MenuItem
}
}
}
}
Note that this implementation is based on the default implementation provided by Qt:
background: Item {
implicitWidth: 200
implicitHeight: 40
Rectangle {
x: 1
y: 1
width: parent.width - 2
height: parent.height - 2
color: control.visualFocus || control.down ? Default.delegateColor : "transparent"
}
}
Note that Bob's answer simplifies this solution by eliminating the MouseArea
I am using a ComboBox in QML and when populated with a lot of data it exceeds my main windows bottom boarder. From googling I have learned that the drop-down list of a ComboBox is put on top of the current application window and therefore it does not respect its boundaries.
Ideally I would want the ComboBox to never exceed the main applications boundary, but I can not find any property in the documentation.
A different approach would be to limit the number of visible items of the drop-down list so that it do not exceed the window limits for a given window geometry. I was not able to find this in the documentation either and I have run out of ideas.
Take a look to the ComboBox source code, the popup is of a Menu type and it doesn't have any property to limit its size. Moreover, the z property of the Menu is infinite, i.e. it's always on top.
If you Find no way but to use the ComboBox of Qt you can create two models one for visual purpose, I will call it visual model, you will show it in your ComboBox and the complete one , it will be the reference model. Items count in your VisualModel wil be equal to some int property maximumComboBoxItemsCount that you declare . you'll need o find a way that onHovered find the index under the mouse in the visualmodel if it's === to maximumComboBoxIemsCount you do visualModel.remove(0) et visualModel.add(referenceModel.get(maximum.. + 1) and you'll need another property minimumComboBoxIemsCount, same logic but for Scroll Up , I dont know if it will work. but it's an idea
I think there is no solution using the built-in component and you should create your own comboBox. You can start from the following code.
ComboBox.qml
import QtQuick 2.0
Item {
id: comboBox
property string initialText
property int maxHeight
property int selectedItem:0
property variant listModel
signal expanded
signal closed
// signal sgnSelectedChoice(var choice)
width: 100
height: 40
ComboBoxButton {
id: comboBoxButton
width: comboBox.width
height: 40
borderColor: "#fff"
radius: 10
margin: 5
borderWidth: 2
text: initialText
textSize: 12
onClicked: {
if (listView.height == 0)
{
listView.height = Math.min(maxHeight, listModel.count*comboBoxButton.height)
comboBox.expanded()
source = "qrc:/Images/iconUp.png"
}
else
{
listView.height = 0
comboBox.closed()
source = "qrc:/Images/iconDown.png"
}
}
}
Component {
id: comboBoxDelegate
Rectangle {
id: delegateRectangle
width: comboBoxButton.width
height: comboBoxButton.height
color: "#00000000"
radius: comboBoxButton.radius
border.width: comboBoxButton.borderWidth
border.color: comboBoxButton.borderColor
Text {
color: index == listView.currentIndex ? "#ffff00" : "#ffffff"
anchors.centerIn: parent
anchors.margins: 3
font.pixelSize: 12
text: value
font.bold: true
}
MouseArea {
anchors.fill: parent
onClicked: {
listView.height = 0
listView.currentIndex = index
comboBox.selectedItem = index
tools.writePersistence(index,5)
comboBoxButton.text = value
comboBox.closed()
}
}
}
}
ListView {
id: listView
anchors.top: comboBoxButton.bottom
anchors.left: comboBoxButton.left
width: parent.width
height: 0
clip: true
model: listModel
delegate: comboBoxDelegate
currentIndex: selectedItem
}
onClosed: comboBoxButton.source = "qrc:/Images/iconDown.png"
Component.onCompleted: {
var cacheChoice = tools.getPersistence(5);
listView.currentIndex = tools.toInt(cacheChoice)
selectedItem = listView.currentIndex
comboBoxButton.text = cacheModel.get(selectedItem).value
}
}
ComboBoxButton.qml
import QtQuick 2.0
Item {
id: container
signal clicked
property string text
property alias source : iconDownUp.source
property string color: "#ffffff"
property int textSize: 12
property string borderColor: "#00000000"
property int borderWidth: 0
property int radius: 0
property int margin: 0
Rectangle {
id: buttonRectangle
anchors.fill: parent
color: "#00000000"
radius: container.radius
border.width: container.borderWidth
border.color: container.borderColor
Image {
id: image
anchors.fill: parent
source: "qrc:/Images/buttonBackground.png"
Image {
id: iconDownUp
source: "qrc:/Images/iconDown.png"
sourceSize.height:20
sourceSize.width: 20
anchors.verticalCenter: parent.verticalCenter
}
}
Text {
id:label
color: container.color
anchors.centerIn: parent
font.pixelSize: 10
text: container.text
font.bold: true
}
MouseArea {
id: mouseArea;
anchors.fill: parent
onClicked: {
container.clicked()
buttonRectangle.state = "pressed"
startTimer.start()
}
}
Timer{
id:startTimer
interval: 200
running: false;
repeat: false
onTriggered: buttonRectangle.state = ""
}
states: State {
name: "pressed"
when: mouseArea.pressed
PropertyChanges { target: image; scale: 0.7 }
PropertyChanges { target: label; scale: 0.7 }
}
transitions: Transition {
NumberAnimation { properties: "scale"; duration: 200; easing.type: Easing.InOutQuad }
}
}
}
I've used it in some software of mine, hence it is possible that It could not work "out of the box". I use it like this:
ComboBox{
id:cacheChoice
initialText: "None"
anchors.top: baseContainer.top
anchors.topMargin: 2
anchors.right: baseContainer.right
maxHeight: 500
listModel: cacheModel
onExpanded: {
cacheChoice.height = 500
}
onClosed: {
cacheChoice.height = 20
}
}
In case you are working with ComboBox from Qt Quick Controls 2, here's the source code for it:
https://github.com/qt/qtquickcontrols2/blob/5.12/src/imports/controls/ComboBox.qml
Based on that, this override of the behavior works to limit the height to something reasonable:
myComboBox.popup.contentItem.implicitHeight = Qt.binding(function () {
return Math.min(250, myComboBox.popup.contentItem.contentHeight);
});
It is possible to access the hidden MenuStyle within the ComboBoxStyle component. There you can use all the things and hidden things you have within a MenuStyle, including its maximum height.
The thing looks roughly like this.
Not pretty but it works well enough.
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.3
import QtQuick.Window 2.2
ComboBox {
id: comboBox
style: ComboBoxStyle {
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: 400
__menuItemType: "comboboxitem" //not 100% sure if this is needed
}
}
As it came up resonantly in our team, here is a updated version of the idea shown above. The new version restricts the size automatically to the size of your application.
ComboBox {
id: root
style: ComboBoxStyle {
id: comboBoxStyle
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: Math.max(55, //min value to keep it to a functional size even if it would not look nice
Math.min(400,
//limit the max size so the menu is inside the application bounds
comboBoxStyle.control.Window.height
- mapFromItem(comboBoxStyle.control, 0,0).y
- comboBoxStyle.control.height))
__menuItemType: "comboboxitem" //not 100% sure if this is needed
} //Component __dropDownStyle: MenuStyle
} //style: ComboBoxStyle
} //ComboBox
Is it possible to set up background color for particular line of TextEdit (for instance when line is clicked)?
I will have TextEdit with width:500px and with 10 lines. I will click on line number 5, which is empty line, but i still want to change the background color of whole line. Is it possible?
I need to know if it is possible to develop fully customized code editor with Qt and Qml.
Here's a solution which relies on text edit's cursor rectangle:
FocusScope {
id: root
property alias font: textEdit.font
property alias text: textEdit.text
Rectangle {
color: "lightyellow"
height: textEdit.cursorRectangle.height
width: root.width
visible: root.focus
y: textEdit.cursorRectangle.y
}
TextEdit {
id: textEdit
anchors.fill: parent
focus: true
}
}
Original Answer:
Here's my proof of concept solution. It is a custom TextEdit component which highlights current line. It lacks proper line height calculation, but it can be either hard coded if only one font size is used or obtained from QFontMetrics.
import QtQuick 2.3
Item {
id: root
property alias font: textEdit.font
property alias text: textEdit.text
Column {
anchors.fill: parent
Repeater {
model: root.height / root.lineHeight
Rectangle {
color: index === textEdit.currentLine ? "lightyellow" : "transparent"
height: root.lineHeight
width: root.width
}
}
}
TextEdit {
id: textEdit
property int currentLine: text.substring(0, cursorPosition).split(/\r\n|\r|\n/).length - 1
// FIXME: Use proper line height (e.g. from QFontMetrics)
property int lineHeight: font.pixelSize + 2
anchors.fill: parent
}
}
If you want to highlight even empty lines, then you need to handle mouse clicks and keypad events and manually change colours of corresponding rectangles.
You can use cursorRectangle property of the TextEdit and FontMetrics for this purpose:
Item {
id: root
height: te.implicitHeight
FontMetrics {
id: fontMetrics
font: te.font
}
Rectangle {
x: 0; y: te.cursorRectangle.y
height: fontMetrics.height
width: te.width
color: "#e7e7e7"
visible: te.activeFocus
}
TextEdit {
id: te
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
}
}
You can see the result for my commercial project:
I have a very simple ListView.
ListView {
id: logListView
anchors.fill: parent
model: LogEntryListModel
delegate:
Text {
text: "Log Item: " + timestamp + ", " + verb
}
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
clip: true
}
It shows the model fine and highlights the first item. It does not move the highlight when I click on another item nor when I use the arrow keys. I know how to control the highlighted item manually by adding event handlers but I see references in the docs to automatic handling of the selectedItem. I was wondering:
Does QML provide an automatic changing of the selected item highlighting? What do I need to add to turn it on?
The keyboard handling is done automatically:
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 400
height: 400
ListView {
id: logListView
anchors.fill: parent
model: 10
delegate: Text {
text: "Log Item: " + modelData
}
highlight: Rectangle {
color: "lightsteelblue";
radius: 5
}
focus: true
clip: true
}
}
If using the up and down arrow keys does not change the selected item for you, using the code above, then it's a bug.
Using a mouse to select items is not handled by default, however; only flicking/dragging of the list is. It's easy to add, though:
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 400
height: 400
ListView {
id: logListView
anchors.fill: parent
model: 10
delegate: Text {
text: "Log Item: " + modelData
MouseArea {
anchors.fill: parent
onClicked: logListView.currentIndex = index
}
}
highlight: Rectangle {
color: "lightsteelblue";
radius: 5
}
focus: true
clip: true
}
}
i have a listview, how to change a speed of changing items, tried highlightMoveSpeed(highlightMoveDuration), but that does not working
Is there any way to increase the spped
slider.qml
import QtQuick 1.0
Rectangle {
id: slider
anchors.fill: parent
Component {
id: pageDelegate
Rectangle {
id: page
height: parent.height
Component.onCompleted: page.width = slider.width
Rectangle {
anchors.fill: parent
// anchors.margins: 15
Image{
anchors.top: parent.top
anchors.fill: parent
source: modelData
}
}
}
}
ListView {
id: list_model
anchors.fill: parent
model: modelData
delegate: pageDelegate
orientation: ListView.Horizontal
snapMode: ListView.SnapToItem
spacing: 5
highlightMoveSpeed: 10000000
}
}
You can either use the default highlight and set its speed, e.g.
highlightMoveDuration : 200
highlightMoveVelocity : 1000
or, in case you use your custom highlight, let the highlight component handle the behaviour. E.g.
// Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
// to false so the highlight delegate can control how the highlight is moved.
highlightFollowsCurrentItem: false
highlight: Rectangle {
y: myListView.currentItem.y;
Behavior on y {
SmoothedAnimation {
easing.type: Easing.Linear
duration:200;
maximumEasingTime:300
velocity : 1000
}
}
}
Check the qt highlight example
A note about the other highlight move property: if you want to use highlightMoveDuration instead of highlightMoveVelocity (highlightMoveSpeed in Qt 4), you need to set the latter to -1:
highlightMoveDuration: 1000
highlightMoveVelocity: -1