本篇文章是对来自🤝BiliBili-清晨与猫鱼的QML教程的学习笔记,原视频链接👇
https://www.bilibili.com/video/BV1Ay4y1W7xd?spm_id_from=..search-card.all.click&vd_source=4079f59f2068471b4d379822052e0270


CheckBox

一、描述

CheckBox 提供了复选框按钮,可以打开(选中)或关闭(未选中)。复选框通常用于从一组选项中选择一个或多个选项。对于更大的选项集,例如列表中的选项,请考虑改用 CheckDelegate

默认只有选中和未选中状态,除此之外,还有第三种状态:部分选中。可以使用 tristate 属性启用部分选中状态。

二、属性成员

  1. checkState : enumeration

    复选框的选中状态。

    • Qt.Unchecked:未选中。
    • Qt.PartiallyChecked:部分选中。仅在启用三态时使用。
    • Qt.Checked:已选中。
  2. nextCheckState : function

    此属性包含一个回调函数,每当用户通过触摸、鼠标或键盘交互切换复选框时,都会调用该函数以确定下一个选中状态

    默认情况下,普通复选框在 Qt.UncheckedQt.Checked 状态之间循环,三态复选框在 Qt.UncheckedQt.PartiallyCheckedQt.Checked 状态之间循环。

三、CheckBox示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import QtQuick
import QtQuick.Controls

Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")

CheckBox {
id: control
text: qsTr("CheckBox")
checked: true
hoverEnabled: false

indicator: Rectangle {
implicitWidth: 26
implicitHeight: 26
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 3
border.color: control.down ? "#17a81a" : "#21be2b"

Rectangle {
width: 14
height: 14
x: 6
y: 6
radius: 2
color: control.down ? "#17a81a" : "#21be2b"
visible: control.checked
}
}

contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
leftPadding: control.indicator.width + control.spacing
}
}
}

CheckBox示例

ComboBox

一、描述

组合框是一个组合按钮和弹出列表。它提供了一种以占用最少屏幕空间的方式向用户呈现选项列表的方法。
ComboBox是用数据模型填充的。数据模型通常是JavaScript数组、ListModel或整数,但也支持其他类型的数据模型。

