【Qt】QML元素：ApplicationWindow与Window

﹏ヽ暗。殇╰゛Y 2022-10-23 11:13 279阅读 0赞

# 1 Window #

Window需要导入QtQuick.Window 。

# 2 ApplicationWindow #

ApplicationWindow需要导入QtQuick.Controls 。

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

## 2.1 界面详情 ##

菜单栏：MenuBar  
工具栏：ToolBar  
内容区域：Content Area  
状态栏：Status Bar  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70]  
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）尺寸。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>contentItem.minimumWidth</td> 
   <td>内容项的最小宽度</td> 
  </tr> 
  <tr> 
   <td>contentItem.minimumHeight</td> 
   <td>内容项的最小高度</td> 
  </tr> 
  <tr> 
   <td>contentItem.implicitWidth</td> 
   <td>内容项的隐式宽度</td> 
  </tr> 
  <tr> 
   <td>contentItem.implicitHeight</td> 
   <td>内容向的隐式高度</td> 
  </tr> 
  <tr> 
   <td>contentItem.maximumWidth</td> 
   <td>内容向的最大宽度</td> 
  </tr> 
  <tr> 
   <td>contentItem.maximumHeight</td> 
   <td>内容向的最大高度</td> 
  </tr> 
 </tbody> 
</table>

### 2.2.2 菜单栏 menuBar: MenuBar ###

![在这里插入图片描述][20210305100016500.png]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlZV9TdGFy_size_16_color_FFFFFF_t_70]: /images/20221023/bd9934f8da874020833236b3e876620a.png
[20210305100016500.png]: /images/20221023/572653e2c37845fa831805d9db9eee6a.png
[https_doc.qt.io_qt-5_qtquick-controls-styles-qmlmodule.html]: https://doc.qt.io/qt-5/qtquick-controls-styles-qmlmodule.html