属性

  2. acceptableInput : bool
  3. count : int
  4. currentIndex : int
  5. currentText : string
  6. currentValue : string
  7. delegate : Component
  8. displayText : string
  9. down : bool
  10. editText : string
  11. editable : bool
  12. flat : bool
  13. highlightedIndex : int
  14. implicitIndicatorHeight : real
  15. implicitIndicatorWidth : real
  16. indicator : Item
  17. inputMethodComposing : bool
  18. inputMethodHints : flags
  19. model : model
  20. popup : Popup    //弹窗 下拉弹窗是popup
  21. pressed : bool
  22. selectTextByMouse : bool
  23. textRole : string
  24. validator : Validator
  25. valueRole : string 
  27. //筛选editText输入格式 
  28. validator : Validator     
  29. //整数IntValidator:
  30. bottom : int
  31. locale : string
  32. top : int 
  34. //浮点数
  35. DoubleValidator:
  36. bottom : real
  37. 最小值
  38. decimals : int
  39. This property holds the validator's maximum number of digits after the decimal point. By default, this property contains a value of 1000.
  40. 此属性保存验证器小数点后的最大位数。默认情况下，此属性包含1000的值。
  41. locale : string
  42. notation : enumeration
  43. top : real 
  44. 最大值
  46. //正则
  47. RegExpValidator:
  48. regExp : regExp //正则表达式使用/括起来

信号

  1. void accepted()    //编辑框回车触发
  2. void activated(int index)    //选中item就将这个index激活了并触发该信号
  3. void highlighted(int index)     //鼠标浮动到index时item高亮并触发信号

方法

  1. void decrementCurrentIndex()
  2. int find(string text, enumeration flags)
  3. void incrementCurrentIndex()
  4. int indexOfValue(object value)
  5. void selectAll()
  6. string textAt(int index)

属性使用

  1. ComboBox{
  2. //    model: 3
  3.     textRole: "text"
  4.     valueRole: "value"
  5.     width: 300
  6. //    editable: true
  8.      model: [
  9.          {value:100, text: "Banana", color: "Yellow" },
  10.          {value:200,  text: "Apple", color: "Green" },
  11.          {value:300,  text: "Coconut", color: "Brown" }
  12.      ]
  13.      //使用displayText 时不可编辑，否则displayText报错，猜测是currentText获取是正在修改
  14.      displayText: currentText + " "+currentValue
  16.      onAccepted: {
  17.           //eidtText 此属性指定用户为可编辑组合框操作的文本。
  18.           if (find(editText) === -1) {    //当不能找到当前显示框中的文本就追加listmodel中
  19.               model.append({text: editText})
  20.             currentIndex = find(editText)
  21.         }
  22.     }
  23.     onCurrentIndexChanged: {
  24.         console.log("index: ", currentIndex)
  25.     }
  26.     onCurrentTextChanged: {
  27.         console.log("text: ", currentText)
  28.     }
  29.     onCurrentValueChanged: {
  30.         console.log("value: ", currentValue)
  31.     }
  33. //    onHighlighted: {
  34. //        console.log("onHighlighted: ", index)
  35. //    }
  37. //    onActivated: {
  38. //        console.log("onActivated: ", index)
  39. //    }
  40. //    onAccepted:{
  41. //        console.log("onAccepted: ")
  42. //    }
  43. }

image.png

indicator

默认indicator：image.png

  1. indicator:Image{
  2.             id:img
  3.             width: 50
  4.             height: 50
  5.             anchors.right: parent.right
  6.             anchors.verticalCenter: parent.verticalCenter
  7.             source:"/more3.png"
  8.         }

image.png

background

  1. background: Rectangle {
  2.          implicitWidth: 120
  3.          implicitHeight: 40
  4.          border.color: control.pressed ? "#17a81a" : "#21be2b"
  5.          border.width: control.visualFocus ? 2 : 1
  6.          radius: 2
  7.      }

ComboBox的background属性仅仅只设置显示下卡弹框这个可编辑框的显示样式，下拉弹出来的部分是需要单独设置的
image.png

contentItem

  1.    //控制当前控件的显示内容如何绘制
  2.      contentItem: Text {
  3.          leftPadding: 0
  4.          rightPadding: control.indicator.width + control.spacing
  6.          text: control.displayText
  7.          font: control.font
  8. //         color: control.pressed ? "#17a81a" : "#21be2b"
  9.          color: control.pressed ? "red" : "blue"
  10.          verticalAlignment: Text.AlignVCenter   //纵向居中
  11.          elide: Text.ElideRight //右侧省略
  12.      }

image.png 按下鼠标显示红色

delegate

  1. //针对model中每一项的具体绘制
  2.      delegate: ItemDelegate {
  3.          width: control.width
  4.          contentItem: Text {
  5.              text: modelData
  6. //             color: "#21be2b"
  7.              color: index % 2 ? "orange" : "blue"
  8.              font: control.font
  9.              elide: Text.ElideRight
  10.              verticalAlignment: Text.AlignVCenter
  11.          }
  12.          highlighted: control.highlightedIndex === index
  13.      }

