Qt5.12.2 qml中实现ComboBox以及CheckBox
ComboBox：
ComboBox {
id: control6
x: 110
y: 27
width: 122
height: 30
model: ["禁用","普通告警","车牌抓拍","手动告警","断电告警","倒车映像"]
currentIndex: setform.alarmEn3
implicitWidth: implicitBackgroundWidth
implicitHeight: implicitBackgroundHeight
leftPadding: padding + (!control6.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
rightPadding: padding + (control6.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
// 可在此定义多为改变的特殊属性，在调用时直接指定此属性即可
font.pointSize: 8
// font.family: "Microsoft YaHei"
property color fontColor: "black" // 字体颜色
property color backgroundColor: "#E5E5E5" // 背景色
delegate: ItemDelegate {
width: parent.width
height: 30
// 行字体样式
contentItem: Text {
text: modelData
font: control6.font
color: control6.fontColor
elide: Text.ElideRight
verticalAlignment: Text.AlignHCenter
renderType: Text.NativeRendering
}
// palette.text: control4.palette.text;
// palette.highlightedText: control4.palette.highlightedText;
font.weight: control6.currentIndex === index ? Font.DemiBold : Font.Normal
highlighted: control6.highlightedIndex === index
hoverEnabled: control6.hoverEnabled
}
// 右侧下拉箭头
indicator: Canvas {
id: canvas6
x: control6.width - width - control6.rightPadding
y: control6.topPadding + (control6.availableHeight - height) / 2
width: 10
height: 6
contextType: "2d"
Connections {
target: control6
onPressedChanged: canvas6.requestPaint()
}
onPaint: {
context.reset()
context.moveTo(0, 0)
context.lineWidth = 2
context.lineTo(width / 2, height*0.8)
context.lineTo(width, 0)
context.strokeStyle = control6.pressed ? "#EEEFF7" : "#999999"
context.stroke()
}
}
// ComboBox的文字位置样式
contentItem: TextField {
leftPadding: !control6.mirrored ? 12 : control6.editable && activeFocus ? 3 : 1
rightPadding: control6.mirrored ? 12 : control6.editable && activeFocus ? 3 : 1
topPadding: 6 - control6.padding
bottomPadding: 6 - control6.padding
text: control6.editable ? control6.editText : control6.displayText
enabled: control6.editable
autoScroll: control6.editable
readOnly: control6.down
inputMethodHints: control6.inputMethodHints
validator: control6.validator
font: control6.font
color: control6.fontColor
//color: control.editable ? control.palette.text : control.palette.buttonText
selectionColor: control6.palette.highlight
selectedTextColor: control6.palette.highlightedText
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
background: Rectangle {
visible: control6.enabled && control6.editable && !control6.flat
border.width: parent && parent.activeFocus ? 2 : 1
border.color: parent && parent.activeFocus ? control6.palette.highlight : control6.palette.button
color: control6.palette.base
}
}
// ComboBox 的背景样式
background: Rectangle {
implicitWidth: 120
implicitHeight: 30
radius: 3;
color: control6.enabled ? "#FFFFFF" : control6.backgroundColor
border.color: control6.backgroundColor
border.width: !control6.editable && control6.visualFocus ? 2 : 1
visible: !control6.flat || control6.down
}
// 弹出窗口样式
popup: Popup {
y: control6.height
width: control6.width
//height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
height: contentItem.implicitHeight
topMargin: 3
bottomMargin: 3
contentItem: ListView {
// 防止显示过界
clip: true
//禁止滑动
// interactive: false;
//禁用橡皮筋效果
boundsBehavior: Flickable.StopAtBounds
implicitHeight: contentHeight
model: control6.delegateModel
currentIndex: control6.highlightedIndex
highlightMoveDuration: 0
Rectangle {
z: 10;
width: parent.width
height: parent.height
color: "transparent"
// border.color: control.palette.mid
}
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: control6.pressed ? "#EEEFF7" : control6.palette.window
border.width: 1
border.color: control6.backgroundColor
radius: 3
}
}
}
CheckBox:
CheckBox {
id: checkBox4
// text: qsTr("启用")
font.pointSize: 10
checked: setform.nbEn
x: 23
y: 50
width: 120
height: 30
spacing: 0
enabled: true
indicator:
Image {
id: image4
height: 20
width: 20
anchors.verticalCenter: parent.verticalCenter
source: checkBox4.checked ? "/new/prefix1/img/21.jpg" : "/new/prefix1/img/22.jpg"
}
contentItem: Text {
id: text4
x:45
y:40
width: 30
height: 30
text: qsTr("启用")//checkBox10.text
font.pointSize: 9
opacity: enabled ? 1.0 : 0.3
color: "black" //checkBox10.down ? "#AA0000" : "#148014"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
//leftPadding: checkBox.indicator.width + checkBox.spacing
}
}