Qt Quick Controls 2.0 体验 + 小技巧



  • Qt Quick Controls 2.0

    今天早上我下载了新的 NDK ,并且重装了 Qt 5.7.0,然后成功运行到 Android 上!~

    10_1469513247316_Screenshot_2016-07-26-14-05-52-101.png 9_1469513247316_Screenshot_2016-07-26-14-05-49-571.png 8_1469513247316_Screenshot_2016-07-26-14-05-45-372.png 7_1469513247316_Screenshot_2016-07-26-14-05-38-161.png 6_1469513247316_Screenshot_2016-07-26-14-05-16-226.png 5_1469513247316_Screenshot_2016-07-26-14-04-35-88.png 4_1469513247316_Screenshot_2016-07-26-14-04-31-858.png 3_1469513247316_Screenshot_2016-07-26-14-04-04-63.png 2_1469513247316_Screenshot_2016-07-26-14-03-57-540.png 1_1469513247316_Screenshot_2016-07-26-14-03-46-552.png 0_1469513247315_Screenshot_2016-07-26-14-03-42-412.png

    Qt 好帅~~

    使用方法

    0_1469513366016_4.png

    在. pro 文件写上

    QT += quickcontrols2
    

    然后进入 main.cpp ,写上

        QQuickStyle::setStyle("Material");
    

    0_1469513810514_7.png

    然后在 qml 里引用

    2_1469513366016_6.png

    配色

    ui配色是一个大问题啊,很多人配色都是随缘😥

    接下来教两种经常配色的方法。

    首先,你需要一个图,图尽量是 主色调 明显,又没有 太多干扰 的杂色,比如某某 触手的图 是可以滴,歌单专辑图 也是可以滴O(∩_∩)O

    (要注意 版权 哟~)

    在线配色

    这里甩给大家一个网站:配色

    然后大家根据自己的需要进行 操作 啦。

    我一般使用 传图配色 ,因为这个比较简单。

    首先 上传图片,然后人家会 自动计算主色调,然后你就 拿出来用 就可以啦

    0_1469514154279_8.png

    你当然也可以选择 其他颜色

    这是一种简单的方法,还有一种就是使用 Photoshop 进行 选取颜色

    Photoshop 选色

    首先,我们先 导入图片 ,然后在 滤镜 -> 模糊 -> 高斯模糊

    0_1469514335959_9.png

    然后,我们依次选取:

    • 比较 极端 的颜色 x2
    • 比较 中立 的颜色 x2
    • 这步可选,你可以选择你喜欢的颜色

    然后,我们可以看到,比较 极端 的颜色就是上面那些 蓝到发紫 的颜色啦和 发白 的颜色,而 中立 的颜色就是 比较淡蓝色靠近白色蓝色

    如图所示

    0_1469514589563_10.png

    大概就是这一片啦。

    然后选完了直接就可以使用了哦

    0_1469514641887_11.png

    下面这张图是前几天写计算器时候用的
    0_1469514872130_Screenshot_2016-07-26-14-33-26-645.png


  • 网站研运

    @Accelerated 不错不错,了解学习了配色的网站,😄



  • @jcy 哈哈这是我的主要目的~



  • 主色一般可以用k-means算得,Adobe还有个Creation专门用来干这个



  • @Accelerated wow cool



  • @MidoriYakumo 嗯嗯,不过使用一些小技巧来获得也是一种锻炼噢。


  • 网站研运

    @MidoriYakumo K-means算法,有时间的话,学习学习。😄



  • @jcy 对对对~


Log in to reply
 

走马观花

最近的回复

  • 诶 没有Linux吗??

    read more
  • 萌梦 男孩,女孩,和蛋

    menghome.png

    read more
  • 设计模式-工厂模式

    使用qt/qml来演示设计模式效果,便于学习理解

    1)定义创建对象的接口,封装对象的创建
    2)使具体化类的工作延迟到工厂子类中

    bg.png
    image.png

    1. 工厂类

    createProduct使用了参数来选择要创建哪个产品

    #ifndef FACTORY_H #define FACTORY_H #include <QObject> class Product; class QString; class Factory: public QObject { Q_OBJECT public: virtual ~Factory() = 0; virtual Product* createProduct(QString type) = 0; protected: Factory(); }; class ConcreteFactory: public Factory { Q_OBJECT public: ~ConcreteFactory(); ConcreteFactory(); public slots: Product* createProduct(QString type); }; #endif // FACTORY_H #include "factory.h" #include "product.h" #include <QtQml/qqml.h> Factory::~Factory() { } Factory::Factory() { qmlRegisterType<Product>("Product", 1, 0, "Product"); } ConcreteFactory::~ConcreteFactory() { } ConcreteFactory::ConcreteFactory() { } Product *ConcreteFactory::createProduct(QString type) { if(type == "boy") return static_cast<Product *>(new ConcreteProduct1()); else if(type == "girl") return static_cast<Product *>(new ConcreteProduct2()); return static_cast<Product *>(new ConcreteProduct1()); } 2 产品类

    一个产品是萌梦男,一个产品是萌梦女

    #ifndef PRODUCT_H #define PRODUCT_H #include <QObject> class Product: public QObject { Q_OBJECT public: virtual ~Product() = 0; Q_PROPERTY(QString icon READ icon NOTIFY iconChanged) QString m_icon; QString icon() const { return m_icon; } signals: void iconChanged(QString icon); protected: Product(); signals: public slots: }; class ConcreteProduct1: public Product { Q_OBJECT public: ~ConcreteProduct1(); ConcreteProduct1(); }; class ConcreteProduct2: public Product { Q_OBJECT public: ~ConcreteProduct2(); ConcreteProduct2(); }; #endif // PRODUCT_H #include "product.h" Product::~Product() { } Product::Product() { } ConcreteProduct1::~ConcreteProduct1() { } ConcreteProduct1::ConcreteProduct1() { m_icon = "qrc:/images/boy.png"; } ConcreteProduct2::~ConcreteProduct2() { } ConcreteProduct2::ConcreteProduct2() { m_icon = "qrc:/images/girl.png"; } 3. main.qml

    使用timer,canvas,listview等实现一个自动化生产的动画效果

    源代码

    Fork me on Gitee

    read more
  • blender建模 章鱼
    捕获2.PNG 😵

    read more

关注我们

微博
QQ群