image.png

输入筛选器validator

  1. ComboBox{
  2. //    model: 3
  3. //    textRole: "text"
  4. //    valueRole: "value"
  5.     width: 300
  6.     editable: true
  7. //    validator: IntValidator{
  8. //           top: 10
  9. //           bottom: 1
  10. //    }
  11.     validator: RegExpValidator{
  12. //        regExp: /^[0-9A-F]/
  13.         regExp: /[0-9A-F]+[.][0-9]*/
  14. //        regExp: /^\d{n}$/       //无效
  15.     }
  16. //    validator: DoubleValidator{
  17. //        top:1000
  18. //        bottom: 0
  19. //        decimals: 5
  20. //    }
  22.     onAcceptableInputChanged: { //当前是否匹配validator验证器
  23.         console.log(acceptableInput)
  24.     }
  25. }

image.pngimage.png

自定义

  1. ComboBox {
  2.      id: control
  3.      property bool bIsPopupShowDown: true
  4.      model: ["First", "Second", "Third","First", "Second", "Third","First", "Second", "Third"]
  5.      background: Rectangle {
  6.          implicitWidth: 120
  7.          implicitHeight: 40
  8.          border.color: control.pressed ? "#17a81a" : "#21be2b"
  9.          border.width: control.visualFocus ? 2 : 1
  10.          radius: 2
  11.      }
  13.      //针对model中每一项的具体绘制
  14.      delegate: ItemDelegate {
  15.          width: control.width
  16.          contentItem: Text {
  17.              text: modelData
  18. //             color: "#21be2b"
  19.              color: index % 2 ? "orange" : "blue"
  20.              font: control.font
  21.              elide: Text.ElideRight
  22.              verticalAlignment: Text.AlignVCenter
  23.          }
  24.          highlighted: control.highlightedIndex === index
  25.      }
  26.     indicator:Image{
  27.         id:img
  28.         width: 50
  29.         height: 50
  30.         anchors.right: parent.right
  31.         anchors.verticalCenter: parent.verticalCenter
  32.         source:"/more3.png"
  33.     }
  35. //     indicator: Canvas {
  36. //         id: canvas
  37. //         x: control.width - width - control.rightPadding
  38. //         y: control.topPadding + (control.availableHeight - height) / 2
  39. //         width: 12
  40. //         height: 8
  41. //         contextType: "2d"
  43. //         Connections {
  44. //             target: control
  45. //             function onPressedChanged() { canvas.requestPaint(); }
  46. //         }
  48. //         onPaint: {
  49. //             context.reset();
  50. //             context.moveTo(0, 0);
  51. //             context.lineTo(width, 0);
  52. //             context.lineTo(width / 2, height);
  53. //             context.closePath();
  54. //             context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
  55. //             context.fill();
  56. //         }
  57. //     }
  59.         //控制当前控件的显示内容如何绘制
  60.      contentItem: Text {
  61.          leftPadding: 0
  62.          rightPadding: control.indicator.width + control.spacing
  64.          text: control.displayText
  65.          font: control.font
  66. //         color: control.pressed ? "#17a81a" : "#21be2b"
  67.          color: control.pressed ? "red" : "blue"
  68.          verticalAlignment: Text.AlignVCenter   //纵向居中
  69.          elide: Text.ElideRight //右侧省略
  70.      }
  72.      popup: Popup {//delegate绘制单个项 而popup绘制整个下来窗体
  73. //         y: control.height - 1  //下拉窗体的位置
  74.          y: bIsPopupShowDown ? control.height +10  : -control.height -80 //控制下拉窗体是向上或者向下
  75.          width: control.width
  77.          implicitHeight: contentItem.implicitHeight
  78.          padding: 1
  80.          contentItem: ListView {
  81.              clip: true
  82. //             implicitHeight: contentHeight
  83.              implicitHeight:150
  84.              interactive: true //设置拖动可回弹
  85.              boundsBehavior: Flickable.StopAtBounds //拖动不会回弹脱离边界
  86.              model: control.popup.visible ? control.delegateModel : null
  87.              currentIndex: control.highlightedIndex
  89.              //下拉窗体中滚动时显示一个滚动条
  90. //             ScrollIndicator.vertical: ScrollIndicator { }
  91.              ScrollBar.vertical: ScrollBar{
  92.                 policy: ScrollBar.AlwaysOn
  93.              }
  94.          }
  96.          background: Rectangle {
  97.              border.color: "#21be2b"
  98.              radius: 2
  99. //             height: 100
  100.              //阴影设置
  101.              layer.enabled: true
  102.              layer.effect: DropShadow{
  103.                  horizontalOffset: 2    //向右偏移两个单位
  104.                  verticalOffset: 3  //向下便宜两个单位的阴影
  105.                  radius: 8.0
  106.                  samples: 17
  107.                  color: "#80000000"
  108.              }
  109.          }
  111.      }
  112.  }

image.png