QML学习笔记(六)

本篇文章是对来自🤝BiliBili-清晨与猫鱼的QML教程的学习笔记，原视频链接👇
https://www.bilibili.com/video/BV1Ay4y1W7xd?spm_id_from=..search-card.all.click&vd_source=4079f59f2068471b4d379822052e0270

ApplicationWindow

一、描述

ApplicationWindow是一个窗口，增加了方便的定位项目，如菜单栏，工具栏和状态栏，以平台独立的方式。

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

二、属性

contentItem : ContentItem

该组保存内容项的大小限制。这是工具栏和状态栏之间的区域。当计算实际窗口的有效大小约束时，ApplicationWindow将使用这个作为输入。它拥有以下6个属性，用于描述最小、隐式和最大尺寸:

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

menuBar : MenuBar

这个属性保存菜单栏。
缺省情况下，不设置此值。
statusBar : Item

此属性保存状态栏Item。
它可以设置为任何Item类型，但通常与StatusBar一起使用。
缺省情况下，不设置此值。当您设置状态栏项时，它将自动锚定到应用程序窗口中。
style : Component

窗口的样式组件。
toolBar : Item

此属性保存工具栏项目。
它可以设置为任何Item类型，但通常与ToolBar一起使用。
缺省情况下，不设置此值。当您设置工具栏项时，它将自动锚定到应用程序窗口中。

三、示例

import QtQuick 2.14
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.15

ApplicationWindow {
    id : window
    width: 300
    height: 300
    visible: true
    title: qsTr("Hello World")
    
    minimumWidth:200          //窗口宽度最大值
    minimumHeight:200         //窗口高度最大值
    maximumWidth:300          //窗口宽度最小值
    maximumHeight:300         //窗口宽度最小值

    menuBar: MenuBar {        //菜单栏
        Menu {                //菜单
            title: "File"     //菜单标题
            MenuItem { text: "Open..." }  //子菜单
            MenuItem { text: "Close" }    //子菜单
        }    
        Menu {
            title: "Edit"
            MenuItem { text: "Cut" }
            MenuItem { text: "Copy" }
            MenuItem { text: "Paste" }
            }
         }
    statusBar: StatusBar {    //状态栏
        RowLayout {           //排列
            anchors.fill: parent
            Label { text: "Read Only" }
              }
         }
    toolBar:ToolBar {         //工具栏
         RowLayout {
             anchors.fill: parent
             ToolButton {     //工具按钮
                 text: "one"
             }
             ToolButton {
                 text: "two"
             }
             ToolButton {
                 text: "there"
             }
             Item { Layout.fillWidth: true }
             CheckBox {       //多选按钮
                 text: "Enabled"
                 checked: true
                 Layout.alignment: Qt.AlignRight
             }
             }
         }
    
        Rectangle{          //正方形,填充在内容区
            anchors.fill: parent
            color: "blue"
        }
        
        style:Component {   //风格化设置
                 id: redSquare

                 Rectangle {
                     color: "red"
                     width: 10
                     height: 10
                 }
             }

         Loader { sourceComponent: redSquare }    //加载具体实例
         Loader { sourceComponent: redSquare; x: 20 }
}

ApplicationWindow示例

附加信号及附加属性

可以附加在其他元素上的属性和信号

附加信号(Attached Signals)

以 destruction 的附加信号为例

complted()

在对象实例化后触发。一旦建立了完整的QML环境，这可以用于在启动时执行脚本代码
onCompleted信号处理程序可以在任何对象上声明。未定义运行处理程序的顺序。
注意:相应的处理程序是completed.onCompleted:{ }
destruction()

当对象开始销毁时发出。这可用于撤消响应completed()信号所做的工作，或应用程序中的其他命令性代码。
ondestroy信号处理程序可以在任何对象上声明。未定义运行处理程序的顺序。
注意:对应的处理程序是 completed.onDestruction:{ }

Window {
    id : window
    width: 300
    height: 300
    visible: true
    title: qsTr("Hello World")

   Component.onCompleted:{
       console.log("window 构造完成")
   }
   Component.onDestruction:{
       console.log("window 析构完成")
   }
   Rectangle{
       anchors.fill: parent
       color: "red"

       Component.onCompleted:{
           console.log("Rectangle 构造完成")
       }
       Component.onDestruction:{
           console.log("Rectangle 析构完成")
       }
   }
}

附加信号

附加属性

以 ScrollBar 附加属性为例

void decrease()