The Problem
In a QML ListView delegate, there is a custom text field. This text field does not function when inside the list delegate, but works perfectly outside of said delegate.
What I Already Know (Or think I know...)
I have already narrowed the problem down to focusing issues (Nothing in the list can brought into focus with a mouse or keyboard), and the same problem still applies to other Qt Quick Controls such as buttons and sliders.
What I Need
I need to be able to use and interact with Qt Quick Controls such as buttons, text fields, etc. inside of list views and delegates. Thanks for your time and help!
The Code
List View
ListView {
id: root
anchors.horizontalCenter: parent.horizontalCenter
width: 800
height: 900
focus: true
spacing: 15
reuseItems: true
maximumFlickVelocity: 2000
verticalLayoutDirection: ListView.TopToBottom
model: listModel
delegate: listDelegate
ListModel {
id: listModel
Component.onCompleted: {
// Get document handler data object keys
var keys = DocumentHandler.dataModelKeys
// Create data object list elements
for (const key of keys) {
listModel.append(createElement(key))
}
}
// Create list element
function createElement(key) {
// Return new list element
return {
key: key,
type: DocumentHandler.getDataObjectType(key),
documentPage: 1
}
}
}
Component {
id: listDelegate
Item {
id: item
anchors.horizontalCenter: parent.horizontalCenter
width: root.width
height: 50
Text {
id: text
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
text: model.key
font.bold: true
font.pointSize: 18
}
CustomTextField {
id: textField
anchors.right: parent.right
placeholderText: key
widthScale: 1.75
onAccepted: {
// Set new placeholder text
placeholderText = text
// Set new document handler data object value with key
DocumentHandler.setDataObjectValue(key, text)
}
}
}
}
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
}
MouseArea {
anchors.fill: parent
onWheel: (wheel)=> {
// Scroll list view with wheel
if (wheel.modifiers & Qt.ControlModifier){
if (wheel.angleDelta.y > 0) {
mainTextEdit.font.pixelSize++
} else {
mainTextEdit.font.pixelSize--
}
wheel.accepted = true
} else {
wheel.accepted = false
}
}
}
}
Custom Text Field
TextField {
id: root
property var borderColor: "#3569be"
property var backgroundColor: "#ffffff"
property var textScale: 1.0
property var widthScale: 1.0
property var heightScale: 1.0
color: "#000000"
leftPadding: 7.5
font.bold: true
font.pointSize: 14 * root.textScale
selectionColor: "#3569be"
selectedTextColor: "#e0e0df"
background: Rectangle {
id: background
anchors.centerIn: parent
implicitWidth: 400 * root.widthScale
implicitHeight: 45 * root.heightScale
radius: 5
color: root.backgroundColor
border.width: 1.5
border.color: root.borderColor
}
onEditingFinished: {
// Remove from focus
focus = false
}
}
The MouseArea captures all the mouse events since its z-order is higher than all other elements on the screen. Please change the z-order of the elements or Remove the MouseArea.