QML控件--Window和ApplicationWindow

文章目录

• 一、Window
• 二、ApplicationWindow

• 2.1、使用示例

一、Window

Window需要导入：import QtQuick.Window

Window就是一个普通的窗口，其中什么组件也没有，可以理解为和QWidget差不多；

二、ApplicationWindow

ApplicationWindow需要导入：import QtQuick.Controls

ApplicationWindow是Window的扩充版，是一个丰富的窗口，包含菜单栏（MenuBar）、工具栏（ToolBar）、内容区域（Content Area）、状态栏（Status Bar）

可以理解为和QMainWindow差不多；

2.1、使用示例

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.0

ApplicationWindow {
    id: window
    visible: true   //ApplicationWindow默认是不可见的
    width: 1280;
    height: 720;

    menuBar: MenuBar {
        Menu {
            id: menuFile
            title: qsTr("文件")
            MenuItem {
                text: "New"
                onTriggered: document.reset()
            }
            MenuItem {
                text: "Open"
                onTriggered: openDialog.open()
            }
            MenuItem {
                text: "Save"
                onTriggered: saveDialog.open()
            }
        }
        Menu {
            id: menuEdit
            title: qsTr("编辑")
            MenuItem {
                text: "放大"
                //onTriggered: document.reset()
            }
            MenuItem {
                text: "缩小"
                //onTriggered: openDialog.open()
            }
            MenuItem {
                text: "还原"
                //onTriggered: saveDialog.open()
            }
        }
    }

    header: ToolBar //header可以定位控件在窗口顶部
    {
        Row
        {
            spacing: 1
            ToolButton
            {
                text: 'ToolButton1'
                onClicked: console.log('Button1 Clicked.')
            }
            ToolButton
            {
                text: 'ToolButton2'
                onClicked: console.log('Button2 Clicked.')
            }
            ToolButton
            {
                text: 'ToolButton3'
                onClicked: console.log('Button3 Clicked.')
            }
        }
        background: Rectangle
        {
            anchors.fill:parent
            color:'#666666'
        }
    }

    TabView {
        id: myContent
        anchors.fill: parent
        Tab {
            title: "Red"
            Rectangle { color: "red" }
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }

    footer: StatusBar { //footer可以定位控件在窗口底部
        RowLayout {
            Label { text: "StatusBar" }
        }
    }
}