QT学习二十一天 Quick 应用程序主窗口

Quick应用程序主窗口

Qt Quick Controls 模块最开始就是为了简化 Qt Quick 桌面程序开发而诞生的，提供了很多桌面应用程序主窗口相关控件，核心类型是 ApplicationWindow，该类型继承自 Window 类型。今天主要学习 Window、ApplicationWindow、菜单栏、容器类、弹出类等。

窗口 Window

新创建的 Qt Quick Application 项目默认使用 Window 为根对象，Window 对象可以为 Qt Quick 场景创建一个新的顶层窗口，一般的 Qt Quick 项目都可以将 Window 作为根对象。

• width、height 属性来设置 Window 大小
• x、y 属性来设置窗口在屏幕上的坐标位置，
• title 属性设置窗口标题
• color 属性设置窗口背景色
• opacity 属性设置窗口透明效果
• 窗口默认不显示，要将 visible 属性设置为 true 才显示

Window 类型提供了很多方法进行常用操作

• show() 显示窗口、showFullScreen() 全屏显示、showMaximized() 最大化显示、showMinimized() 最小化显示、showNormal() 正常显示
• hide() 隐藏窗口、close() 关闭窗口
  关闭窗口时，会发射 closing(CloseEvent close) 信号，可以在 onClosing 信号处理器中设置 close.accepted = false 强制窗口保持显示，从而在关闭窗口前完成一些操作。

Window 窗口也可以嵌套使用，或声明在一个 Item 对象中，通过 flags 属性指定窗口的类型 Qt.Dialog、Qt.Popup 等，通过 Qt::WindowType 关键字查看全部类型，通过 modality 属性指定窗口是否为模态，默认 Qt.NonModal 非模态，还有 Qt.WindowModal（阻塞父窗口）、Qt.ApplicationModal（阻塞整个应用） 两种模态形式，

import QtQuick
import QtQuick.Controls

Window{
	id:root
	property bool changed:true
	width:640;height:400;x:100;y:100
	visible:true;color:"lightblue";opacity:0.7
	title:qsTr("My Window")
	onClosing:(close) => {
		if (changed){
			close.accepted = false;
			dialog.show()
		}
	}
	
	Window {
		id:dialog
		width:300;height:200
		//窗口类型
		flags:Qt.Dialog
		//窗口模态
		modality:Qt.WindowModal
		Label{
			text:qsTr("确定要退出么？")
			x:120;y:50
		}

		Row{
			spacing:10;x:120;y:80
			Button{
				text:qsTr("确定")
				onClicked:{
					root.changed = false
					dialog.close()
					root.close()
				}
			}

			Button{
				text:qsTr("取消")
				onClicked:{
					dialog.close()
				}
			}
		}
	}
}

应用程序主窗口 ApplicationWindow

为了方便实现主窗口程序，可以使用 Window 的子类型 ApplicationWindow，该类型在 Window 的基础上增加了菜单栏 menuBar、头部 header、脚部 footer 这三个属性，可以指定自定义项目，一般的 Qt Quick Controls 项目都会使用 ApplicationWindow 作为根对象。

Application Window{
	visible:true
	menuBar：Menu bar{
	...
	}
	header:ToolBar{
	...
	}
	footer:TabBar{
	...
	}
	StackView{
		anchors.fill:parent
	}
}

QML 中，可以在子对象的任意位置引用根对象的 ID，这种方式一般情况下都很好用，但是对于可重用的独立 QML 组件来说，就不好用了。为解决这个问题，ApplicationWindow 提供了一组附加属性，可以从无法直接访问窗口的位置访问窗口及其组成部分，而不用指定窗口 ID。
这些附加属性包括

• ApplicationWindow.window、
• ApplicationWindow.menuBar、
• ApplicationWindow.header、
• ApplicationWindow.footer、
• ApplicationWindow.contentItem、
• ApplicationWindow. activeFocusControl等。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
   title: "My Application"
   width: 600; height: 450
   visible: true

   menuBar: MenuBar {
      id: menuBar

      Menu {
         id: fileMenu
         title: qsTr("文件")

         MenuItem {
            text: qsTr("关闭")
            icon.source: "close.png"
            onTriggered: close()
         }
         MenuSeparator {}
         MenuItem {
            text: qsTr("关于")
            icon.source: "about.png"
            onTriggered: popup.open()
         }
      }
   }

   header: ToolBar {
      RowLayout {
         anchors.fill: parent
         ToolButton {
            text: qsTr("<")
            visible: footerbar.currentIndex === 0
            enabled: stack.depth > 1
            onClicked: stack.pop()
         }
         ToolButton {
            text: qsTr(">")
            visible: footerbar.currentIndex === 0
            enabled: stack.depth < 3
            onClicked: stack.push(mainView)
         }
         PageIndicator {
            id: indicator
            visible: footerbar.currentIndex === 0
            count: stack.depth
            currentIndex: stack.depth
         }
         Label {
            text: "工具栏"
            elide: Label.ElideRight
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            Layout.fillWidth: true
         }
         ToolButton {
            text: qsTr("...")
            onClicked: popup.open()
         }
      }
   }

   Popup {
      id: popup
      parent: Overlay.overlay
      x: Math.round((parent.width - width) / 2)
      y: Math.round((parent.height - height) / 2)
      width: 250; height: 150
      modal: true; focus: true

      Label {
         id: label
         text: "这是个Popup"
         font.pixelSize: 16; font.italic: true
         x: Math.round((parent.width - width) / 2)
         y: Math.round((parent.height - height) / 2)
      }

      Button {
         text: "Ok"
         onClicked: popup.close()
         anchors.top: label.bottom; anchors.topMargin: 10
         anchors.horizontalCenter: label.horizontalCenter
      }
   }

   footer: TabBar {
      id: footerbar
      width: parent.width

      TabButton { text: qsTr("图片") }
      TabButton { text: qsTr("音乐") }
      TabButton { text: qsTr("视频") }
   }

   StackLayout {
      id: view
      currentIndex: footerbar.currentIndex
      anchors.fill: parent

      StackView { id: stack; initialItem: mainView }
      Rectangle { id: secondPage; color: "lightyellow" }
      Rectangle { id: thirdPage; color: "lightblue" }
   }

   Component {
      id: mainView
      Item {
         Rectangle {
            anchors.fill: parent
            Image { anchors.fill: parent; source: stack.depth + ".png" }
            Text { text: qsTr("页面") + stack.depth }
         }
      }
   }
}