【Qt QML】ComboBox 组合框

BsonJ

已于 2024-11-17 14:21:34 修改

阅读量605

点赞数 3

分类专栏： Qt QML 文章标签： qt c++

于 2024-11-13 22:07:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_30917141/article/details/143749263

版权

由于Qt原生ComboBox不够好看，而FluentUI的FluComboBox功能不够强大，于是基于FluComboBox进行了定制（主要是不想设置风格样式）。对于Qt原生ComboBox，修改一下代码中的名称也是可以直接用的。

下载与配置FluentUIhttps://mp.youkuaiyun.com/mp_blog/creation/editor/141967374

以下是新ComboBox的功能与对应功能的代码片段，文末展示完整代码。

1、用户输入提示

FluComboBox {

    // 输入提示
    property string placeholderText
    // 初始化PlaceholderText控件时需要该属性
    property variant effectiveHorizontalAlignment: contentItem.effectiveHorizontalAlignment

    id: comboBox

    PlaceholderText {
        x: contentItem.x + contentItem.leftPadding
        y: contentItem.y + contentItem.topPadding
        width: contentItem.width - (contentItem.leftPadding + contentItem.rightPadding)
        height: contentItem.height - (contentItem.topPadding + contentItem.bottomPadding)
        text: placeholderText
        font: contentItem.font
        color: contentItem.palette.placeholderText
        verticalAlignment: contentItem.verticalAlignment
        visible: comboBox.editable && !contentItem.length
                 && !contentItem.preeditText
                 && (!contentItem.activeFocus
                     || contentItem.horizontalAlignment !== Qt.AlignHCenter)
        elide: Text.ElideRight
        renderType: contentItem.renderType
    }
}

2、指示图标随弹出框打开或关闭状态而变化

FluComboBox {
    id: comboBox
    indicator: FluIconButton {
        id: cursor
        // 按钮与组合框边框线重叠导致间隙出现，设置y与rightMargin以修正
        y: 1
        anchors.right: comboBox.right
        anchors.rightMargin: 1
        iconSize: comboBox.font.pixelSize
        iconSource: FluentIcons.ChevronDown
        onClicked: popup.open()
    }
    Connections {
        target: popup
        function onOpened() {
            if (model.count > 0)
                cursor.iconSource = FluentIcons.ChevronUp
            else {    // 无数据项时关闭
                popup.close()
            }
        }
        function onClosed() {
            cursor.iconSource = FluentIcons.ChevronDown
        }
    }
}

FluComboBox原来的指