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")
            }
        }
    }
}

完！