英文:
Enable Controls QML ListView
问题
>问题
在QML ListView委托中，有一个自定义文本字段。当在列表委托内部时，此文本字段无法正常工作，但在该委托之外可以完美运行。
>我已经知道的（或者我认为我知道的）
我已经将问题缩小到焦点问题（列表中的任何内容都无法用鼠标或键盘聚焦），并且相同的问题仍然适用于其他Qt Quick Controls，如按钮和滑块。
>我需要什么
我需要能够在列表视图和委托中使用和交互Qt Quick Controls，如按钮、文本字段等。感谢您的时间和帮助！
>代码
**列表视图**
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: {
// 获取文档处理程序数据对象键
var keys = DocumentHandler.dataModelKeys
// 创建数据对象列表元素
for (const key of keys) {
listModel.append(createElement(key))
}
}
// 创建列表元素
function createElement(key) {
// 返回新的列表元素
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: {
// 设置新的占位文本
placeholderText = text
// 使用键设置新的文档处理程序数据对象值
DocumentHandler.setDataObjectValue(key, text)
}
}
}
}
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
}
MouseArea {
anchors.fill: parent
onWheel: (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
}
}
}
}
**自定义文本字段**
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: {
// 取消焦点
focus = false
}
}
英文:
>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
}
}
答案1
得分: 1
MouseArea捕获了所有鼠标事件，因为它的z顺序高于屏幕上的所有其他元素。请更改元素的z顺序或删除MouseArea。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论