【Qt】QML元素:ApplicationWindow与Window

1 Window

Window需要导入QtQuick.Window 。

2 ApplicationWindow

ApplicationWindow需要导入QtQuick.Controls 。

主要区别就是ApplicationWindow提供了简单的方式创建程序窗口,因为其有属性menuBar、toolBar、Tabview等属性,可以方便快速创建一个丰富的窗口。

2.1 界面详情

菜单栏:MenuBar
工具栏:ToolBar
内容区域:Content Area
状态栏:Status Bar
【Qt】QML元素:ApplicationWindow与Window_第1张图片
ApplicationWindow是Window的扩充版,在Window的基础上添加了很多新的元素,如:菜单栏(MenuBar)、工具栏(ToolBar)、状态栏(StatusBar)。

ApplicationWindow {
    id: window
    visible: true

    menuBar: MenuBar {
        Menu { MenuItem {...} }
        Menu { MenuItem {...} }
    }

    toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {...}
        }
    }

    TabView {
        id: myContent
        anchors.fill: parent
        ...
    }
}

注:ApplicationWindow默认情况下是不可见的。

2.2 属性(Properties)

2.2.1 内容项 contentItem: ContentItem

该组数据限制了内容项(content item)的尺寸。这个区域在工具栏和状态栏之间。共含有留个属性值分别描述最小(minimum)、隐式(impliciit)和最大(maximum)尺寸。

属性 描述
contentItem.minimumWidth 内容项的最小宽度
contentItem.minimumHeight 内容项的最小高度
contentItem.implicitWidth 内容项的隐式宽度
contentItem.implicitHeight 内容向的隐式高度
contentItem.maximumWidth 内容向的最大宽度
contentItem.maximumHeight 内容向的最大高度

2.2.2 菜单栏 menuBar: MenuBar

在这里插入图片描述

ApplicationWindow {
    ...
    menuBar: MenuBar {
        Menu {
            title: "File"
            MenuItem { text: "Open..." }
            MenuItem { text: "Close" }
        }

        Menu {
            title: "Edit"
            MenuItem { text: "Cut" }
            MenuItem { text: "Copy" }
            MenuItem { text: "Paste" }
        }
    }
}

2.2.3 状态栏 statusBar: Item

状态栏本身不提供布局(layout)方式,需要自己对内容进行布局,如使用RowLayout。

如果状态栏内只包含一项,将要对其所包含的内容进行resize以适应隐式高度。这使其特别适合于布局一起使用。否则,高度将取决于平台的高度。

import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0

ApplicationWindow {
    statusBar: StatusBar {
        RowLayout {
            anchors.fill: parent
            Label { text: "Read Only" }
        }
    }
}

2.2.4 风格 style: Componen

https://doc.qt.io/qt-5/qtquick-controls-styles-qmlmodule.html

2.2.5 工具栏 toolBar: Item

默认情况,该项不显示。

状态栏本身不提供布局(layout)方式,需要自己对内容进行布局,如使用RowLayout。

如果状态栏内只包含一项,将要对其所包含的内容进行resize以适应隐式高度。这使其特别适合于布局一起使用。否则,高度将取决于平台的高度。

ApplicationWindow {
    ...
    toolBar:ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                iconSource: "new.png"
            }
            ToolButton {
                iconSource: "open.png"
            }
            ToolButton {
                iconSource: "save-as.png"
            }
            Item { Layout.fillWidth: true }
            CheckBox {
                text: "Enabled"
                checked: true
                Layout.alignment: Qt.AlignRight
            }
        }
    }
}

你可能感兴趣的:(Qt,qt)