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.15

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible :true
    Rectangle
    {
        width:50;height: 50;
        border.color: "black"
    Text {
        id: text
        font.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: 2
        elide: 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.15

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible :true
    Column {
        Text {
            font.pointSize: 24//默认支持富文本
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
            font.pointSize: 24
            textFormat: Text.RichText //设置富文本
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
            font.pointSize: 24
            textFormat: Text.PlainText //设置普通字符串文本不进行转义
            text: "<b>Hello</b> <i>World!</i>"
        }
        Text {
            font.pointSize: 24
            textFormat: 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.15

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible :true
    Rectangle{
        id:rect
        width:100;height:200
        border.color: "black"
        Text{
            id:txt
            text:"<a href=\"https://www.baidu.com\">test test test test</a>"//使用html设置，注意href前不能有空格
            wrapMode: Text.WordWrap //设置换行方式，根据单词来换行
            anchors.fill: parent
            elide: Text.ElideRight
            MouseArea{
                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.15

Window {
    visible: true

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // Qt.quit();
        }
    }
    MouseArea{
        anchors.centerIn: parent
        width: hp.width
        height: hp.height
        hoverEnabled: true
        cursorShape: containsMouse ? (pressed ? Qt.ClosedHandCursor : Qt.OpenHandCursor) : Qt.ArrowCursor

        Text {
            id: hp
            text: "<a href='http://www.baidu.com'><h1>点击进入首页</h1></a>"
            anchors.centerIn: parent
            onLinkActivated: 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.15

Window{
    width:500
    height:500
    title: "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:rect
        width:200
        height:100
        visible:true
        // color:"black"
        // z:1
    }
    Popup{
        id:rect1
        width:200
        height:100
        visible:true
        // color:"blue"
        x:100
    }


    // Button{
    //     width:50;height:50
    //     onClicked: {
    //         popup.open() //open打卡，close关闭，相当于修改visible属性
    //     }

    // }

    //存在两个坑
    Popup{  //类似于Rectangle
        id:popup
        x:100
        y:100
        width:200;height:300
        visible: true
        Component.onCompleted: { //一般的信号前面都要加on
            console.log(visible) //默认的时候是false不显示，可以手动让他显示。
        }
    }
}

使用多文件加载的Popup例子

MyPopup.qml

import QtQuick 2.12
import QtQuick.Controls 2.15

Popup {
    id:popup
    x:100;y:100
    width:400;height:300
    visible:true
    // closePolicy:Popup.CloseOnEscape|Popup.CloseOnPressOutsideParent
    closePolicy: Popup.NoAutoClose //可以设置不自动关闭，设置后怎么点击都关闭不了
    modal:true //模态对话框，必须先处理对话框内部的逻辑
    // dim:true //默认为true，背景是深灰色，false是白色 ,控制非模态对话框的背景颜色
    // The default value is Popup.CloseOnEscape | Popup.CloseOnPressOutside.默认值点击外部或者按下esc退出

    enter: Transition { //打卡的时候
        NumberAnimation{
            property: "opacity"
            from:0.0
            to:1.0
            duration: 1000
        }
    }
    //不能和下方一起使用
    // background:Rectangle{
    //     color:"gray"
    // }

    contentItem: Rectangle{ //控件的绘制属性
        anchors.fill: parent
        color:"gray"
        Text{
            id:txt
            anchors.fill: parent
            text:"Message Box Area!"
            font.pixelSize: 30
            wrapMode: Text.WordWrap
        }

        Button{
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 30
            anchors.right: parent.right
            anchors.rightMargin: 30
            text:"cancel"
        }

        Button{
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 30
            anchors.right: parent.right
            anchors.rightMargin: 230
            text:"ok"
        }

    }


    Overlay.modal:Rectangle{ //对话框是模态时，背景色为浅蓝色，需要设置dim:false,modal:true
        anchors.fill: parent
        // color:"lightsteelblue" //英文设置颜色
        // color:"#FF0000" //RGB的16进制
        color:"#33000000" // RGBA 前2位是透明度

        Popup{ //overlay类中存在的Popup则按钮可以点击
        width:parent.width;height:80
        visible:true
        background:Rectangle{
            // color:"transparent" //设置为透明色，
            color:"gray"
        }
        Button{
            width:50;height:50
            anchors.right: parent.right
            onClicked: {
                console.log("click")
            }
        }

        }
    }

    Overlay.modeless:Rectangle{ //对话框是模态时，背景色为颜色，需要设置dim:true,modal:false
        anchors.fill: parent
        color:"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.15

Window{
    width:500
    height:500
    title: "Mouse Area"
    visible :true


    Button{
        width:50;height:50
        onClicked: {
            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.15

Window{
    width:800
    height:600
    title: "Mouse Area"
    visible :true

    Repeater{ //设置重复控件 转轮手枪；连发枪
        //循环几次
        // 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)
        }
    }



}