Qt开发-QT Quick

2021-11-10 11:17:18 浏览数 (1)

前言

QT Quick和Qt widgets这两种技术，官方是强推QT Quick的。

QT Quick中布局一般有如下四种方式，

  1. 绝对坐标：x、y、z、width、height、top、left
  2. 锚(anchors) 布局
  3. 定位器（Row、Column、Grid、Flow）
  4. 布局管理器（RowLayout、ColumnLayout、GridLayout、StackLayout）

绝对布局很好理解，给值就显示，但是不灵活；

anchors 实际上是 Item 的一个属性集

Row 则是一个单独的 Item ，专门用来管理其它 Item 的，后面介绍的几种布局，也是类似的。

锚(anchors) 布局的参数：

代码语言：javascript复制
//左上右下对齐
anchors.left : AnchorLine
anchors.top : AnchorLine
anchors.right : AnchorLine
anchors.bottom : AnchorLine

//Margin
anchors.leftMargin : real
anchors.topMargin : real
anchors.rightMargin : real
anchors.bottomMargin : real
anchors.margins : real

//基线对齐及偏移
anchors.baseline : AnchorLine
anchors.baselineOffset : real


anchors.mirrored : bool
anchors.fill : Item

//居中与偏移
anchors.centerIn : Item
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real

其中

  • real 具体的数值
  • Item是组建的ID或者parent
  • bool是true或false
  • AnchorLine 示例anchors.horizontalCenter: parent.horizontalCenter

注意

不要在Row或RowLayout相关的组件中使用anchors，会导致组件本身的特性不生效。

窗口设置

窗口的属性

代码语言：javascript复制
Window {
	title: qsTr("一个普通标题窗口") //窗口标题
    width: 640  //宽度
    height: 480  //高度
    visible: true  //是否可见，缺省为true
    color: "#ffffff" //窗口背景色
    //#00000000 为窗口透明
    //QML支持black 等颜色样式（没有#）
    //QML支持#11cfff 等颜色样式
    //QML同样支持RGB格式
    flags:  Qt.Window  //窗口标志 说明是什么窗口 使用 | 分割，缺省为Qt.Window
    //Qt.Window 普通窗口模式，带标题栏
    //Qt.FramelessWindowHint 隐藏标题栏窗口
    opacity: 1 //透明度 数值区间为0~1 支持小数，缺省为1
    x:0 //位于父窗体的x位置，以左上角为起点，缺省为0 （此时window的父窗体就是桌面了）
    y:0 //位于父窗体的y位置，以左上角为起点，缺省为0 （此时window的父窗体就是桌面了）
}

无边框

代码语言：javascript复制
Window {
    width: 640
    height: 480
    visible: true
    color: "#fefefe"
    title: qsTr("主页面")
    flags: "FramelessWindowHint"
}

显示标题栏，但是没有关闭最大最小化按钮

代码语言：javascript复制
Window {
    width: 640
    height: 480
    visible: true
    color: "#fefefe"
    title: qsTr("主页面")
    flags: "CustomizeWindowHint"
}

背景透明无边框窗口

代码语言：javascript复制
Window {
    width: 640
    height: 480
    visible: true
    color: "#00000000"
    title: qsTr("主页面")
    flags: Qt.FramelessWindowHint
    opacity:1
}

opacity这个属性是对当前组件以及子组件都设置不透明度，所以不太适用

color: Qt.rgba(0,0,0,0)是对当前设置透明度，不会传到子组件

组件

基本组件

这里面的这几个内部也可以填充其它组件

  • MouseArea
  • Rectangle

定位组件和布局管理器

定位器（Row、Column、Grid、Flow）

布局管理器（RowLayout、ColumnLayout、GridLayout、StackLayout）

Layout

要使用layout布局的属性 需要引用

代码语言：javascript复制
import QtQuick.Layouts 1.12

示例1

一个简单的示例

横向分布，最后一个填充剩余空间。

代码语言：javascript复制
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true
    color: "#f3f3f3"
    title: qsTr("主页面")

    RowLayout {
        id: row
        height: 200
        spacing: 0
        anchors.left:parent.left
        anchors.right:parent.right

        Rectangle {
            id: rectangle
            width: 200
            height: parent.height
            color: "red"
        }
        Rectangle {
            id: rectangle2
            width: 200
            height: parent.height
            color: "green"
        }
        Rectangle {
            id: rectangle3
            height: parent.height
            color: "blue"
            Layout.fillWidth: true
        }

    }
}

显示效果

其中

