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
    }
}

截圖

最後的運行效果

自己做的時候留下的部分截圖

思考與總結

這是一個完全沒有辦法拖控件的Demo，所有的東西都是手敲的。不光如此，視頻中的Action圖標根本出不來，我最後是從 https://material.io/tools/icons/ 上下載了幾個圖標掛上去的。

視頻的後面展示了其他的幾個控件，其實就是把幾個新建的空工程跑了一遍。

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