二、属性成员

  1. acceptableInput : bool

    此属性保存组合框是否在可编辑文本字段中包含可接受的文本。
    如果已经设置了验证器,只有当验证器接受当前文本作为最终字符串(而不是中间字符串)时,该值才为true。

  2. [read-only] count : int

    此属性保存组合框中的项数。

  3. currentIndex : int

    此属性保存组合框中当前项的索引。
    当count为0时,默认值为-1,否则为0。

  4. [read-only] currentText : string

    此属性保存组合框中当前项的文本。

  5. [read-only] currentValue : string

    此属性保存组合框中当前项的值。

  6. delegate : Component

    此属性保存一个委托,该委托在弹出的组合框中显示项。
    建议使用ItemDelegate(或任何其他AbstractButton派生)作为委托。这确保了交互按预期工作,并且弹出窗口将在适当的时候自动关闭。当使用其他类型作为委托时,必须手动关闭弹出窗口。

  7. displayText : string

    此属性保存组合框按钮上显示的文本。
    默认情况下,显示文本显示当前所选内容。也就是说,它在当前项目的文本之后。但是,可以使用自定义值重写默认的显示文本。

    1
    2
    3
    4
    5
    ComboBox {
    currentIndex: 1
    displayText: "Size: " + currentText
    model: ["S", "M", "L"]
    }

    ComboBox-displayText属性

  8. down : bool

    该属性保存组合框按钮在视觉上是否向下。
    除非显式设置,否则该属性在按下或弹出时为真。可见是真的。若要返回默认值,请将此属性设置为undefined。

  9. editText : string

    此属性将文本保存在可编辑组合框的文本字段中。

  10. editable : bool

    此属性保存组合框是否可编辑。
    默认值为false。

  11. flat : bool

    该属性保存组合框按钮是否为平面。

    平面组合框按钮不会绘制背景,除非与之交互。与普通的组合框相比,扁平的组合框提供的外观让它们在UI的其他部分中不那么显眼。例如,当将组合框放置到工具栏中时,可能需要将组合框做成扁平的,以便它与工具按钮的扁平外观更好地匹配。

    默认值为false。

  12. [read-only] highlightedIndex : int

    此属性保存组合框弹出列表中突出显示项的索引。
    当一个高亮显示的项被激活时,弹出窗口关闭,currentIndex被设置为highlightedIndex,并且这个属性的值被重置为-1,因为不再有高亮显示的项。

  13. [read-only] implicitIndicatorHeight : real

    此属性保存隐式指示符高度。
    值等于indicator ? indicator.implicitHeight : 0.
    这通常与implicitcontenttheight和implicitBackgroundHeight一起使用来计算implicitHeight。

  14. [read-only] implicitIndicatorWidth : real

    此属性保存隐式指示符宽度。
    值等于indicator ? indicator.implicitWidth : 0.
    这通常与implicitContentWidth和implicitBackgroundWidth一起使用来计算implicitWidth。

  15. indicator : Item

    此属性保存删除指示器项。

  16. [read-only] inputMethodComposing : bool

    此属性保存可编辑组合框是否具有来自输入法的部分文本输入。
    在组合时,输入法可能依赖组合框中的鼠标或键事件来编辑或提交部分文本。此属性可用于确定何时禁用可能干扰输入法正确操作的事件处理程序。

  17. inputMethodHints : flags

    为输入法提供有关组合框的预期内容以及应该如何操作的提示。
    The default value is Qt.ImhNoPredictiveText.
    该值是标志的按位组合,如果没有设置提示,则为Qt.ImhNone。
    改变行为的标志有:

    • imhhiddentext -字符应该被隐藏,因为通常在输入密码时使用。
    • imhsensitivedata -键入的文本不应该被活动输入法存储在任何持久存储,如预测性用户字典。
    • imhnoautouppercase -输入法不应该试图在句子结束时自动切换到大写。
    • Qt.ImhPreferNumbers—首选编号(但不是必需的)。
    • Qt.ImhPreferNumbers—首选编号(但不是必需的)。
    • Qt.ImhPreferUppercase—大写字母首选(但不是必需的)。
    • Qt.Imhprefer-小写-首选小写字母(但不是必需的)。
    • Qt.Imhnopredictivetext -在输入时不要使用预测文本(即字典查找)。
    • Qt.Imhdate—文本编辑器的作用是作为一个日期字段。
    • Qt.ImhTime -文本编辑器的作用是时间字段。
      限制输入的标志(独占标志)有:
    • Qt.ImhDigitsOnly -只允许输入数字。
    • Qt.ImhFormattedNumbersOnly -只允许输入数字。这包括小数点和负号。
    • Qt.ImhUppercaseOnly -只允许大写字母输入。
    • Qt.ImhLowercaseOnly -只允许小写字母输入。
    • Qt.ImhDialableCharactersOnly -只允许使用适合电话拨号的字符。
    • Qt.ImhEmailCharactersOnly -只允许适用于电子邮件地址的字符。
    • Qt.ImhUrlCharactersOnly -只允许与url匹配的字符。
      面具:
    • Imhexclusiveinputmask——如果使用了任何独占标志,则此掩码生成非零。
  18. model : model

    此属性保存为组合框提供数据的模型。

    1
    2
    3
    4
    5
    6
    7
    8
    ComboBox {
    textRole: "key"
    model: ListModel {
    ListElement { key: "First"; value: 123 }
    ListElement { key: "Second"; value: 456 }
    ListElement { key: "Third"; value: 789 }
    }
    }
  19. popup : Popup

    此属性保存弹出窗口。
    如果需要,可以手动打开或关闭弹出窗口:

    • onSpecialEvent: comboBox.popup.close()
  20. pressed : bool

    该属性保存组合框按钮是否被物理按下。按钮可以通过触摸或按键事件来按下。

  21. selectTextByMouse : bool

    此属性保存是否可以用鼠标选择可编辑组合框的文本字段。
    默认值为false。

  22. textRole : string

    此属性保存用于填充组合框的模型角色。
    当模型有多个角色时,可以通过设置textRole来确定应该显示哪个角色。

  23. validator : Validator

    此属性保存可编辑组合框的输入文本验证器。
    当设置验证器时,文本字段将只接受使文本属性处于中间状态的输入。只有当按下回车键或回车键时文本处于可接受状态时,才会发出可接受的信号。
    目前支持的验证器是IntValidator、DoubleValidator和RegExpValidator。下面是一个使用验证器的例子,它允许在文本字段中输入0到10之间的整数:

    1
    2
    3
    4
    5
    6
    7
    8
    ComboBox {
    model: 10
    editable: true
    validator: IntValidator {
    top: 9
    bottom: 0
    }
    }
  24. valueRole : string

    此属性保存模型角色,用于存储与模型中每个项关联的值。

