启用控件 QML ListView

huangapple
go评论91阅读模式
英文:

Enable Controls QML ListView

问题

  1. >问题
  3. 在QML ListView委托中，有一个自定义文本字段。当在列表委托内部时，此文本字段无法正常工作，但在该委托之外可以完美运行。
  5. >我已经知道的（或者我认为我知道的）
  7. 我已经将问题缩小到焦点问题（列表中的任何内容都无法用鼠标或键盘聚焦），并且相同的问题仍然适用于其他Qt Quick Controls，如按钮和滑块。
  9. >我需要什么
  11. 我需要能够在列表视图和委托中使用和交互Qt Quick Controls，如按钮、文本字段等。感谢您的时间和帮助！
  13. >代码
  15. **列表视图**
  17.     ListView {
  18.     
  19.         id: root
  20.         anchors.horizontalCenter: parent.horizontalCenter
  21.     
  22.         width: 800
  23.         height: 900
  24.     
  25.         focus: true
  26.         spacing: 15
  27.     
  28.         reuseItems: true
  29.         maximumFlickVelocity: 2000
  30.         verticalLayoutDirection: ListView.TopToBottom
  31.     
  32.         model: listModel
  33.         delegate: listDelegate
  34.     
  35.         ListModel {
  36.     
  37.             id: listModel
  38.     
  39.             Component.onCompleted: {
  40.     
  41.                 // 获取文档处理程序数据对象键
  42.                 var keys = DocumentHandler.dataModelKeys
  43.     
  44.                 // 创建数据对象列表元素
  45.                 for (const key of keys) {
  46.                     listModel.append(createElement(key))
  47.                 }
  48.             }
  49.     
  50.             // 创建列表元素
  51.             function createElement(key) {
  52.     
  53.                 // 返回新的列表元素
  54.                 return {
  55.     
  56.                     key: key,
  57.                     type: DocumentHandler.getDataObjectType(key),
  58.                     documentPage: 1
  59.                 }
  60.             }
  61.         }
  62.     
  63.         Component {
  64.     
  65.             id: listDelegate
  66.     
  67.             Item {
  68.     
  69.                 id: item
  70.                 anchors.horizontalCenter: parent.horizontalCenter
  71.     
  72.                 width: root.width
  73.                 height: 50
  74.     
  75.                 Text {
  76.     
  77.                     id: text
  78.                     anchors.left: parent.left
  79.                     anchors.verticalCenter: parent.verticalCenter
  80.     
  81.                     text: model.key
  82.                     font.bold: true
  83.                     font.pointSize: 18
  84.                 }
  85.     
  86.                 CustomTextField {
  87.     
  88.                     id: textField
  89.                     anchors.right: parent.right
  90.     
  91.                     placeholderText: key
  92.                     widthScale: 1.75
  93.     
  94.                     onAccepted: {
  95.     
  96.                         // 设置新的占位文本
  97.                         placeholderText = text
  98.     
  99.                         // 使用键设置新的文档处理程序数据对象值
  100.                         DocumentHandler.setDataObjectValue(key, text)
  101.                     }
  102.                 }
  103.             }
  104.         }
  105.     
  106.         ScrollBar.vertical: ScrollBar {
  107.             policy: ScrollBar.AsNeeded
  108.         }
  109.     
  110.         MouseArea {
  111.     
  112.             anchors.fill: parent
  113.             onWheel: (wheel)=> {
  114.     
  115.                 // 使用滚轮滚动列表视图
  116.                 if (wheel.modifiers & Qt.ControlModifier){
  117.                     if (wheel.angleDelta.y > 0) {
  118.                         mainTextEdit.font.pixelSize++
  119.                     } else {
  120.                         mainTextEdit.font.pixelSize--
  121.                     }
  122.                     wheel.accepted = true
  123.                 } else {
  124.                     wheel.accepted = false
  125.                 }
  126.             }
  127.         }
  128.     }
  130. **自定义文本字段**
  132.     TextField {
  133.     
  134.         id: root
  135.     
  136.         property var borderColor: "#3569be"
  137.         property var backgroundColor: "#ffffff"
  138.     
  139.         property var textScale: 1.0
  140.         property var widthScale: 1.0
  141.         property var heightScale: 1.0
  142.     
  143.         color: "#000000"
  144.         leftPadding: 7.5
  145.     
  146.         font.bold: true
  147.         font.pointSize: 14 * root.textScale
  148.     
  149.         selectionColor: "#3569be"
  150.         selectedTextColor: "#e0e0df"
  151.     
  152.         background: Rectangle {
  153.     
  154.             id: background
  155.             anchors.centerIn: parent
  156.     
  157.             implicitWidth: 400 * root.widthScale
  158.             implicitHeight: 45 * root.heightScale
  159.             radius: 5
  160.     
  161.             color: root.backgroundColor
  162.     
  163.             border.width: 1.5
  164.             border.color: root.borderColor
  165.         }
  166.     
  167.         onEditingFinished: {
  168.     
  169.             // 取消焦点
  170.             focus = false
  171.         }
  172.     }
