QT之QML从入门到精通（第四章）

Text使用

许许多多的控件都继承于此控件，比较重要。

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window{width:500height:500title: "Mouse Area"visible :trueRectangle{width:50;height: 50;border.color: "black"Text {id: textfont.bold: true //设置粗体font.family: "Courier New" //设置字体text: qsTr("text 99999\n999999\n999999\n99999999123 ") //设置文本color:"red" //设置字体颜色font.italic: true;//设置斜体font.letterSpacing: 10 //设置字体之间的距离// font.pointSize: 36 //以榜为单位// font.pixelSize: 30 // 字体的大小像素为单位font.underline: true //设置下划线lineHeight: 2elide: Text.ElideRight //当文字过长是省略右边文件，需要和下方属性配合使用：有左边 中间 右边三个选项anchors.fill: parent//设置控件填充为父部件Component.onCompleted: { //组件加载完成时调用console.log(contentWidth) //打印内容的宽度console.log(contentHeight) //打印内容的高度console.log(lineCount) //返回字体的行数console.log(lineHeight)//每行文本的间隔高度}}}
}

Text控件格式化

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window{width:500height:500title: "Mouse Area"visible :trueColumn {Text {font.pointSize: 24//默认支持富文本text: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 24textFormat: Text.RichText //设置富文本text: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 24textFormat: Text.PlainText //设置普通字符串文本不进行转义text: "<b>Hello</b> <i>World!</i>"}Text {font.pointSize: 24textFormat: Text.MarkdownText //设置markdown语法文本text: "**Hello** *World!*"}}}

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window{width:500height:500title: "Mouse Area"visible :trueRectangle{id:rectwidth:100;height:200border.color: "black"Text{id:txttext:"<a href=\"https://www.baidu.com\">test test test test</a>"//使用html设置，注意href前不能有空格wrapMode: Text.WordWrap //设置换行方式，根据单词来换行anchors.fill: parentelide: Text.ElideRightMouseArea{anchors.fill: parent // 控件填充，不过会填充整个区域，点击文字外也会响应hoverEnabled: true //开启悬停cursorShape: Qt.PointingHandCursor //改变光标的形状，但是此时点击时不会触发onLinkActivated事件因为被拦截了onClicked: {console.log("onclicked:") //当链接被点击时，输出链接}}onLinkHovered: {console.log("hover",link) //链接悬停时触发信号}onHoveredLinkChanged: {console.log("onHoveredLinkChanged",link) //悬停离开时触发}onLinkActivated: {console.log(link) //当链接被点击时，输出链接Qt.openUrlExternally(link) //打开超链接}}}
}

text打开超链接

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window {visible: trueMouseArea {anchors.fill: parentonClicked: {// Qt.quit();}}MouseArea{anchors.centerIn: parentwidth: hp.widthheight: hp.heighthoverEnabled: truecursorShape: containsMouse ? (pressed ? Qt.ClosedHandCursor : Qt.OpenHandCursor) : Qt.ArrowCursorText {id: hptext: "<a href='http://www.baidu.com'><h1>点击进入首页</h1></a>"anchors.centerIn: parentonLinkActivated: Qt.openUrlExternally(link)}}}

Popup的绘制与Overlay的使用

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window{width:500height:500title: "Mouse Area"visible :true// // 坑一：// Rectangle{//     width:200;height:100//     visible:false //这里qml有一个逻辑，就是如果父控件设置为false，则他的子控件都不显示，但是Popup是一个例外,父控件为false是，子控件的Popup显示，但是父控件是Popup会不显示//     // color:"black"//     Popup{//         width:50;height:50//         visible:true//         // color:"red"//     }// }// 坑二：// Popup的z顺序是一个例外，z影响与其他Popup之间的顺序，不影响与其他之间的顺序Rectangle{id:rectwidth:200height:100visible:true// color:"black"// z:1}Popup{id:rect1width:200height:100visible:true// color:"blue"x:100}// Button{//     width:50;height:50//     onClicked: {//         popup.open() //open打卡，close关闭，相当于修改visible属性//     }// }//存在两个坑Popup{  //类似于Rectangleid:popupx:100y:100width:200;height:300visible: trueComponent.onCompleted: { //一般的信号前面都要加onconsole.log(visible) //默认的时候是false不显示，可以手动让他显示。}}
}

使用多文件加载的Popup例子

MyPopup.qml

import QtQuick 2.12
import QtQuick.Controls 2.15Popup {id:popupx:100;y:100width:400;height:300visible:true// closePolicy:Popup.CloseOnEscape|Popup.CloseOnPressOutsideParentclosePolicy: Popup.NoAutoClose //可以设置不自动关闭，设置后怎么点击都关闭不了modal:true //模态对话框，必须先处理对话框内部的逻辑// dim:true //默认为true，背景是深灰色，false是白色 ,控制非模态对话框的背景颜色// The default value is Popup.CloseOnEscape | Popup.CloseOnPressOutside.默认值点击外部或者按下esc退出enter: Transition { //打卡的时候NumberAnimation{property: "opacity"from:0.0to:1.0duration: 1000}}//不能和下方一起使用// background:Rectangle{//     color:"gray"// }contentItem: Rectangle{ //控件的绘制属性anchors.fill: parentcolor:"gray"Text{id:txtanchors.fill: parenttext:"Message Box Area!"font.pixelSize: 30wrapMode: Text.WordWrap}Button{anchors.bottom: parent.bottomanchors.bottomMargin: 30anchors.right: parent.rightanchors.rightMargin: 30text:"cancel"}Button{anchors.bottom: parent.bottomanchors.bottomMargin: 30anchors.right: parent.rightanchors.rightMargin: 230text:"ok"}}Overlay.modal:Rectangle{ //对话框是模态时，背景色为浅蓝色，需要设置dim:false,modal:trueanchors.fill: parent// color:"lightsteelblue" //英文设置颜色// color:"#FF0000" //RGB的16进制color:"#33000000" // RGBA 前2位是透明度Popup{ //overlay类中存在的Popup则按钮可以点击width:parent.width;height:80visible:truebackground:Rectangle{// color:"transparent" //设置为透明色，color:"gray"}Button{width:50;height:50anchors.right: parent.rightonClicked: {console.log("click")}}}}Overlay.modeless:Rectangle{ //对话框是模态时，背景色为颜色，需要设置dim:true,modal:falseanchors.fill: parentcolor:"blue"}}

main.qml

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window{width:500height:500title: "Mouse Area"visible :trueButton{width:50;height:50onClicked: {console.log("btn clicked")popup.close()}}MyPopup{}
}

repeater

用于设置控件重复几次

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
import QtQuick.Layouts 1.15Window{width:800height:600title: "Mouse Area"visible :trueRepeater{ //设置重复控件 转轮手枪；连发枪//循环几次// model:3 //模型 可以是任何类型，数字代表是几个控件/模型model:["Button","Rectangle","MouseArea"] //数量还是3，读取list，可以获取model中的数据Button{y:index*50 //描述一个控件，通过index拿到每个控件width:100;height:40// border.width: 1// color:"yellow"text:modelData //modelData拿到model中的值}Component.onCompleted: {console.log(count)}}}