QML Text部件的使用

一个简单的Text代码

Text {
    id: txt
    text: qsTr("文本123@abc\n数量的")
    color: "blue"
}

效果：

Text一般用于显示文本，例如可以给Button或者Rectangle等部件提供文本的显示；

1.文本常用

contentWidth 文本的宽度

contentHeight 文本的高度

lineCount 文本的行数

lineHeight 文本行之间的间距

Text {
    id: txt
    text: qsTr("文本123@abc\n数量的")
    color: "blue"

    lineHeight: 5   // 设置每一行文本的上下间距
    Component.onCompleted: {    // 程序启动时就会调用
        // 获取文本的宽度和高度
        console.log("文本的宽度:", contentWidth)
        console.log("文本的高度：", contentHeight)

        // 文本的行数
        console.log("lineCount:", lineCount)
        // 文本的行间距
        console.log("lineHeight:", lineHeight)
    }
}

font.bold 设置字体加粗

font.family 设置字体

font.italic 设置字体斜体

font.letterSpacing 设置文本左右间的间距例如：a b 你好 c

font.pixelSize 设置字体的像素大小，与磅值二选一

font.pointSize 设置字体的磅值大小，与像素二选一

font.underline 设置字体下划线

Text {
    id: txt
    text: qsTr("文本123@abc\n数量的")
    color: "blue"

    font.bold: true             // 字体加粗
    font.family: "华文隶书"     // 字体
    font.italic: true           // 斜体
    font.letterSpacing: 20      // 字之间的间距
    font.pixelSize: 20          // 字体的像素大小，与磅值二选一
    font.pointSize: 20          // 字体的磅值大小，与像素二选一
    font.underline: true        // 下划线
}

2.文本省略

当一个文本过长，超出显示区域时，那么就需要设置省略显示，才符合感官；

通过 elide 属性可以进行设置；

Text.ElideNone - the default
Text.ElideLeft
Text.ElideMiddle
Text.ElideRight

Rectangle {
    width: 100
    height: 50
    anchors.centerIn: parent    // 居中
    border.color: "black"

    Text {
        id: txt
        anchors.fill: parent
        text: qsTr("sdfljslkfjlsdfj苏我欸机构为根据")

        // 文本省略
        elide: Text.ElideRight  // Text.ElideLeft   Text.ElideMiddle
    }
}

3.文本显示格式

即可以支持富文本格式，即HTML格式，或者Markdown格式；

默认是支持html格式的；

Text.AutoText (default)
Text.PlainText
Text.StyledText
Text.RichText
Text.MarkdownText

Column {
      Text {
          font.pointSize: 16
          textFormat: Text.AutoText     // 默认文本格式，支持富文本(html语法)
          text: "<b>Hello</b> <i>World!</i>"
      }
      Text {
          font.pointSize: 16
          textFormat: Text.RichText     // 富文本格式(html语法)
          text: "<b>Hello</b> <i>World!</i>"
      }
      Text {
          font.pointSize: 16            // 纯文本格式
          textFormat: Text.PlainText
          text: "<b>Hello</b> <i>World!</i>"
      }
      Text {
          font.pointSize: 16            // Markdown格式
          textFormat: Text.MarkdownText
          text: "**Hello** *World!*"
      }
  }

4.文本换行

第二点介绍了太长可以省略，现在介绍如何换行；

换行有很多种方式，可以根据单词换行，直接换行等；

Text.NoWrap (default) - 默认
Text.WordWrap - 根据单词进行换行
Text.WrapAnywhere - 换行可以在一行中的任何一点完成，即使换行发生在一个单词的中间。
Text.Wrap - 如果可能，换行发生在字边界；否则，它将发生在行内适当的点，甚至在一个单词的中间。

一般我们只使用，Text.WordWrap

Rectangle {
    id: rect
    width: 100
    height: 150
    border.color: "black"

    Text {
        id: txt
        text: qsTr("hello how are you? i'm find. 谢谢，非常感谢！一二三四五六七八九十")
        anchors.fill: parent

        // Text.WordWrap：换行
        wrapMode: Text.WordWrap
    }
}

5.超链接

使用富文本方式即可获得超链接的效果；

text: <a href=\"http://qt-project.org\">Qt Project website</a>.

onLinkActivated: { } 点击超链接文本时触发，可以在这里处理页面跳转 link 可获得当前链接

onLinkHovered: { } 鼠标进来悬浮和出去时触发，link 可获得当前链接

onHoveredLinkChanged: { } 链接改变时触发，hoveredLink 可获得改变的链接

Rectangle {
    id: rect
    width: 300
    height: 150
    border.color: "black"

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

        // 点击文本超链接时触发
        onLinkActivated: {
            console.log(link + " link activated")
        }
        // 文本超链接，鼠标移动进来和出去触发
        onLinkHovered: {
            console.log("hover:", link)
        }
        // 文本超链接，改变时触发
        onHoveredLinkChanged: {
            console.log("hover link changed: ", hoveredLink)
        }
    }
}

如果希望鼠标悬浮时指针改变为手指，即改变鼠标光标，可以使用之前学习的 MouseArea 鼠标事件进行处理；

cursorShape: Qt.PointingHandCursor

不过需要注意的是，设置了鼠标事件，点击连接时 onLinkActivated: { } 就无法出发了，因为点击事件被鼠标给拦截了；

如果希望处理点击事件，就得在鼠标中使用 onClicked: { } 进行处理；

Rectangle {
    id: rect
    width: 300
    height: 150
    border.color: "black"

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

        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor

            // 如果设置了鼠标，那么点击时间只能在鼠标这里处理，因为被鼠标事件拦截了
            onClicked: {
                console.log("mouse link activated")
            }
        }
    }
}