Qt 5.4 QML Text 显示文本

Question

Text 元素可以显示纯文本或者富文本（使用 HTML 标记修饰的文本）。它有 font / text / color / elide / textFormat / wrapMode / horizontalAlignment / verticalAlignment 等等属性，你可以通过这些属性来决定 Text 元素如何显示文本。

当不指定 textFormat 属性时， Text 元素默认使用 Text.AutoText ，它会自动检测文本是纯文本还是富文本，如果你明确知道要显示的是富文本，可以显式指定 textFormat 属性。

代码示例

下面是一个简单示例，显示蓝色的问题，在单词分界处断行：

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Text {  
        width: 150;  
        height: 100;  
        wrapMode: Text.WordWrap;  //当长度不够显示时，在单词的中断处（空格）进行分行
        font.bold: true;  
        font.pixelSize: 24;  
        font.pointSize: 14;	//字体大小
        font.underline: true;  	//下划线
        text: "Hello Blue Text";  
        anchors.centerIn: parent;  //居中
        color: "blue";  	//字体颜色：蓝色
    }  
}  

下面的例子仅仅把 "Text" 字样以蓝色显示：

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Text {  
        width: 150;  
        height: 100;  
        wrapMode: Text.WordWrap;  
        font.bold: true;  
        font.pixelSize: 24;  
        font.underline: true;  
        text: "Hello Blue <font color=\"blue\">Text</font>";  
        anchors.centerIn: parent;  
    }  
}  

Text 元素的 style 属性提供了几种文字风格， Text.Outline 、 Text.Raised 、 Text.Sunken ，可以使文字有点儿特别的效果。而 styleColor 属性可以和 style 配合使用（如果没有指定 style ，则 styleColor 不生效），比如 style 为 Text.Outline 时，styleColor 就是文字轮廓的颜色。看个简单的示例：

import QtQuick 2.0  
  
Rectangle {  
    width: 300;  
    height: 200;  
    Text {  
        id: normal;  
        anchors.left: parent.left;  
        anchors.leftMargin: 20;  //左边距 20 像素
        anchors.top: parent.top;  
        anchors.topMargin: 20;  //上边距 20 像素
        font.pointSize: 24;  
        text: "Normal Text";  
    }  
    Text {  
        id: raised;  
        anchors.left: normal.left;  
        anchors.top: normal.bottom;  
        anchors.topMargin: 4;  
        font.pointSize: 24;  
        text: "Raised Text";  
        style: Text.Raised;  	//字体风格：隆起
        styleColor: "#AAAAAA" ;  
    }  
    Text {  
        id: outline;  
        anchors.left: normal.left;  
        anchors.top: raised.bottom;  
        anchors.topMargin: 4;  
        font.pointSize: 24;  
        text: "Outline Text";  
        style: Text.Outline;  	//轮廓外描线
        styleColor: "red";  	//描线颜色为红色
    }  
    Text {  
        anchors.left: normal.left;  
        anchors.top: outline.bottom;  	//以 outlin 的底部为该对象的顶部锚点
        anchors.topMargin: 4;  
        font.pointSize: 24;  
        text: "Sunken Text";  
        style: Text.Sunken;  	//字体凹陷
        styleColor: "#A00000";  //设置内凹颜色
    }  
}