如何在QML中实现下拉式颜色选择器，避免弹出独立对话框

问题原因 #

你当前的实现存在两个核心问题：

• 你引入的是QtQuick.Dialogs 1.3版本的ColorDialog，该版本的对话框为独立窗口实现，即使嵌套在Popup容器内也会默认弹出独立窗口，无法内嵌展示
• 不需要手动设置Popup的parent为Overlay.overlay，Qt Quick Controls 2的Popup默认会自动挂载到Overlay层，直接调整锚点即可实现按钮下方的下拉展示效果

实现方案 #

替换为Qt Quick Controls 2内置的ColorDialog，直接作为Popup的子控件内嵌展示即可，完整可运行示例如下：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("下拉颜色选择器示例")

    Rectangle{
        id: rect1
        height: 50
        width: 100
        color: "red"
        anchors.centerIn: parent
    }

    Button{
        id:b1
        width: 50
        height: 50
        anchors.left: rect1.right
        anchors.verticalCenter: rect1.verticalCenter
        text: "▼"
        onClicked: popup.open()

        Popup{
            id: popup
            // 锚定到按钮底部，实现下拉效果
            anchors.top: b1.bottom
            anchors.left: b1.left
            padding: 0
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

            ColorDialog {
                id: colorPicker
                // 禁用独立弹窗模式，作为普通控件内嵌
                visible: parent.visible
                // 选色完成后自动关闭下拉，并赋值给目标矩形
                onAccepted: {
                    rect1.color = colorPicker.color
                    popup.close()
                }
                onRejected: popup.close()
            }
        }
    }
}

运行后点击按钮就会在按钮下方弹出内嵌的颜色选择器，选择颜色确认后会自动更新矩形颜色，点击外部或按ESC键可关闭下拉面板。

内容的提问来源于stack exchange，提问作者Vinay