信号函数

  1. void accepted()

    当按下可编辑组合框上的Return或Enter键时,会发出此信号。
    您可以处理这个信号,以便将新输入的项添加到模型中,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ComboBox {
    editable: true
    model: ListModel {
    id: model
    ListElement { text: "Banana" }
    ListElement { text: "Apple" }
    ListElement { text: "Coconut" }
    }
    onAccepted: {
    if (find(editText) === -1)
    model.append({text: editText})
    }
    }

    ComboBox-Accepted信号

在发出信号之前,将进行检查,以确定该字符串是否存在于模型中。如果是,currentIndex将被设置为它的索引,currentText将被设置为字符串本身。
在发出信号之后,如果第一次检查失败(也就是说,项目不存在),将进行另一次检查,以查看项目是否由信号处理程序添加。如果是,则相应地更新currentIndex和currentText。否则,它们将分别被设置为-1和“”。
注意:如果组合框上设置了验证器,则只有在输入处于可接受状态时才会发出信号。
注意:对应的处理程序是onAccepted。

  1. void activated(int index)

    当索引项被用户激活时,会发出此信号。
    当一个项目被选中时,弹出窗口是打开的,它会被激活,导致弹出窗口关闭(currentIndex会改变),或者当弹出窗口关闭时,通过键盘导航组合框,导致currentIndex改变。设置currentIndex属性为index。
    注意:对应的处理程序是onActivated。

  2. void highlighted(int index)

    当用户突出显示弹出列表中索引处的项时,会发出此信号。
    高亮显示的信号只在弹出窗口打开和项目高亮显示时发出,但不一定激活。
    注意:相应的处理程序是onhighlight。

三、方法函数

  1. void decrementCurrentIndex()

    减少组合框的当前索引,或者如果弹出列表可见,则减少突出显示的索引。

  2. int find(string text, enumeration flags)

    返回指定文本的索引,如果没有找到匹配,则返回-1。
    执行搜索的方式由指定的匹配标志定义。默认情况下,组合框执行区分大小写的精确匹配(Qt.MatchExactly)。所有其他匹配类型都不区分大小写,除非还指定了qt.MatchCasesSensitive标志。

常数 描述
Qt.MatchExactly 搜索词完全匹配(默认)。
Qt.MatchRegExp 搜索词以正则表达式的形式匹配。
Qt.MatchWildcard 搜索词使用通配符进行匹配。
Qt.MatchFixedString 搜索词匹配为一个固定的字符串。
Qt.MatchStartsWith 搜索词与条目的开始部分匹配。
Qt.MatchEndsWidth 搜索词与条目的结尾匹配。
Qt.MatchContains 搜索项包含在项目中。
Qt.MatchCaseSensitive 搜索是区分大小写的。
  1. void incrementCurrentIndex()

    增加组合框的当前索引,或者如果弹出列表可见,则增加突出显示的索引。

  2. int indexOfValue(object value)

    返回指定值的索引,如果没有找到匹配,则返回-1。
    有关如何使用此方法的示例,请参阅组合框模型角色。

  3. void selectAll()

    选择组合框的可编辑文本字段中的所有文本。

  4. string textAt(int index)

    返回指定索引的文本,如果索引出界,则返回空字符串。