Qt开发-QT Quick

前言

QT QuickQt 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) 布局的参数:

//左上右下对齐
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,会导致组件本身的特性不生效。

窗口设置

窗口的属性

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的父窗体就是桌面了)
}

无边框

Window {
    width: 640
    height: 480
    visible: true
    color: "#fefefe"
    title: qsTr("主页面")
    flags: "FramelessWindowHint"
}

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

Window {
    width: 640
    height: 480
    visible: true
    color: "#fefefe"
    title: qsTr("主页面")
    flags: "CustomizeWindowHint"
}

背景透明无边框窗口

Window {
    width: 640
    height: 480
    visible: true
    color: "#00000000"
    title: qsTr("主页面")
    flags: Qt.FramelessWindowHint
    opacity:1
}

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

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

组件

基本组件

Qt开发-QT Quick_第1张图片

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

  • MouseArea
  • Rectangle

定位组件和布局管理器

Qt开发-QT Quick_第2张图片

定位器(Row、Column、Grid、Flow)

布局管理器(RowLayout、ColumnLayout、GridLayout、StackLayout)

Layout

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

import QtQuick.Layouts 1.12

示例1

一个简单的示例

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

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
        }

    }
}

显示效果

Qt开发-QT Quick_第3张图片

其中

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

RowLayout {
    id: row
    height: 200
    width:parent.width
    spacing: 0
}

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

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

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

代码如下

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

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

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的事件

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 自动会发生相关信号

onChanged 这种格式

举例:

MouseArea {
    onPressedChanged: console.log("value:" , pressed)
}

方式2

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

signal  (type parameter, type parameter)

on

例如:

signal testSignal(real x, real b)
testSignal(x, b) //执行 也就是 发送信号 类似 quick 中的 emit signal()

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

举例:

Item {
    signal clickTest();
    
    MouseArea {
        onPressed: {
            clickTest()
        }
    }
     
    onClickTest: consloe.log("received")
}

方式3

适合一对多或者跨 QML 断开就使用 disconnect 就好

1 : 跟信号在同一个范围,可这么写

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:如果与信号不在同一范围

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 的东西 格式:

Connections {
    target: 信号的来源
    on:
}
Connections {
    target: mytest
    onTestT: {
        send21();
    }
}

你可能感兴趣的:(qt开发,qt,开发语言)