18.Quick QML-ComboBox

ComboBox类似于Button按钮,但是右侧有箭头标志,当我们点击它时,会弹出一个下拉列表框,供我们选择.
ComboBox也可以设置为可编辑,就类似QQ登录用户名一样,可以输入账号,也可以通过下拉列表选择以前登过的账号.
它的属性和方法如下所示:
Properties:

• acceptableInput : bool,只读属性,用来获取当前输入的内容是否合法的输入,默认始终为true,如果我们设置了validator属性和inputMask属性,那么该值则为false,除非当前文本框内容满足输入的要求才会为true
• count : int,只读属性,此属性保存组合框中的项数。
• currentIndex : int,此属性保存组合框中当前项的索引。当count为0时，默认值为-1，否则为0。
• currentText : string,只读属性,此属性保存组合框中当前项的文本。
• currentValue : string,只读属性,此属性保存组合框中当前项的value值
• delegate : Component,此属性用来自定义在组合框弹出窗口中显示项目的委托。
• displayText : string,此属性保存组合框按钮上显示的文本。也可以使用自定义值覆盖默认显示文本。比如:displayText: "Size: " + currentText(改变的只是displayText内容,而currentText不会改变)
• down : bool，此属性保存组合框按钮是否被按下
• editText : string,此属性保存当前编辑的内容,前提是必须editable设置为true,在QtQuick.Controls 2.2 (Qt 5.9)中引入的。
• editable : bool,设置当前是否可以编辑.
• flat : bool,此属性保存组合框按钮是否为平面(平面不会绘制背景色),默认为false
• highlightedIndex : int,只读属性,此属性保存下拉列表中高亮的项目索引,如果下拉列表未打开,则为-1
• implicitIndicatorHeight : real,只读属性,保存指标器隐式的高度
• implicitIndicatorWidth : real,只读属性,保存指标器隐式的宽度
• indicator : Item,指标器
• model : model,数据模型
• popup : Popup,弹出窗口,比如我们调用popup.open()就会弹出下拉列表框
• pressed : bool,和down属性一样,保存组合框按钮是否被按下
• textRole : string,设置text模型的角色名
• validator : Validator,用来设置组合框编辑文本的验证器
• valueRole : string,设置value模型的角色名

Signals:

• void accepted() : 当按下可编辑组合框上的Return或Enter键时,将发出此信号,如果设置了验证器，则只有输入内容满足要求时，才会发出信号。
• void activated(index) ：当用户选择了下拉列表某个index项目时,将发出此信号,并将索引号赋值到index参数中
• void highlighted(index) : 当用户打开下拉列表框时,如果有高亮的项目,则发出此信号,并将索引号赋值到index参数中

Methods:

• void decrementCurrentIndex() : 当用户打开下拉列表框时,如果有高亮的项目时,此时调用该方法,就会将当前显示的索引递减
• int find(text, flags = Qt.MatchExactly) : 返回查找指定text的索引,如果没找到则返回-1,flags取值有以下几种:
  • Qt.MatchExactly : 完全匹配
  • Qt.MatchRegExp : 匹配正则表达式
  • Qt.MatchWildcard : 匹配通配符
  • Qt.MatchFixedString : 匹配固定字符串
  • Qt.MatchStartsWith : 匹配开头的字符串
  • Qt.MatchEndsWidth : 匹配结尾的字符串
  • Qt.MatchContains : 匹配包含的内容
  • Qt.MatchCaseSensitive : 区分大小写写
• void incrementCurrentIndex(): 当用户打开下拉列表框时,如果有高亮的项目时,此时调用该方法,就会将当前显示的索引递增加
• int indexOfValue(value) ： 返回指定value值的索引号,如果没有返回-1
• void selectAll() : 选中文本字段当前的内容
• string textAt(index) : 返回指定index索引号的项目内容,如果索引超出范围，则返回空字符串

 

自定义ComboBox的委托和模型,示例如下所示:

import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Controls 2.12
Window {
    visible: true;



    ComboBox {
          id: combo
          displayText: model.get(currentIndex).name + "  " + model.get(currentIndex).price
          implicitWidth: 300
          model: ListModel {
              id: model
              ListElement { name: "苹果" ; price: "$6.99"; date: "2021.02.03"}
              ListElement { name: "橘子" ; price: "$3.99"; date: "2021.02.08"}
              ListElement { name: "香蕉" ; price: "$4.20"; date: "2021.02.09"}
          }

          delegate: MenuItem {
               parent.width
              text:  name + "  " + price + "  生产日期: " + date
              font.weight: combo.currentIndex === index ? Font.DemiBold : Font.Normal
              highlighted: combo.highlightedIndex === index
              hoverEnabled: combo.hoverEnabled
          }

      }
}

效果如下所示:

ListModel模型在后面学习视图模型的时候再来详细描述.
ComboBox自定义样式,等我们后面学了Canvas后,模仿qq登录用户时,再来学习它。