找回密码
 立即注册
Qt开源社区 门户 查看内容

兼容Qt4/Qt5版本Qml控件ComboBox

2019-5-28 22:32| 发布者: admin| 查看: 1456| 评论: 0

摘要: 组合框是一个组合按钮和弹出列表。它提供了一种向用户显示选项列表的方法,这种方法占用最小的屏幕空间。ComboBox备注导入方法文件导入兼容性QtQuick 1.xQtQuick 2.x继承Item属性currentIndex: intcurrentText: stri ...

组合框是一个组合按钮和弹出列表。它提供了一种向用户显示选项列表的方法,这种方法占用最小的屏幕空间。
ComboBox备注
导入方法文件导入
兼容性QtQuick 1.x
QtQuick 2.x
继承Item

属性


  • currentIndex: int

  • currentText: string

  • model: model

  • pressed: bool

  • down: bool

  • count: int

  • delegate: Component

  • indicator: Component

  • contentItem: Component

  • background: Component

  • popup: Component

描述


  组合框是一个组合按钮和弹出列表。它提供了一种向用户显示选项列表的方法,这种方法占用最小的屏幕空间。数据模型通常是一个javascript数组、C++端的List类型、未来还会提供对ListModel或整数的数据模型支持。
ComboBox {
model: ["One", "Two", "Three", "Four", "Five"]
}

示例




属性文档


  • currentIndex: int
    此属性拥有组合框中当前项的索引。默认值为-1,当count为0时-1,其他情况为0或其他。
    更多相关请查看currentText。


  • [只读属性]currentText: string
    此属性拥有组合框中当前项的文本。
    更多相关请查看currentIndex。

  • model: model
    此属性为组合框提供数据模型。

  • pressed: bool
    此属性可以判断组合框是否被按下。按钮可以通过触摸或按键事件按下。
    更多相关请查看down。


  • down: bool
    此属性可以判断组合框是否处于展开状态。
    更多相关请查看pressed。

  • [只读属性]count: int
    组合框中项数。

  • delagate: Component
    该属性为组合框代理项。
    注意: 自定义delegate需要手动设置down属性与currentIndex属性以隐藏下拉列表和设置下拉列表当前项。
    更多相关请查看contentItem

  • indicator: Component
    用于设置指示器,标识组合框是否处于展开状态。常用的设置为三角形指示器。

  • contentItem: Component
    用于设置组合框的可视项。
    更多相关请查看delegate

  • background: Component
    用于设置组合框的可视项的背景。
    更多相关请查看background

  • popup: Component
    用于设置下拉框的背景项,设置其宽高可以限制下拉框的大小。默认展示下拉框的三个项目。

关于更新


  • 文章首发于微信公众号你才小学生

  • 后续更新于Qtbig哥(qtbig.com)

源码

/**********************************************************
Author: Qtbig哥
WeChat Official Accounts Platform: nicaixiaoxuesheng (文章首发)
Website: qtbig.com(后续更新)
Email: 2088201923@qq.com
QQ交流群: 732271126
LISCENSE: MIT
**********************************************************/
importQtQuick2.0

