属性

  2. advance : size
  3. antialiasing : bool
  4. baseUrl : url
  5. clip : bool
  6. color : color
  7. //字符内容宽高度
  8. contentHeight : real    
  9. contentWidth : real
  10. effectiveHorizontalAlignment : enumeration
  12. //字符超过显示长度省略显示
  13. elide : enumeration    
  14. Text.ElideNone - the default
  15. Text.ElideLeft
  16. Text.ElideMiddle
  17. Text.ElideRight
  19. //字体参数的设置
  20. font.bold : bool     粗体
  21. font.capitalization : enumeration
  22. font.family : string    字体类型
  23. font.hintingPreference : enumeration
  24. font.italic : bool 斜体
  25. font.kerning : bool
  26. font.letterSpacing : real 字母与字母之间的距离
  27. font.pixelSize : int    字体大小 像素做单位
  28. font.pointSize : real    字体大小  磅做单位
  29. font.preferShaping : bool
  30. font.strikeout : bool
  31. font.styleName : string
  32. font.underline : bool    下划线
  33. font.weight : enumeration
  34. font.wordSpacing : real
  35. fontInfo.bold : bool
  36. fontInfo.family : string
  37. fontInfo.italic : bool
  38. fontInfo.pixelSize : string
  39. fontInfo.pointSize : real
  40. fontInfo.styleName : string
  41. fontInfo.weight : int
  42. fontSizeMode : enumeration
  43. horizontalAlignment : enumeration
  44. hoveredLink : string
  45. lineCount : int        文本行数
  46. lineHeight : real    每行间隔高度
  47. lineHeightMode : enumeration
  48. linkColor : color
  49. maximumLineCount : int
  50. minimumPixelSize : int
  51. minimumPointSize : int
  52. renderType : enumeration
  53. style : enumeration
  54. styleColor : color
  55. text : string
  56. textFormat : enumeration
  57. //字体距离边框顶部距离
  58. topPadding : real
  59. padding : real
  60. //体距离边框左侧距离
  61. leftPadding : real
  62. //体距离边框底部距离
  63. bottomPadding : real
  64. //体距离边框右侧距离
  65. rightPadding : real
  66. truncated : bool
  67. verticalAlignment : enumeration
  68. wrapMode : enumeration     //换行方式 文本换行Text.WordWrap

信号

  1. lineLaidOut(object line)
  2. linkActivated(string link)
  3. linkHovered(string link)

方法

  1. forceLayout()
  2. linkAt(real x, real y)

显示文本你需要使用Text元素（Text Element）。它最值得注意的属性时字符串类型的text属性。这个元素会使用给出的text（文本）与font（字体）来计算初始化的宽度与高度。可以使用字体属性组来（font property group）来改变当前的字体，例如font.family，font.pixelSize，等等。改变文本的颜色值只需要改变颜色属性就可以了。

样式

  1. Column {
  2.         Rectangle{
  3.             width: 100
  4.             height: txt.contentHeight
  5.             opacity: 0.5
  6.             color: "blue"
  7.             Text {
  8.                 id: txt
  9.                 anchors.fill: parent
  10.                  text: "Hello World! 152285242151"
  11.                  font.family: "Helvetica"
  12.                  font.pointSize: 20
  13.                  elide: Text.ElideRight
  14.                  color: "red"
  15.                  leftPadding: 0
  16.     //             padding: 20
  17.     //             topPadding: 20
  18.     //             bottomPadding: 20
  19.              }
  20.         }
  22.          Text { font.pointSize: 24; text: "Normal" }
  23.          Text { font.pointSize: 24; text: "Raised"; style: Text.Raised; styleColor: "#AAAAAA" }
  24.          Text { font.pointSize: 24; text: "Outline";style: Text.Outline; styleColor: "red" }
  25.          Text { font.pointSize: 24; text: "Sunken"; style: Text.Sunken; styleColor: "#AAAAAA" }
  26.      }   Text {
  27.         text: "The quick brown fox"
  28.         color: "#303030"
  29.         font.family: "Ubuntu"
  30.         font.pixelSize: 28
  31.     }

image.png
文本可以使用horizontalAlignment与verticalAlignment属性来设置它的对齐效果。为了提高文本的渲染效果，你可以使用style和styleColor属性来配置文字的外框效果，浮雕效果或者凹陷效果。对于过长的文本，你可能需要使用省略号来表示，例如A very … long text，你可以使用elide属性来完成这个操作。elide属性允许你设置文本左边，右边或者中间的省略位置。如果你不想’….’省略号出现，并且希望使用文字换行的方式显示所有的文本，你可以使用wrapMode属性（这个属性只在明确设置了宽度后才生效）：

  1. Text {
  2.     width: 40; height: 120
  3.     text: 'A very long text'
  4.     // '...' shall appear in the middle
  5.     elide: Text.ElideMiddle    //省略。。。替换过长文本
  6.     // red sunken text styling
  7.     style: Text.Sunken
  8.     styleColor: '#FF4444'
  9.     // align text to the top
  10.     verticalAlignment: Text.AlignTop
  11.     // only sensible when no elide mode
  12.     // wrapMode: Text.WordWrap    //换行
  13. }

一个text元素（text element）只显示的文本，它不会渲染任何背景修饰。除了显示的文本，text元素背景是透明的。为一个文本元素提供背景是你自己需要考虑的问题。

文本内容格式的支持

  1. Column {
  2.          Text {
  3.              font.pointSize: 24
  4.              text: "<b>Hello</b> <i>World!</i>"
  5.          }
  6.          Text {
  7.              font.pointSize: 24
  8.              textFormat: Text.RichText   //富文本
  9.              text: "<b>Hello</b> <i>World!</i>"
  10.          }
  11.          Text {
  12.              font.pointSize: 24
  13.              textFormat: Text.PlainText    //纯文本
  14.              text: "<b>Hello</b> <i>World!</i>"
  15.          }
  16.          Text {
  17.              font.pointSize: 24
  18.              textFormat: Text.MarkdownText
  19.              text: "**Hello** *World!*"
  20.          }
  21.      }

image.png
注意
知道一个文本元素（Text Element）的初始宽度与高度是依赖于文本字符串和设置的字体这一点很重要。一个没有设置宽度或者文本的文本元素（Text Element）将不可见，默认的初始宽度是0。

显示超链接：

  1. Rectangle{
  2.         id: rect
  3.         width: 200
  4.         height: 50
  5.         border.color: "black"
  7.         Text {
  8. //             textFormat: Text.RichText
  9.              text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>."
  10.              MouseArea{
  11.                  anchors.fill: parent
  12.                  hoverEnabled: true
  13.                  cursorShape: Qt.PointingHandCursor //修改鼠标移动到文本上是图案
  14.                 onClicked: {
  15.                     //鼠标点击需要做的操作
  16.                 }
  17.              }
  19.              onLinkActivated: { //点击链接触发
  20.                  console.log(link + " link activated")
  21.              }
  22.              onLinkHovered: { //鼠标移动到文本上触发
  23.                  console.log("hover ",link)
  24.              }
  25.              onHoveredLinkChanged: {
  26.                  console.log("hover link changed: ",link)
  27.              }
  28.         }
  29.     }

image.png
注意
通常你想要对文本元素布局时，你需要区分文本在文本元素内部的边界对齐和由元素边界自动对齐。前一种情况你需要使用horizontalAlignment和verticalAlignment属性来完成，后一种情况你需要操作元素的几何形状或者使用anchors（锚定）来完成。