专栏首页跟Qt君学编程Flat风格的Qml组合框

Flat风格的Qml组合框

基于Qml的ComboBox控件修改而成。

组合框代码

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

ComboBox {
    id: root

    property color checkedColor: "#1ABC9C"

    delegate: ItemDelegate {
        width: root.width

        contentItem: Text {
            text: modelData
            color: root.highlightedIndex === index ? "white" : "black"
            font.family: "Arial"
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }

        background: Rectangle {
             width: parent.width
             height: parent.height
             color: root.highlightedIndex === index ? root.checkedColor : "#F3F4F5"
         }
    }

    indicator: Canvas {
        id: canvas
        x: root.width - width - 10
        y: (root.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
            target: root
            onPressedChanged: canvas.requestPaint()
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = "white"
            context.fill();
        }
    }

    contentItem: Item {
        width: root.background.width - root.indicator.width - 10
        height: root.background.height

        Text {
            anchors.verticalCenter: parent.verticalCenter
            x: 10
            text: root.displayText
            elide: Text.ElideRight

            font.pixelSize: 15
            font.family: "Arial"
            font.weight: Font.Thin
            color: root.down ? Qt.rgba(255, 255, 255, 0.75) : "white"
        }
    }

    background: Rectangle {
        implicitWidth: 102
        implicitHeight: 41
        color: root.down ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        radius: 5

        layer.enabled: root.hovered | root.down
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.checkedColor
            samples: 10 /*20*/
        }
    }

    popup: Popup {
        y: root.height - 1
        width: root.width
        implicitHeight: contentItem.implicitHeight
        padding: 0

        contentItem: ListView {
            implicitHeight: contentHeight
            model: root.popup.visible ? root.delegateModel : null
            clip: true
            currentIndex: root.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: "#F3F4F5"
            radius: 5
            clip: true

            layer.enabled: root.hovered | root.down
            layer.effect: DropShadow {
                transparentBorder: true
                color: "#F3F4F5"
                samples: 10
            }
        }
    }
}

组合框样式代码

GridLayout {
    width: root.width
    rows: 3
    columns: 3

    Repeater {
        id: comboboxRepeater
        model: ["#727CF5", "#0ACF97", "#F9375E",
                "#FFBC00", "#2B99B9", "#5A6268",
                "#EEF2F7", "#212730", "#3498DB"]

        ComboBox {
            model: ["First", "Second", "Third"]
            checkedColor: modelData
        }
    }
}

本文分享自微信公众号 - Qt君(qtjuna)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flat风格的Qml范围滑块

    Qt君
  • Flat风格的Qml滑动条

    Qt君
  • Flat风格的Qml输入框

    Qt君
  • 如何使用CP / SCP / RSYNC在Linux中排除特定目录?

    对于任何系统管理员或一般Linux操作系统用户而言,在服务器之间执行文件复制操作都是一项常见任务。在将文件从一个系统复制到另一个系统时,由于某些特定原因,我们可...

    用户6543014
  • centos7系统常用命令

    https://blog.csdn.net/weixin_39951988/article/details/87613816#2.5%C2%A0which%E5...

    GH
  • Flat风格的Qml范围滑块

    Qt君
  • Flat风格的Qml滑动条

    Qt君
  • admin3

    #################################################### 真机上实现别名的定义,修改配置文件

    py3study
  • 15 道二叉树手写算法题(二)

    在上一期讲到,树和链表的手写算法题在面试中出现的频率最高。也正是因为这样,如果你马上就要参加面试,但之前没有刷多少算法题,那么很建议你先看看树和链表相关的题目。...

    乔戈里
  • Linux / MacOS 修改 ls 显示年月日的时间格式

    本文参考转自米扑博客:Linux / MacOS 修改 ls 显示年月日的时间格式

    阳光岛主

扫码关注云+社区

领取腾讯云代金券