Item {
id: root

/// 此属性拥有组合框中当前项的索引。默认值为-1,当count为0时-1,其他情况为0或其他。
property alias currentIndex:_listView.currentIndex

/**
* @brief: 此属性拥有组合框中当前项的文本。
* @note: read-only
*/
property string currentText:_listView.currentText

/// 此属性为组合框提供数据模型。
property alias model:_listView.model

/// 此属性可以判断组合框是否被按下。按钮可以通过触摸或按键事件按下。
property alias pressed:mouseArea.pressed

/// 此属性可以判断组合框是否处于展开状态。
property bool down:false;

/**
* @brief: 组合框中项数。
* @note: read-only
*/
property alias count:_listView.count

/**
* @brief 该属性为组合框代理项。
* @note: 自定义delegate需要手动设置down属性与currentIndex属性以隐藏下拉列表和设置下拉列表当前项。
*/
property Component delegate:_private.defaultDelegate

/// 用于设置指示器,标识组合框是否处于展开状态。常用的设置为三角形指示器。
property Component indicator:_private.defaultIndicator

/// 用于设置组合框的可视项。
property Component contentItem:_private.defaultContentItem

/// 用于设置组合框的可视项的背景。
property Component background:_private.defaultBackground

/// 用于设置下拉框的背景项,设置其宽高可以限制下拉框的大小。默认展示下拉框的三个项目。
property Component popup:_private.defaultPopup

width:contentItemId.item.width
height:contentItemId.item.height

/// background
Loader {
id: backgroundId
sourceComponent: background
}

/// contentItem
Item {
width:contentItemId.item.width
height:contentItemId.item.height

Loader {
id: contentItemId
sourceComponent: contentItem
}

MouseArea {
id: mouseArea
anchors.fill: parent
onReleased:root.down=!root.down
}
}

/// indicator
Loader {
id: indicatorId
sourceComponent: indicator
}

/// popup
/// 下拉列表ListView
Loader {
id: popupId
y:contentItemId.item.height
visible:root.down
clip:true
sourceComponent: popup

ListView {
id: _listView
property string currentText:""
width:popupId.item.width
height:popupId.item.height
clip:true
delegate:root.delegate
onCurrentIndexChanged: currentText = model[currentIndex]
}
}

/* Private */
QtObject {
id: _private
property Component defaultDelegate: Rectangle {
width:150; height:40

Text {
anchors.verticalCenter:parent.verticalCenter
anchors.left:parent.left
anchors.leftMargin:20
/* 鼠标进入会显示对应高亮文字。 */
color:delegateMouseArea.isEnter?"#4cbeff":"black"
text: modelData
font.bold:true
font.pixelSize:17
}

Rectangle {
id: line
anchors.horizontalCenter:parent.horizontalCenter
anchors.bottom:parent.bottom
width:parent.width*0.8
height:1
color:"#e6e8ea"
/* 最后一个项不隐藏分隔线。 */
visible: index !==root.count-1
}

MouseArea {
id: delegateMouseArea
property bool isEnter:false
anchors.fill: parent
hoverEnabled:true/* 开启鼠标实时捕抓。 */
onEntered: isEnter =true
onExited: isEnter =false
onClicked: {
/* 当选项被选中后需要用户设置down的状态为false,以让下拉列表收起来。 */
/* 还需设置currentIndex的值,以至于可以刷新contentItem的文字显示。 */
root.down=false
root.currentIndex= index
}
}
}

property Component defaultIndicator: Item {
width:root.width; height:root.height

/* 三角形指示器 */
Item {
anchors.verticalCenter:parent.verticalCenter
anchors.verticalCenterOffset:2
anchors.right:parent.right
anchors.rightMargin:15
clip:true
width:2*height; height:7

Rectangle {
anchors.horizontalCenter:parent.horizontalCenter
anchors.verticalCenter:parent.verticalCenter
anchors.verticalCenterOffset:-parent.height/2
width:Math.sqrt(parent.width*parent.width*2)/2; height: width
color:root.down?"white":"#4cbeff"
rotation:45
}
}
}

property Component defaultContentItem: Rectangle {
width:150; height:40
color:root.down?"#4cbeff":"white"
border.width:root.down?0:1
border.color:"#d5d5d5"

/* 显示当前下拉列表选中的内容 */
Text {
anchors.verticalCenter:parent.verticalCenter
anchors.left:parent.left
anchors.leftMargin:20
color:root.down?"white":"#333333"
text:root.currentText
font.bold:true
font.pixelSize:17
}
}

property Component defaultBackground: Item { }

/* 设置popup可以设置下拉框的高度和宽度 */
property Component defaultPopup: Rectangle {
width:root.width; height:root.height*3
color:"#00000000"
border.color:"#d5d5d5"
}
}
}

----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:你才小学生,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了