Qml控件：ComboBox

ComboBox默认状态
定制ComboBox
- 1、定制框架
- 2、定制指示器
- 3、定制背景
- 4、定制内容
- 5、定制弹框
- 6、定制弹框Item
- 7、弹框项的点击
- 8、定制删除项动作

更多资讯、知识，微信公众号搜索：“上官宏竹”。

ComboBox默认状态

这是一个默认的ComboBox的样子（Win10上测试结果）：

代码很简单，如下所示：

ComboBox {id: controlwidth: 200height: 32model: [qsTr("Fade in"), qsTr("Fade out"), qsTr("Slide")]
}

其中model是为ComboBox提供数据。

ComboBox主要分成两个部分：

一个是显示的区域
一个是一个Popup的弹框，如下：

定制ComboBox

1、定制框架

ComboBox可以定制的东西有：背景、内容、指示器以及每一个单项的代理，定制框架如下：

ComboBox {delegate: ItemDelegate {}indicator: Image {}contentItem: Text {}background: Rectangle {}
}

2、定制指示器

我们想要更换默认的指示器[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传要如何操作呢？

我们需要改变ComboBox默认的indicator样式。如果是一张图片，那么我们可以将indicator样式改为一个Image即可。

indicator: Image {x: control.width - width - control.rightPaddingy: control.topPadding + (control.availableHeight - height) / 2width: 16height: 16source: "qrc:/combox_indicator"
}

3、定制背景

那么我们想要改变它的背景的话如何操作呢？

我们需要改变ComboBox默认的background样式。我们可以将background样式改为一个Rectangle，然后修改这个Rectangle的颜色即可。

ComboBox {...background: Rectangle {implicitWidth: 120implicitHeight: 40color: "red"border.color: "#464546"border.width: 1radius: 2}
}

效果如上，它改变的背景是ComboBox主体框架的背景颜色，如果需要改变弹出框中每一个项的背景颜色，这时需要定制delegate代理，可以查看代理定制一节。

4、定制内容

如果想改变文本的一些属性的话，我们可以改变ComboBox默认的contentItem的样式。contentItem可以使用继承于 Item的类型进行重新定义。
我们当前可以使用一个Text来定制文本的颜色、字体等信息，更复杂的需求可以使用Rectangle等其他的类型进行重新定义。

contentItem: Text {leftPadding: 12rightPadding: control.indicator.width + control.spacingtopPadding: 5bottomPadding: 5text: control.displayTextfont.pixelSize: 18font.bold: truecolor: control.pressed ? "red" : "green"verticalAlignment: Text.AlignVCenterelide: Text.ElideRight
}

正常未点击的状态：
点击时文本颜色改变为红色（背景修改为白色)。

5、定制弹框

popup的弹框可以使用Popup类型去定义，但它不能使用其他类型定义，毕竟这是一个弹框，不可以用Rectangle等去定义它。

既然是Popup类型，那么它也有它的背景属性background，这个和上述的定制背景可以做一样的操作。

另外在ComboBox中，对于Popup来说，最重要的是要定制它弹出的内容，及contentItem。这里一般都是使用一个ListView去定制，因为你的数据是一个数组，并且更有可能是一个动态数组（可以支持增删改等操作）。

我们定制Popup的基本框架如下，背景的定制和上述一样。这里重点讨论对contentItem的定制。

popup: Popup {contentItem: ListView {}background: Rectangle {}
}

对于ListView，一般写法如下：

contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndexScrollIndicator.vertical: ScrollIndicator { }
}

implicitHeight: contentHeight中的contentHeight是Popup的成员，表示弹框的隐式高度。

另外，最重要的是我们要定制它的代理，即：model: control.popup.visible ? control.delegateModel : null，详见下一节。

6、定制弹框Item

对于每一项的定制，需要实现一个delegate : Component。代理的组件，官方推荐使用ItemDelegate或任何其他继承于AbstractButton的类型作为代理，这一点是为了确保弹框能够正常的交互工作以及自动关闭，如果使用其他类型作为代理组件，那么一定需要自己关闭弹框。在此我们使用官方推荐的ItemDelegate作为代理。

ItemDelegate同样的有contentItem、background，因为它继承自Control。对于每项的背景色的定制，通上述的定制背景一样，使用一个Rectangle来完成。对于contentItem的定制，我们可以增加许多内容，比如由两个部分组成：文本+图片，文本靠左，图片靠右，那么格式如下：

contentItem: Item {anchors.fill: parentText {}ImageButton {}
}

Text按照正常的定义如下：

Text {anchors.left: parent.leftanchors.leftMargin: 11anchors.top: parent.topanchors.topMargin: 4anchors.bottom: parent.bottomanchors.bottomMargin: 4text: modelDatacolor: "#FFFFFF"font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter
}

