QML窗口

一、基本概念

QML 是一种描述性的脚本语言,文件格式以.qml结尾,是对 JavaScript  的一种扩展,用来描述基于 Qt 对象系统的用户界面。

QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互

二、QtCreator 中的 Qt Quick 的 Hello World

import QtQuick // 使用的QT6, find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)
import QtQuick.Window

Window {
    width: 500
    height: 300
    visible: true
    title: qsTr("Hello World")
}

三、QtQuick

这是最简单的QML,首先引入QtQuick。

引入的QtQuick是开发 QML 应用的一个包,提供了使用 QML 创建用户界面所需的一切东西,包括

  • 可视化的 Canvas
  • 用户输入
  • 元素定位与布局
  • 状态、过渡和动画
  • 数据模型、视图和数据存储
  • 粒子和图形特效
  • 方便类型

Qt Quick 提供了QML API 和 C++ API,也就是这个包里既有QML脚本语言的对象,方法,属性,也有C++语言可以调用的方法,还有QML和C++是交互的机制。

四、Window

窗口定义在QtQuick.Window中,默认带最大化、最小化、关闭、标题。

qml中即使不指定title属性,生成的窗口默认也会有title。

默认生成的窗口可以调整大小,可以拖动。

窗口中可以套窗口

Window {
    width: 500
    height: 300
    visible: true
    title: qsTr("Hello World 1")

    Window {
        width: 150
        height: 150
        visible: true
        title: qsTr("Hello World 2")
    }
}

加上属性 flags: Qt.Window | Qt.FramelessWindowHint 可以把标题栏去掉

去掉了包括最大化,最小化,关闭的标题栏,并且这时的窗口不可以拖动,不可调整大小,相当于是一个固定死的窗口。

flags 属性

窗口标志。窗口标志控制窗口在窗口系统中的外观,是对话框、弹出窗口还是常规窗口,以及是否应该有标题栏等。

Qt::Widget               //是一个窗口或部件,有父窗口就是部件,没有就是窗口

Qt::Window               //是一个窗口,有窗口边框和标题


flags: Qt.Window | Qt.FramelessWindowHint 无边框窗口

Qt::Dialog               //是一个对话框窗口

Qt::Sheet                //是一个有边框窗口

Qt::Drawer               //可拖动边框伸缩的窗口,从表现上看跟Qt.Sheet一样

Qt::Popup   
弹出式窗口,弹出的位置不依赖复窗口位置,独立存在。固定大小不可拖动边框

Qt::Tool                 //是一个工具窗口
比Dialog少个标题栏的logo menu

Qt::ToolTip              //是一个提示窗口,没有标题栏和窗口边框
风格同Popup一样,与Popup不同的是ToolTip依赖父窗口的位置


Qt::SplashScreen         //是一个欢迎窗口,是QSplashScreen构造函数的默认值
Qt::Desktop              //是一个桌面窗口或部件
Qt::Subindow            //是一个子窗口
这3个从展现风格上看跟正常Window没区别

添加窗口功能,窗口属性

Qt::MSWindowsFixedSizeDialogHint:Windows系统固定大小窄边框窗口。
Qt::CustomizeWindowHint:关闭默认窗口标题提示。
Qt::WindowTitleHint:为窗口修饰一个标题栏。
Qt::WindowSystemMenuHint:为窗口修饰一个窗口菜单系统。
Qt::WindowMinimizeButtonHint:为窗口添加最小化按钮。
Qt::WindowMaximizeButtonHint:为窗口添加最大化按钮。
Qt::WindowMinMaxButtonsHint:为窗口添加最大化和最小化按钮。
Qt::WindowCloseButtonHint:窗口只有一个关闭按钮。
Qt::WindowContextHelpButtonHint:为窗口添加一个"上下文帮助"按钮。
Qt::MacWindowToolBarButtonHint:在macOS上添加一个工具栏按钮。
Qt::WindowFullscreenButtonHint
Qt::BypassGraphicsProxyWidget:如果希望窗口小部件始终是桌面上的顶级窗口小部件,则可以设置此标志。
Qt::WindowShadeButtonHint:如果基础窗口管理器支持,则添加阴影按钮来代替最小化按钮。
Qt::WindowStaysOnTopHint:窗口在顶层。
Qt::WindowStaysOnBottomHint:窗口在底层。
Qt::WindowTransparentForInput:该窗口仅用于输出(显示某些内容)并且不接受输入。
Qt::FramelessWindowHint:生成无边框窗口。用户不能通过窗口系统移动或调整无边框窗口的大小。

如果想去掉某个属性就直接加~就可以了

可以代码中调用函数设置

setWindowFlags(windowFlags()& ~Qt::WindowMaximizeButtonHint);//去掉最大化按钮

最大最小尺寸控制

可以通过  maximumHeight,maximumWidth,minimumHeight,minimumWidth 来限制窗口的的最大最小尺寸。

 可以通过x, y坐标来控制窗口显示的位置

属性 active  

窗口的属性 active 是只读属性不可以设置

activeFocusItem 也是只读

如设置了 active: true,activeFocusItem: win1 编译会提示 Invalid property assignment: "active" is a read-only property。
   