代码语言：javascript复制
RowLayout {
    id: row
    height: 200
    spacing: 0
    anchors.left:parent.left
    anchors.right:parent.right
}

和

代码语言：javascript复制
RowLayout {
    id: row
    height: 200
    width:parent.width
    spacing: 0
}

是等效的，前者就用了锚(anchors) 布局

只有在Layout相关的空间中才能使用Layout.fillWidth: true相关的属性。

所以RowLayout可以实现元素填充剩余空间，而Row是不可以的，除非我们复制宽度是通过计算的值。

代码如下

代码语言：javascript复制
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true
    color: "#f3f3f3"
    title: qsTr("主页面")

    Row {
        id: row
        height: 200
        spacing: 0
        anchors.left:parent.left
        anchors.right:parent.right

        Rectangle {
            id: rectangle
            width: 200
            height: parent.height
            color: "red"
        }
        Rectangle {
            id: rectangle2
            width: 200
            height: parent.height
            color: "green"
        }
        Rectangle {
            id: rectangle3
            height: parent.height
            width: parent.width-rectangle.width-rectangle2.width
            color: "blue"
        }

    }
}

示例2

基本的事件和按钮按压变色及点击事件

代码语言：javascript复制
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true
    color: "#f3f3f3"
    title: qsTr("主页面")

    MouseArea {
        width: 200
        height: 200
        anchors.centerIn: parent
        Rectangle {
            id:myrect
            anchors.fill: parent
            color: "blue"

            Text {
                text: "点击"
                color: "white"
                font.pixelSize: 16
                anchors.centerIn: parent
            }
        }
        onClicked: {
               console.log("区域点击")
        }

        onPressedChanged: {
            if(pressed){
                myrect.color="green"
            }else{
                myrect.color="blue"
            }
            console.log(pressed)
        }
    }

    Component.onCompleted: {
        console.log("加载完毕")
    }

}

Rectangle的事件

代码语言：javascript复制
Rectangle {
    width: 600
    height: 400
    anchors.centerIn: parent
    color: "lightgray"
    TapHandler {
        //点击屏幕时，修改了pressed属性，触发onPressedChanged
        onPressedChanged: {
            console.log("press ? : ", pressed)
        }

        //长按时触发onLongPressed
        onLongPressed: {
            console.log("long pressed")
        }
    }
}

QML 信号与槽

方式1

对于 QML 中的属性如果其值发生改变， QML 自动会发生相关信号

on<Property>Changed 这种格式

举例：

代码语言：javascript复制
MouseArea {
    onPressedChanged: console.log("value:" , pressed)
}

方式2

比较适合在同一个 QML 文件内

代码语言：javascript复制
signal <name> (type parameter, type parameter)

on<Name>

例如：

代码语言：javascript复制
signal testSignal(real x, real b)
testSignal(x, b) //执行 也就是 发送信号 类似 quick 中的 emit signal()

onTestSignal: console.log("xxx")// 槽 用于接收信号

举例：

代码语言：javascript复制
Item {
    signal clickTest();
    
    MouseArea {
        onPressed: {
            clickTest()
        }
    }
     
    onClickTest: consloe.log("received")
}

方式3

适合一对多或者跨 QML 断开就使用 disconnect 就好 1 : 跟信号在同一个范围，可这么写

代码语言：javascript复制
signal sendSignal();
MouseArea { 
    sendSignal()
}

Component.onCompleted: {
    sendSignal.connect(send21)
    sendSignal.connect(send22)
    sendSignal.connect(send23)
}

function send21() {
    console.log("1: received signal");
}

function send22() {
    console.log("2: received signal");
}

function send23() {
    console.log("3: received signal");
}

2：如果与信号不在同一范围

代码语言：javascript复制
MyTest {
    signal testT()
    id : mytest
    MouseArea {
        onPressed: {
            mytest.testT()
        }
    }
}

Component.onCompleted: {
   mytest.testT.connect(send21)  // mytest.testT.disconnect(send21)
   mytest.testT.connect(send22)
   mytest.testT.connect(send23)
}

function send21() {
    console.log("1: received signal");
}

function send22() {
    console.log("2: received signal");
}

function send23() {
    console.log("3: received signal");
}

3、Connections 最主要的优势可以连接到没有定义在 QML 的东西 格式：

代码语言：javascript复制
Connections {
    target: 信号的来源
    on<Signal>:
}
代码语言：javascript复制
Connections {
    target: mytest
    onTestT: {
        send21();
    }
}
qt

0 人点赞