QML-Text

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    color: "white"
    title: qsTr("My QML")
    visible: true

    //一般文本
    Text{
        id:txt
        text: qsTr("Text")
        Component.onCompleted: {
            //打印宽高
            console.log(contentWidth)
            console.log(contentHeight)
        }
    }

    //放在Rectangle的text
    Rectangle{
        width: 200
        height: 200
        //放在父控件的正中心
        anchors.centerIn: parent
        //设置边框颜色
        border.color: "black"
        Text {
            id: txxt
            //超出右边框多余部分省略
            elide:Text.ElideRight
            anchors.fill: parent
            text: qsTr("text122222222222222222\ntext\ntext")
            //设置粗体
            font.bold: true
            //设置字体
            font.family: "Courier New"
            //设置斜体
            font.italic: true
            //字与字的间距
            font.letterSpacing: 10
            //字体大小 像素
            font.pixelSize: 20
            //字体大小第二种设置方式 磅
//            font.pointSize: 20
            //字体下划线
            font.underline: true
            //设置行间隔
            lineHeight: 1
            Component.onCompleted: {
                //行数
                console.log(lineCount)
                console.log(lineHeight)
            }


        }
    }

    //列表文本
    Column {
         Text {
             //默认 支持html
             font.pointSize: 24
             text: "<b>Hello</b> <i>World!</i>"
         }
         Text {
             //富文本 支持html
             font.pointSize: 24
             textFormat: Text.RichText
             text: "<b>Hello</b> <i>World!</i>"
         }
         Text {
             //纯文本 不解析 不支持html
             font.pointSize: 24
             textFormat: Text.PlainText
             text: "<b>Hello</b> <i>World!</i>"
         }
     }


    //自动换行
    Rectangle{
        id:rect
        y:120
        width: 50
        height: 50
        border.color: "black"
        Text {
            id: txxxt

            wrapMode: Text.WordWrap
            text: qsTr("text text text text text text")
            anchors.fill: parent
            elide: Text.ElideRight
        }
    }

    //文本超链接
    Text {

        y:200
        textFormat: Text.RichText
        text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."

        //鼠标悬停手势 会拦截 link activated
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: {
                console.log("mouse activated")
            }
        }

        //鼠标点击触发
        onLinkActivated: {
            console.log(link + "link activated")
        }
        //鼠标进入触发
        onLinkHovered: {
            console.log("hover",link)
        }
        //hoveredLink 改变触发
        onHoveredLinkChanged: {
            console.log("hover link changed:",hoveredLink)
        }
    }

}