Qml练习：颜色选择器

最新推荐文章于 2025-10-17 16:12:30 发布

原创最新推荐文章于 2025-10-17 16:12:30 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qml #qt

Qt 专栏收录该内容

24 篇文章

订阅专栏

这篇博客展示了如何在Qml中实现一个颜色选择器功能，用户可以通过点击小色块来改变大矩形的填充颜色。代码包括ColorPicker.qml和main.qml两个部分。

实现效果

单击下面小颜色块，改变上方大矩形填充色

效果如图

在这里插入图片描述

代码：

ColorPicker.qml

import QtQuick 2.0

Rectangle {
    width: 60
    height: width
    border.width: focus?3:0
    border.color: "white"
    signal colorChecked(color msg)
    MouseArea{
        id:m
        anchors.fill: parent
        onClicked:colorChecked(color);
    }
}

main.qml

import QtQuick 2.0
import QtQuick.Window 2.0

Rectangle{
    id:root
    width: 400
    height: 400
    color: "#2e2e2e"
    Rectangle{
        id:main
        height: 300
        width: height
        border.width: 2
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 10

    }
    Row{
        anchors{
            bottom: parent.bottom
            bottomMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
        spacing: 15
        ColorPicker{
            id:red
            color:"red"
            onColorChecked: {
                main.color = msg;
                focus=true;
            }
        }
        ColorPicker{
            id:green
            color:"green"
            onColorChecked: {
                main.color = msg;
                focus=true;
            }
        }

        ColorPicker{
            id:blue
            color:"blue"
            onColorChecked:{main.color = msg;focus =true;}
        }
    }
}