主要是定义它的锚点及文本大小、颜色等属性。这里说一下text: modelData，这里指的是ComboBox属性model中的数据部分，是一个内置变量。

ImageButton是一个图片按钮，跟按钮的属性基本一致，只是多了一个图片，可以参考这骗文章：。

整个效果如下：

7、弹框项的点击

处理下拉选项卡的点击事件。

可以在delegate: ItemDelegate中处理，ItemDelegate有一个clicked的信号，来处理点击事件，然后使用index来表示点击的是第几个选项。

8、定制删除项动作

定制一个点击弹框项右侧的“-”减号图标，将实时删掉一项。这个需要执行两个步骤：

将model项改用ListModel实现（因为ListModel有增删的接口）

ListModel {id: listModelListElement { modelData: qsTr("Fade in") }ListElement { modelData: qsTr("Fade out") }ListElement { modelData: qsTr("Slide") }
}

将ComboBox的model项改为：model: listModel。

实现ImageButton的点击事件

定义一个信号，并在ImageButton的点击事件onBtnClicked将其触发（ImageButton的具体实现可以参考：自定义Qml控件：ImageButton 一章），代码格式如下：
```
signal itemMinus(int index)ImageButton {onBtnClicked: {itemMinus(index)}
}
```
外部实现itemMinus这个信号的槽函数onItemMinus，在这个槽函数中将model的项删除一个即可。

效果如下：

如果想要每一个弹出项都不一致，可以对model，增加几个属性，在弹框的contentItem: Item中进行定制化修改。比如，如果想控制某个弹出项是否显示删除按钮，可以将ListModel增加一个域，如下定义：

ListModel {id: listModelListElement { modelData: qsTr("Fade in"); minus: false }ListElement { modelData: qsTr("Fade out"); minus: ture }ListElement { modelData: qsTr("Slide"); minus: ture }
}

在ComboBox内部通过model.minus变量来判定ImageButton的显示与否。

完整实现可以微信搜索公众号：“上官宏竹”，或者扫下面的二维码，关注并回复：“ComboBox”，获取资源链接。有任何疑问也可以公众号里留言咨询。

更多资讯、知识，微信公众号搜索：“上官宏竹”。

Qml控件：ComboBox相关推荐

Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）
Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊) 目录 Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊) 前言简单的平移.旋转和放缩其他元素的一些基本使用 qm ...
Windows 标准控件 ComboBox 的改造
Windows 标准控件 ComboBox 的改造目的 windows 下拉列表的标准控件为ComboBox(WC_COMBOBOX),对复选模式.只读模式支持不太好,该内容尝试对其进行复选模式.只 ...
C#窗体控件-组合框控件ComboBox
Windows窗体中的组合框(ComboBox)控件用于在下拉组合框中显示数据.组合框控件结合了文本框和列表框控件的特点,用户可以在组合框内输入文本,也可以在列表框中选择项目. ComboBox 控件 ...
QML控件拖动并靠边停留
前言用QML做控件拖动,当鼠标按下要拖动的按钮然后移动鼠标,控件坐标会随着鼠标而移动,释放鼠标后判断当前的控件位置,然后选择要停留在父窗口的左边还是右边,再通过动画将控件移动到边上.这种场景在做工具 ...
Qml控件之Calendar日历
Calendar(日历)控件是基于Qml实现的,它兼容于QtQuick 1.x和QtQuick 2.x.可用于显示日期信息. 1. 演示 2. 例子 import QtQuick 2.0 // Qt4 ...
QML控件--MenuBar
文章目录一.控件基本信息二.控件使用三.属性成员四.成员函数一.控件基本信息 Import Statement:import QtQuick.Controls 1.4 Since:Qt 5. ...
Qml控件设置字体样式
Qml中的部分控件支持设置字体样式,如Control控件有font属性,可以用来设置字体样式(除了字体的颜色),按照正确的格式编写才可以运行正常. 正确编写格式如下: import QtQuick 2 ...
兼容Qt4/Qt5版本Qml控件ScrollBar
1. ScrollBar演示 2. 对外属性继承于Rectangle; target属性继承于Flickable(默认值父控件); orientation设置控件水平还是垂直方向(默认值垂直方向). ...
组合框控件ComboBox
概述: ComboBox的功能是从一个列表中一次只能选取或输入一个选项,其主要特点是具有带向下箭头的方框.在程序执行时,按下此按钮就会下拉出一个列表框供用户选择项目.另外用户还可以在组合框上方的框中输 ...

Qml控件：ComboBox

Qml控件：ComboBox

ComboBox默认状态

定制ComboBox

1、定制框架

2、定制指示器

3、定制背景

4、定制内容

5、定制弹框

6、定制弹框Item

7、弹框项的点击

8、定制删除项动作

Qml控件：ComboBox相关推荐

最新文章

热门文章