【QView】基于QML的UI组件框架之 Color(颜色)

最新推荐文章于 2024-07-26 18:01:32 发布

Adimecoin

最新推荐文章于 2024-07-26 18:01:32 发布

阅读量201

点赞数 1

分类专栏： QT/QML QView 文章标签： ui qt

本文链接：https://blog.csdn.net/Adimecoin/article/details/134826950

版权

QT/QML 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

QView

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

先上结果演示

在这里插入图片描述

环境（不说版本就是耍流氓）

硬件：通用PC / 手机 / Jetson Xavier NX 套件(均测试有效)
系统：Ubuntu 20.04 / Android / Windows (均测试有效)
软件：基于QT6.2.4 + Qml

功能描述

ColorPage 定义了Error、Warning、Info、Success等颜色。

更多的使用详见**“实例用法”**

属性名称 [类型] (默认值)

无

实例用法

/******************************************************************************
 * Copyright 2023-Adiemcoin.
 * All right reserved. See COPYRIGHT for detailed Information.
 *
 * @文件       ColorPage.qml
 * @概要       XXXX Function
 *
 * @作者       Adimecoin(QQ:413819260)
 * @e-mail    adimecoin@foxmail.com
 * @创建日期   2023/12/05
 * @修改历史
 *****************************************************************************/
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
Item {
    readonly property color contentColor: "#606266"
    ListModel {
        id:list
        ListElement {
            title: "主色调" ;
            primaryColor: "#3c9cff";darkColor: "#398ade";
            disabledColor: "#9acafc";lightColor:"#ecf5ff";
        }
        ListElement {
            title: "Error" ;
            primaryColor: "#f56c6c";darkColor: "#e45656";
            disabledColor: "#f7b2b2";lightColor:"#fef0f0";
        }
        ListElement {
            title: "Warning" ;
            primaryColor: "#f9ae3d";darkColor: "#f1a532";
            disabledColor: "#f9d39b";lightColor:"#fdf6ec";
        }
        ListElement {
            title: "Info" ;
            primaryColor: "#909399";darkColor: "#767a82";
            disabledColor: "#c4c6c9";lightColor:"#f4f4f5";
        }
        ListElement {
            title: "Success" ;
            primaryColor: "#5ac725";darkColor: "#53c21d";
            disabledColor: "#a9e08f";lightColor:"#f5fff0";
        }
        ListElement {
            title: "文字颜色" ;
            primaryColor: "#303133";darkColor: "#606266";
            disabledColor: "#909399";lightColor:"#fdf6ec";
        }
        ListElement {
            title: "边框颜色" ;
            primaryColor: "#9a9998";darkColor: "#b4b3b1";
            disabledColor: "#ceccca";lightColor:"#e7e6e4";
        }
    }
    ListView{
        anchors.fill: parent
        model: list
        clip: true
        delegate:Rectangle{
            height: 100
            Column{
                Text {
                    text: qsTr(model.title)
                    color: contentColor
                }
                Row{
                    Rectangle {
                        width: 120
                        height: 60
                        color:model.primaryColor
                        radius: 3
                        Column{
                            Text {
                                text: qsTr("原色")
                                color: "white"
                            }
                            Text {
                                text: qsTr(model.primaryColor)
                                color: "white"
                            }
                        }
                    }
                    Rectangle {
                        width: 120
                        height: 60
                        color:model.darkColor
                        radius: 3
                        Column{
                            Text {
                                text: qsTr("暗色")
                                color: "white"
                            }
                            Text {
                                text: qsTr(model.darkColor)
                                color: "white"
                            }
                        }
                    }
                    Rectangle {
                        width: 120
                        height: 60
                        color:model.disabledColor
                        radius: 3
                        Column{
                            Text {
                                text: qsTr("失能")
                                color: "white"
                            }
                            Text {
                                text: qsTr(model.disabledColor)
                                color: "white"
                            }
                        }
                    }
                    Rectangle {
                        width: 120
                        height: 60
                        color:model.lightColor
                        radius: 3
                        Column{
                            Text {
                                text: qsTr("亮色")
                                color: contentColor
                            }
                            Text {
                                text: qsTr(model.lightColor)
                                color: contentColor
                            }
                        }
                    }
                }
            }
        }
    }

}