1,文本
2,源码
import QtQuick 2.6
Rectangle{
property alias mouseArea: mouseArea
MouseArea{
id: mouseArea
anchors.fill: parent
}
Text{ //普通文本
x: 60
y: 100
color: "green" //颜色
font.family: "Helvetica" //字体
font.pointSize: 24 //大小
text: "Hello Qt Quick" //内容
}
Text{ //富文本
x: 60
y: 140
color: "green"
font.family: "Helvetica"
font.pointSize: 24
text: "<b>Hello </b><i>Qt Quick</i>" //Text元素支持用HTML类型标记定义富文本
}
Text{ //带样式的富文本
x: 60
y: 180
color: "green"
font.family: "Helvetica"
font.pointSize: 24
style: Text.Outline;styleColor: "blue" //设置文本样式和颜色
text: "<b>Hello </b><i>Qt Quick</i>" //Text元素支持用HTML类型标记定义富文本
}
Text{ //带省略的文本
x: 60
y: 220
width: 200
color: "green"
font.family: "Helvetica"
font.pointSize: 24
horizontalAlignment: Text.AlignLeft //在窗口中左对齐
verticalAlignment: Text.AlignTop //顶端对齐
elide: Text.ElideRight //设置省略文本的部分内容来适合Text的宽度
//如果没有对Text明确的width值,则elide不起作用
text: "Hello Qt Qucik"
}
Text{ //带省略的文本
x: 60
y: 260
width: 200
color: "green"
font.family: "Helvetica"
font.pointSize: 24
horizontalAlignment: Text.AlignLeft //在窗口中左对齐
wrapMode: Text.WrapAnywhere //指定换行
text: "Hello Qt Qucik"
}
}
//可以显示纯文本或者富文本
//Column{
// Text{
// text: "Hello World!"
// font.family: "Helvetica";
// font.pointSize: 24
// color: "red"
// }
// Text{
// text: {
// text: "<b>Hello</b><i>World!</i>"
// }
// }
//}
//文本省略
//Text中的elide属性可以设置省略文本的部分内容来适合Text项目的宽度,如果没有对Text明确设置width值,那么elide属性将不起作用
//Column{
// spacing: 20
// Text{
// width: 200
// text: "使文本在单行中对于超出部分不要进行省略"
// }
// Text{
// width: 200; elide: Text.ElideLeft;
// text: "使文本在单行中对于超出部分从左边进行省略"
// }
// Text{
// width: 200; elide: Text.ElideMiddle;
// text: "使文本在单行中对于超出部分从中间进行省略"
// }
// Text{
// width: 200; elide: Text.ElideRight;
// text: "使文本在单行中对于超出部分从右边进行省略"
// }
//}
//字体
//font.capitalization:大写策略(Font.MixedCase不改变大小写;Font.AllUppercase全部大写;Font.AllLowercase全部小写;Font.Capitalize将首字母大写)
//font.family: 字体族
//font.italic: 是否斜体
//font.letterSpacing: 字符间距
//font.pixelSize: 字体大小
//font.pointSize: 字体大小
//font.strikeout: 是否有删除线(true false)
//font.underline: 是否有下划线(true false)
//font.weight: 字体重量(Font.light,Font.Normal,Font.DemiBold,Font.Bold,Font.Black)
//font.wordSpacing: 单词间距(正值加大间距,负值减少间距)
//Column{
// width: 200; height: 200
// spacing: 10
// FontLoader{id: fixedFont; name: "Courier"}
// FontLoader{id: webFont; source:"http://www.mysite.com/myfont.ttf"}
// Text{text: "Fixe-size font"; font.family: fixedFont.name}
// Text{text: "Fancy font"; font.family: webFont.name}
//}
//对齐方式
//horizontalAlignment和verticalAlignment分别用来设置文本在Text项目区域中的水平对齐方式和垂直对齐方式
//Rectangle{
// width: 200; height: 200; color: "red"
// Text{
// width: 200; height: 200
// horizontalAlignment: Text.AlignHCenter
// verticalAlignment: Text.AlignVCenter
// text: "中心"
// }
//}
//文本样式
//使用Text的style属性可以设置文本的样式
//Row{
// Text{font.pointSize: 24; text: "Normal"}
// Text{font.pointSize: 24; text: "Raised"; style: Text.Raised; styleColor: "#AAAAAA"}
// Text{font.pointSize: 24; text: "Outline"; style: Text.Outline; styleColor: "red"}
// Text{font.pointSize: 24; text: "Sunken"; style: Text.Sunken; styleColor: "#AAAAAA"}
//}
//文本换行
//Text的wrapMode属性可以实现文本的自动换行,只有明确设置了Text的width属性时换行才会起作用
//Text.NoWrap(默认):不进行换行
//Text.WordWrap:在单词边界进行换行
//Text.WrapAnyWhere:只要达到边界,则会在任意点进行换行,甚至是在一个单词的中间
//Text.Wrap:如果可能,会尽量在单词边界进行换行,否则,会在任意点换行
Column{
spacing: 10
Text{width: 100; font.pointSize: 24; Text.wrapMode: "WordWrap"; text: "Normal"}
}
3,效果