Qt Quick Controls



  • 参考视频:Introduction to Qt – Intro to Qt Quick Controls {tutorial}

    主要功能

    • 做一个经典的编辑器界面
    • 一个文件菜单,包含新建、打开、保存
    • 一个工具栏,包含新建、打开、保存

    源码

    main.qml

    import QtQuick 2.11
    import QtQuick.Window 2.11
    import QtQuick.Controls 2.3
    import QtQuick.Layouts 1.3
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Qt Quick Controls")
    
        Action{
            id:actionNew
            text: qsTr("&New")
            shortcut: StandardKey.New
            icon.source: "qrc:/baseline_fiber_new_black_18dp.png"
            onTriggered: {
                area.placeholderText = "To do - New"
            }
        }
        Action{
            id:actionOpen
            text: qsTr("&Open")
            shortcut: StandardKey.Open
            icon.source: "qrc:/baseline_folder_open_black_18dp.png"
            onTriggered: {
                area.placeholderText = "To do - Open"
            }
        }
        Action{
            id:actionSave
            text: qsTr("&Save")
            shortcut: StandardKey.Save
            icon.source: "qrc:/baseline_save_black_18dp.png"
            onTriggered: {
                area.placeholderText = "To do - Save"
            }
        }
        menuBar: MenuBar{
            Menu{
                title: "File"
                MenuItem{action: actionNew}
                MenuItem{action: actionOpen}
                MenuItem{action: actionSave}
            }
        }
        header: ToolBar{
            RowLayout{
                ToolButton{action: actionNew}
                ToolButton{action: actionOpen}
                ToolButton{action: actionSave}
            }
        }
        TextArea{
            id: area
            anchors.fill: parent
        }
    }
    
    

    截图

    最后的运行效果

    image

    自己做的时候留下的部分截图

    image

    思考与总结

    这是一个完全没有办法拖控件的Demo,所有的东西都是手敲的。不光如此,视频中的Action图标根本出不来,我最后是从 https://material.io/tools/icons/ 上下载了几个图标挂上去的。

    视频的后面展示了其他的几个控件,其实就是把几个新建的空工程跑了一遍。

    GitHub: https://github.com/PikachuHy/qml-demo/tree/master/qt-quick-controls


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群