英文:

>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

  1. ListView {
  2. id: root
  3. anchors.horizontalCenter: parent.horizontalCenter
  4. width: 800
  5. height: 900
  6. focus: true
  7. spacing: 15
  8. reuseItems: true
  9. maximumFlickVelocity: 2000
  10. verticalLayoutDirection: ListView.TopToBottom
  11. model: listModel
  12. delegate: listDelegate
  13. ListModel {
  14. id: listModel
  15. Component.onCompleted: {
  16. // Get document handler data object keys
  17. var keys = DocumentHandler.dataModelKeys
  18. // Create data object list elements
  19. for (const key of keys) {
  20. listModel.append(createElement(key))
  21. }
  22. }
  23. // Create list element
  24. function createElement(key) {
  25. // Return new list element
  26. return {
  27. key: key,
  28. type: DocumentHandler.getDataObjectType(key),
  29. documentPage: 1
  30. }
  31. }
  32. }
  33. Component {
  34. id: listDelegate
  35. Item {
  36. id: item
  37. anchors.horizontalCenter: parent.horizontalCenter
  38. width: root.width
  39. height: 50
  40. Text {
  41. id: text
  42. anchors.left: parent.left
  43. anchors.verticalCenter: parent.verticalCenter
  44. text: model.key
  45. font.bold: true
  46. font.pointSize: 18
  47. }
  48. CustomTextField {
  49. id: textField
  50. anchors.right: parent.right
  51. placeholderText: key
  52. widthScale: 1.75
  53. onAccepted: {
  54. // Set new placeholder text
  55. placeholderText = text
  56. // Set new document handler data object value with key
  57. DocumentHandler.setDataObjectValue(key, text)
  58. }
  59. }
  60. }
  61. }
  62. ScrollBar.vertical: ScrollBar {
  63. policy: ScrollBar.AsNeeded
  64. }
  65. MouseArea {
  66. anchors.fill: parent
  67. onWheel: (wheel)=> {
  68. // Scroll list view with wheel
  69. if (wheel.modifiers & Qt.ControlModifier){
  70. if (wheel.angleDelta.y > 0) {
  71. mainTextEdit.font.pixelSize++
  72. } else {
  73. mainTextEdit.font.pixelSize--
  74. }
  75. wheel.accepted = true
  76. } else {
  77. wheel.accepted = false
  78. }
  79. }
  80. }
  81. }

Custom Text Field

  1. TextField {
  2. id: root
  3. property var borderColor: "#3569be"
  4. property var backgroundColor: "#ffffff"
  5. property var textScale: 1.0
  6. property var widthScale: 1.0
  7. property var heightScale: 1.0
  8. color: "#000000"
  9. leftPadding: 7.5
  10. font.bold: true
  11. font.pointSize: 14 * root.textScale
  12. selectionColor: "#3569be"
  13. selectedTextColor: "#e0e0df"
  14. background: Rectangle {
  15. id: background
  16. anchors.centerIn: parent
  17. implicitWidth: 400 * root.widthScale
  18. implicitHeight: 45 * root.heightScale
  19. radius: 5
  20. color: root.backgroundColor
  21. border.width: 1.5
  22. border.color: root.borderColor
  23. }
  24. onEditingFinished: {
  25. // Remove from focus
  26. focus = false
  27. }
  28. }

答案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.

huangapple
  • 本文由 发表于 2023年6月25日 23:20:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/76551115.html
  • qml
  • qt
  • qtquick2
  • qtquickcontrols2
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定