加载中…QML-Text实战
(2013-10-30 09:24:29)
标签：
qmltextqml之texttext实战 |
分类： QML |
一、属性
1、文本、颜色、斜体、下划线、大小等
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text {
}
Text {
}
Text {
}
Text {
}
Text {
}
Text {
}
Text {
}
Text {
}
}
效果：
如图：
text：显示的文本
color：文本颜色
font.family：字体
font.italic：是否斜体
font.strikeout: 是否删除线
font.underline：是否下划线
font.bold：是否粗体
font.pixelSize：字体大小（像素为单位）
font.pointSize：字体大小（点为单位）
2、字体样式
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text {
}
Text {
}
Text {
}
Text {
}
Text {
}
}
效果：
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text {
}
Text {
}
}
效果：
如图：
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text {
}
Text {
}
Text {
}
Text {
}
}
效果：
当设置elide时，在一个定长的范围内显示一个长字符串，则会根据elide的值来进行确定显示方式：
Text.ElideNone - 默认值，进行完全显示
Text.ElideLeft
- 左边显示3个点
Text.ElideMiddle - 中间显示3个点
Text.ElideRight - 右边显示3个点
5、间距
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
Text {
}
Text {
}
Text {
}
}
效果：
如图：
letterSpacing 为单个字母之间的距离，wordSpacing 为单个单词之间的距离
6、字体风格、风格颜色
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text {
}
Text {
}
Text {
}
Text {
}
}
效果：
如图：
style：定义文本的样式
styleColor：定义文本样式所使用的辅助色。
styleColor被用作文本的轮廓颜色，凸起或凹陷的文字阴影颜色。如果没有指定样式，则不起作用。
7、大小写
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text {
}
}
Text {
}
Text {
}
Text {
}
}
效果：
如图：
Font.MixedCase - 正常情况
Font.AllUppercase - 设置为大写字母
Font.AllLowercase - 设置为小写字母
Font.SmallCaps - 设置为小型大写字母
Font.Capitalize -
每一个单词的第一个字母大写
8、换行
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
x:100
y:30
spacing: 10
Text{
}
Text{
}
Text{
}
Text{
}
}
效果：
如图：
设置属性为换行的文字文本项的宽度。如果一个指定的宽度已设置则文本会收缩。
Text.NoWrap (default) -
没有设置换行。如果文本中包含换行符不足，则contentWidth将超过设定宽度。
Text.WordWrap -
仅在字边界收缩。如果一个单词太长，contentWidth将超过一组宽度。
Text.WrapAnywhere -
在行上的任何一点都有可能换行，即使它发生在中间的一个文字。
Text.Wrap -
如果可能的话，在单词边界换行，否则在适当的点，即使是在中间的一个字。
二、信号
例：
import QtQuick 2.0
import QtQuick.Window 2.1
Window {
anchors.centerIn: parent
font.pointSize: 16
text: "See the Qt Project
website."
onLinkActivated:
Qt.openUrlExternally(link)
}
效果：
如图：
点击链接就会跳转至“http://qt-project.org”对应的Qt页面。
注：
喜欢
0
赠金笔
前一篇：QML之Text
后一篇：QML之Button