背景色

通过 color 来设置背景色,通过opcity 来设置不透明度

模态设置

Qt::NonModal :表示该窗口不是模态窗口,不会阻止其他窗口的输入。
Qt::WindowModal :表示该窗口是单个窗口层次结构的模态,会阻止输入到其父窗口、所有祖父窗口以及其父窗口和祖父窗口的所有同级窗口。
Qt::ApplicationModal :表示该窗口是应用程序的模态窗口,会阻止本应用所有窗口的输入。

modality: Qt.WindowModal

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 在QML中,我们可以使用ListView实现窗口跳转功能。下面是一种常见的实现方式: 首先,我们需要一个存储窗口信息的模型。可以使用一个自定义的数据模型来实现,也可以使用Qt提供的ListModel。 接下来,我们在QML中创建一个ListView,并将该模型设置为其model属性。ListView会根据模型的内容自动生成相应的窗口。 在ListView的delegate属性中,我们可以定义窗口的外观和交互方式。可以使用Rectangle或Item作为窗口的外观,根据需要进行定制。 在窗口外观的交互部分,我们可以添加一个MouseArea来接收鼠标点击事件。在该事件的处理函数中,我们可以获取点击的索引值,并根据需求执行相应的窗口跳转操作。 对于窗口跳转操作,有多种方式可供选择。例如,我们可以使用StackView或StackWindow来进行窗口切换。也可以直接更改显示内容的属性值,实现窗口内容的动态刷新。 在实际开发中,还可以根据具体需求进行更多的定制。例如,可以添加动画效果、设置窗口间的传参、处理窗口关闭等。 总之,使用ListView实现窗口跳转功能的基本步骤包括:创建一个存储窗口信息的模型、将其设置为ListView的model属性、在delegate中定义窗口的外观和交互方式、处理窗口的跳转操作。通过这种方式,我们可以方便地实现在QML中的窗口跳转。 ### 回答2: 在QML中,要实现ListView的窗口跳转,可以通过以下步骤来实现: 1. 创建至少两个QML文件,分别表示不同的窗口。例如,我们可以创建一个名为"MainPage.qml"的主页面和一个名为"DetailPage.qml"的详细页面。 2. 在"MainPage.qml"中创建一个ListView,并设置model为一个代表数据源的ListModel,例如: ListView { model: myModel delegate: Item { // 设置列表项的外观 } } 3. 在"MainPage.qml"中,为ListView的每个列表项添加一个点击事件处理函数,当点击某个列表项时,触发该事件。在该事件处理函数中,可以执行窗口跳转的逻辑,例如: ListView { //... delegate: Item { //... MouseArea { //... onClicked: { // 执行窗口跳转逻辑,例如: var component = Qt.createComponent("DetailPage.qml"); if (component.status === Component.Ready) { var detailPage = component.createObject(parent); // parent为当前页面的父项 // 可以传递数据给DetailPage.qml,例如: detailPage.itemData = model.get(index); } } } } } 4. 在"DetailPage.qml"中,根据需求设计详细页面的布局和内容。 通过以上步骤,当在"MainPage.qml"的ListView中点击某个列表项时,会触发相应的事件处理函数,在该函数中创建并显示"DetailPage.qml"的实例,并根据需要进行数据传递。这样就实现了QML中ListView的窗口跳转。 ### 回答3: QML 中的 ListView 是一个用于显示一个可滚动的列表的控件,它可以用于在窗口中展示一组数据。要实现窗口跳转,可以通过以下步骤: 1. 首先,确保在 QML 中引入 QtQuick 模块,以便使用 ListView 组件: ```qml import QtQuick 2.0 ``` 2. 创建一个 ListView 组件并指定其属性,比如宽度、高度、布局方向等等。 ```qml ListView { width: 200 height: 300 orientation: ListView.Vertical // 设置布局方向为垂直 model: ListModel { ... } // 设置列表的数据 } ``` 3. 在 ListView 的 model 属性中,通过 ListModel 创建一个数据模型,定义列表的内容。可以使用自定义的对象或者简单的字符串等。 ```qml model: ListModel { ListElement { text: "Item 1" } // 第一个列表项 ListElement { text: "Item 2" } // 第二个列表项 // ... } ``` 4. 在 ListView 的 delegate 属性中,定义每个列表项的外观。可以使用自定义的组件或者内置的 Item 组件。 ```qml delegate: Item { width: parent.width height: 50 Rectangle { width: parent.width height: parent.height color: index % 2 === 0 ? "lightgray" : "white" // 每隔一个变换背景色 Text { anchors.centerIn: parent text: model.text // 显示列表项的文本 } MouseArea { anchors.fill: parent onClicked: { // 在此处进行窗口跳转操作,比如使用 StackView 或改变当前窗口的 visible 属性等 } } } } ``` 5. 在 MouseArea 的 onClicked 信号中编写窗口跳转的代码。具体的实现方式取决于你使用的窗口管理器或导航机制。 以上就是利用 QML 中的 ListView 组件实现窗口跳转的基本步骤。根据具体的需求,你可能需要进一步扩展和优化代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tangcpp

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值