ComboBox.qml 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2017 The Qt Company Ltd.
  4. ** Contact: http://www.qt.io/licensing/
  5. **
  6. ** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
  7. **
  8. ** $QT_BEGIN_LICENSE:LGPL3$
  9. ** Commercial License Usage
  10. ** Licensees holding valid commercial Qt licenses may use this file in
  11. ** accordance with the commercial license agreement provided with the
  12. ** Software or, alternatively, in accordance with the terms contained in
  13. ** a written agreement between you and The Qt Company. For licensing terms
  14. ** and conditions see http://www.qt.io/terms-conditions. For further
  15. ** information use the contact form at http://www.qt.io/contact-us.
  16. **
  17. ** GNU Lesser General Public License Usage
  18. ** Alternatively, this file may be used under the terms of the GNU Lesser
  19. ** General Public License version 3 as published by the Free Software
  20. ** Foundation and appearing in the file LICENSE.LGPLv3 included in the
  21. ** packaging of this file. Please review the following information to
  22. ** ensure the GNU Lesser General Public License version 3 requirements
  23. ** will be met: https://www.gnu.org/licenses/lgpl.html.
  24. **
  25. ** GNU General Public License Usage
  26. ** Alternatively, this file may be used under the terms of the GNU
  27. ** General Public License version 2.0 or later as published by the Free
  28. ** Software Foundation and appearing in the file LICENSE.GPL included in
  29. ** the packaging of this file. Please review the following information to
  30. ** ensure the GNU General Public License version 2.0 requirements will be
  31. ** met: http://www.gnu.org/licenses/gpl-2.0.html.
  32. **
  33. ** $QT_END_LICENSE$
  34. **
  35. ****************************************************************************/
  36. import QtQuick
  37. import QtQuick.Window
  38. import QtQuick.Controls.impl
  39. import QtQuick.Templates as T
  40. import QtQuick.Controls.Material
  41. import QtQuick.Controls.Material.impl
  42. T.ComboBox {
  43. id: control
  44. implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
  45. implicitContentWidth + leftPadding + rightPadding)
  46. implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
  47. implicitContentHeight + topPadding + bottomPadding,
  48. implicitIndicatorHeight + topPadding + bottomPadding)
  49. topInset: 6
  50. bottomInset: 6
  51. leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
  52. rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
  53. Material.elevation: flat ? control.pressed || control.hovered ? 2 : 0
  54. : control.pressed ? 8 : 2
  55. Material.background: flat ? "transparent" : undefined
  56. Material.foreground: flat ? undefined : Material.primaryTextColor
  57. delegate: MenuItem {
  58. width: ListView.view.width
  59. text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
  60. Material.foreground: control.currentIndex === index ? ListView.view.contentItem.Material.accent : ListView.view.contentItem.Material.foreground
  61. highlighted: control.highlightedIndex === index
  62. hoverEnabled: control.hoverEnabled
  63. }
  64. indicator: ColorImage {
  65. x: control.mirrored ? control.padding : control.width - width - control.padding
  66. y: control.topPadding + (control.availableHeight - height) / 2
  67. color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
  68. source: "qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/drop-indicator.png"
  69. }
  70. contentItem: T.TextField {
  71. padding: 6
  72. leftPadding: control.editable ? 2 : control.mirrored ? 0 : 12
  73. rightPadding: control.editable ? 2 : control.mirrored ? 12 : 0
  74. text: control.editable ? control.editText : control.displayText
  75. enabled: control.editable
  76. autoScroll: control.editable
  77. readOnly: control.down
  78. inputMethodHints: control.inputMethodHints
  79. validator: control.validator
  80. selectByMouse: control.selectTextByMouse
  81. font: control.font
  82. color: control.enabled ? control.Material.foreground : control.Material.hintTextColor
  83. selectionColor: control.Material.accentColor
  84. selectedTextColor: control.Material.primaryHighlightedTextColor
  85. verticalAlignment: Text.AlignVCenter
  86. cursorDelegate: CursorDelegate { }
  87. }
  88. background: Rectangle {
  89. implicitWidth: 120
  90. implicitHeight: control.Material.buttonHeight
  91. radius: control.flat ? 0 : 2
  92. color: !control.editable ? control.Material.dialogColor : "transparent"
  93. layer.enabled: control.enabled && !control.editable && control.Material.background.a > 0
  94. layer.effect: ElevationEffect {
  95. elevation: control.Material.elevation
  96. }
  97. Rectangle {
  98. visible: control.editable
  99. y: parent.y + control.baselineOffset
  100. width: parent.width
  101. height: control.activeFocus ? 2 : 1
  102. color: control.editable && control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
  103. }
  104. Ripple {
  105. clip: control.flat
  106. clipRadius: control.flat ? 0 : 2
  107. x: control.editable && control.indicator ? control.indicator.x : 0
  108. width: control.editable && control.indicator ? control.indicator.width : parent.width
  109. height: parent.height
  110. pressed: control.pressed
  111. anchor: control.editable && control.indicator ? control.indicator : control
  112. active: control.pressed || control.visualFocus || control.hovered
  113. color: control.Material.rippleColor
  114. }
  115. }
  116. popup: T.Popup {
  117. y: control.editable ? control.height - 5 : 0
  118. width: control.width
  119. height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
  120. transformOrigin: Item.Top
  121. topMargin: 12
  122. bottomMargin: 12
  123. Material.theme: control.Material.theme
  124. Material.accent: control.Material.accent
  125. Material.primary: control.Material.primary
  126. enter: Transition {
  127. // grow_fade_in
  128. NumberAnimation { property: "scale"; from: 0.9; easing.type: Easing.OutQuint; duration: 220 }
  129. NumberAnimation { property: "opacity"; from: 0.0; easing.type: Easing.OutCubic; duration: 150 }
  130. }
  131. exit: Transition {
  132. // shrink_fade_out
  133. NumberAnimation { property: "scale"; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
  134. NumberAnimation { property: "opacity"; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
  135. }
  136. contentItem: ListView {
  137. clip: true
  138. implicitHeight: contentHeight
  139. model: control.delegateModel
  140. currentIndex: control.highlightedIndex
  141. highlightMoveDuration: 0
  142. T.ScrollIndicator.vertical: ScrollIndicator { }
  143. }
  144. background: Rectangle {
  145. radius: 2
  146. color: parent.Material.dialogColor
  147. layer.enabled: control.enabled
  148. layer.effect: ElevationEffect {
  149. elevation: 8
  150. }
  151. }
  152. }
  153. }