有那些UbuntuColors？

在我们设计我们的Ubuntu应用中，如果我们想把我们的应用设计成为最符合Ubuntu的颜色的话，我们需要使用UbuntuColors来作为我们设计的参考．在今天的练习中，我们来显示我们的Ubuntu系统中到底有那些颜色．

\

我设计了一个简单的应用来显示我们所有的Ubuntu颜色．

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "ubuntucolors.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("ubuntucolors")

        ListModel {
            id: mymodel;
        }

        ListView {
            anchors.fill: parent
            model: mymodel
            delegate: ListItem {
                Rectangle {
                    anchors.fill: parent
                    color: value
                }
                Label {
                    anchors.centerIn: parent
                    text: name
                    fontSize: "large"
                    color: "white"
                }
            }
        }

        Component.onCompleted: {
            var keys = Object.keys(UbuntuColors);
            for(var i = 0; i < keys.length; i++) {
                var key = keys[i];
                // prints all properties, signals, functions from object
                var type = typeof UbuntuColors[key];
                if ( type !== 'function' &&
                     key.indexOf("Gradient") === -1 &&
                     key !== "objectName") {
                    //                    console.log("type: " + type)
                    console.log(key + ' : ' + UbuntuColors[key]);
                    var color = "" + UbuntuColors[key];
                    console.log("color: " + color)
                    mymodel.append({"name": key, "value": color});
                }
            }
        }
    }
}

\

\

运行我们的应用：

\

\

\

在上面的应用中，我们可以看到UbuntuColor中所定义的所有的颜色及其显示．

整个项目的源码在： github.com/liu-xiao-gu…