qml Text - KerwinKoo/KerwinKoo.github.io GitHub Wiki
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"; //设置内凹颜色
}
}