QML Text元素

浅浅的花香味﹌ 2022-06-02 05:55 151阅读 0赞

QML中的Text元素可以用来显示纯文本或者富文本内容。

导入语句: import QtQuick 2.7  
继承:Item  
被继承: Label

**属性：**  
*baseUrl* : url \[此属性指定用于解析文本中相对URL的基本URL，baseUrl有效范围是文件夹路径，默认值是QML文件实例化文本项目的URL\]

![这里写图片描述][SouthEast]

Text { id: show width: 100 text:baseUrl }

![这里写图片描述][SouthEast 1]

关于baseurl该怎么使用，在什么情况下使用，这个我还没有在官方文档中找到实例，这个望大家谅解，这里只是说明有这么个属性。

*bottomPadding* : 距离容器底部的间距

Rectangle{ id:rct1 anchors.fill: show border.width: 1 }
    
            Text { id: show text:baseUrl+contentHeight.toString() }
    
    
            Rectangle{ id:rct2 anchors.fill: show1 border.width: 1 }
    
            Text { id: show1 text:baseUrl + contentHeight.toString() bottomPadding: 20 }

![这里写图片描述][SouthEast 2]

*clip : bool*  
该属性指示文本内容是否会被裁剪

Column{ x:50 y:30 spacing: 10 Text { id: show width: 10 text:baseUrl clip: true }
            Text { id: show2 width: 10 text:baseUrl clip: false }
        }

![这里写图片描述][SouthEast 3]

*color : color*  
该属性设置文本颜色

Text { id: show text:baseUrl color: "#00FF00" }
            Text { id: show2 text:baseUrl color: "#FF33DD" }

![这里写图片描述][SouthEast 4]

当然这里还可以使用svg颜色名称来指定颜色：

Text { id: show2 text:baseUrl color: "steelblue" }

![这里写图片描述][SouthEast 5]

下面顺便贴出常用的SVG颜色名称表：  
![这里写图片描述][SouthEast 6]

![这里写图片描述][SouthEast 7]

![这里写图片描述][SouthEast 8]

*elide : enumeration*  
当Text设置了明确的宽度后，该属性有效，取值如下：

Text.ElideNone - the default
    Text.ElideLeft
    Text.ElideMiddle
    Text.ElideRight

实例：

Text { id: show width: 50 text:"jklsdjflkasjdflksadjlfkjdslfkjsdlfjlsakdjfldskj" elide: Text.ElideLeft //左边显示省略符号 }
            Text { id: show2 width: 50 text:"jklsdjflkasjdflksadjlfkjdslfkjsdlfjlsakdjfldskj" elide: Text.ElideMiddle //中间显示省略符号 }
            Text { id: show3 width: 50 text:"jklsdjflkasjdflksadjlfkjdslfkjsdlfjlsakdjfldskj" elide: Text.ElideRight //右边显示省略符号 }
            Text { id: show4 width: 50 text:"jklsdjflkasjdflksadjlfkjdslfkjsdlfjlsakdjfldskj" elide: Text.ElideNone //不显示 }

运行结果：  
![这里写图片描述][SouthEast 9]

*font.bold : bool*  
设置文字粗体显示

Text { id: show text:"abcdef" font.bold: true//false-默认值 }

![这里写图片描述][SouthEast 10]

*font.capitalization : enumeration*  
文本内容显示大小写方式：

Font.MixedCase - 不改变
    Font.AllUppercase - 全部大写
    Font.AllLowercase - 全部小写
    Font.SmallCaps - 小型大写字母
    Font.Capitalize - 单词首字母大写

Text { text: "Hello"; font.capitalization: Font.AllLowercase }
            Text { text: "Hello"; font.capitalization: Font.AllUppercase }
            Text { text: "Hello"; font.capitalization: Font.Capitalize }
            Text { text: "Hello"; font.capitalization: Font.SmallCaps }
            Text { text: "Hello"; font.capitalization: Font.MixedCase }

![这里写图片描述][SouthEast 11]

*font.family : string*  
设置文字字体

ext { text:qsTr( "你好"); font.family:"宋体"}
            Text { text: qsTr("你好"); font.family:"微软雅黑"}
            Text { text: qsTr("你好"); font.family:"微软正黑体"}
            Text { text: qsTr("你好"); font.family:"仿宋_GB2312"}
            Text { text: qsTr("你好"); font.family:"华文楷体"}

![这里写图片描述][SouthEast 12]

*font.italic : bool*  
设置字体是否具有斜体样式

Text { text: "Hello"; font.italic: true; }

*font.letterSpacing : real*  
设置文本间距  
letterSpacing 会更改字体中单个字母之间的默认间距。 正值通过相应的像素增加字母间距; 负值会减小间距。

Text { text: "Hello";font.letterSpacing : 10;}
      Text { text: qsTr("你好");font.letterSpacing : 10;}

![这里写图片描述][SouthEast 13]

*font.pixelSize : int*  
*font.pointSize : real*

在QFont当中有两种方式设置字体大小，一种是PixelSize，另一种是PointSize

Point实际是磅，也就是 1/72 inch

我们可以从PainterDevice中得到当前DPI(Dot per inch)。因此 Pixel = DPI \* Point / 72

例如设置字体为20Point。 那么字体的像素大小是 90 \* 20 / 72 约等于 25.

可以将字体设置为25Pixel，看到字体的大小就是20Point和25Pixel大小是一样的。

QFont当中设置的大小，实际上字体的高度，由如下组成。

由PixelSize设置的高度，实际是Asent + 1像素(baseline的高度)。

在字体大小中涉及了以下知识：

DPI: Dot per inch，在显示器上也就是每英寸包含的像素。英尺的换算为 1 cm = 0.39 inch, 1 inch = 2.54 cm。

DPI 可以通过如下计算得来：

水平 dpi = 水平 resolution \* 2.54 / 显示器宽度

垂直 dpi = 垂直 resolution \* 2.54 / 显示器高度

pixel pitch（点距）: 像素点间距离。可以用25.4mm / DPI得到。

字体在屏幕上的实际大小 = 字体像素大小 \* 点距

大部分显示器的DPI为90.6左右，垂直和水平点距可能不一样。但windows为了方便就同一了点距，为96。

pixel size 是所占的像素大小 这样有一个缺点 有些显示器的分辨率(dpi)比较大 那么单位长度中的像素点就比较多 这样一个字所占的长度就会比较少

而 point size 则规定了实际中我们肉眼看到的字体的大小 他和pixel无关的～ 他和显示器无关 不管在什么样上的显示器上 规定大小是多少就是多少…

Text { text: "Hello";font.pixelSize: 20;}
     Text { text: "hello";font.pointSize: 20;}

![这里写图片描述][SouthEast 14]

*font.strikeout : bool*  
设置文字是否具有删除线

Text { text: "Hello";font.strikeout: true;}

![这里写图片描述][SouthEast 15]

*font.underline : bool*  
设置文字是否有下划线

Text { text: "Hello";font.underline: true;}

![这里写图片描述][SouthEast 16]

*font.weight : enumeration*  
设置文字权重，取值如下：

Text { text: "Hello";font.weight: Font.Thin;}
            Text { text: "Hello";font.weight: Font.Light;}
            Text { text: "Hello";font.weight: Font.ExtraLight;}
            Text { text: "Hello";font.weight: Font.Normal ;}
            Text { text: "Hello";font.weight: Font.Medium;}
            Text { text: "Hello";font.weight: Font.DemiBold;}
            Text { text: "Hello";font.weight: Font.Bold;}
            Text { text: "Hello";font.weight: Font.ExtraBold;}
            Text { text: "Hello";font.weight: Font.Black;}

![这里写图片描述][SouthEast 17]

*font.wordSpacing : real*  
设置单词间距

Text { text: "Hello world";font.wordSpacing : 10;}
       Text { text: "Hello world";font.wordSpacing : 20;}

![这里写图片描述][SouthEast 18]

\*horizontalAlignment : enumeration  
verticalAlignment : enumeration\*

设置字体横纵向布局  
The valid values for horizontalAlignment are Text.AlignLeft, Text.AlignRight, Text.AlignHCenter and Text.AlignJustify. The valid values for verticalAlignment are Text.AlignTop, Text.AlignBottom and Text.AlignVCenter.

Text { text: "Hello world";width:100;height:20;horizontalAlignment: Text.AlignLeft}
            Text { text: "Hello world";width:100;height:20;horizontalAlignment: Text.AlignRight}
            Text { text: "Hello world";width:100;height:20;verticalAlignment: Text.AlignBottom}
            Text { text: "Hello world";width:100;height:20;verticalAlignment: Text.AlignTop}

![这里写图片描述][SouthEast 19]

*style : enumeration*  
设置额外的文字样式：  
支持的样式：  
Text.Normal - the default  
Text.Outline  
Text.Raised  
Text.Sunken

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" } }

![这里写图片描述][SouthEast 20]

*textFormat : enumeration*  
字体格式：  
Text.AutoText (default)  
Text.PlainText  
Text.StyledText  
Text.RichText

Text {
 font.pointSize: 24
 text: "Hello World!"
 }
 Text {
 font.pointSize: 24
 textFormat: Text.RichText
 text: "Hello World!"
 }
 Text {
 font.pointSize: 24
 textFormat: Text.PlainText
 text: "Hello World!"
 }

![这里写图片描述][SouthEast 21]

[SouthEast]: /images/20220602/f4e445ff15fa435a8ea5724281b038e1.png
[SouthEast 1]: /images/20220602/4adff8ed48604e8e81c7f4b0231a1337.png
[SouthEast 2]: /images/20220602/32a8a9ab305b426fabf67048adf92fee.png
[SouthEast 3]: /images/20220602/5e652eadf3a04e729375330ad669a775.png
[SouthEast 4]: /images/20220602/c8b802330f0d4b6e9cf256946b0049b6.png
[SouthEast 5]: /images/20220602/def2be57f44945bea3a16d2b470cb925.png
[SouthEast 6]: /images/20220602/b5580ec57b924606a1dc7bcb22b09a6d.png
[SouthEast 7]: /images/20220602/dda4d9e2db334960b5bb1d597635fe4c.png
[SouthEast 8]: /images/20220602/8866bee4b78243abb15ab51983d3158d.png
[SouthEast 9]: /images/20220602/8e153e3278fd4875a641044596f507dd.png
[SouthEast 10]: /images/20220602/51ab25ae05614745911da94c563ef25a.png
[SouthEast 11]: /images/20220602/d20f5a188c7447aeb406a418002a9fbc.png
[SouthEast 12]: /images/20220602/1a61d0531f394be6a6fced5bf85631db.png
[SouthEast 13]: /images/20220602/98bbae65302143f4b489a90c9d181a67.png
[SouthEast 14]: /images/20220602/a85075893c644d658d1c8ee17b5da424.png
[SouthEast 15]: /images/20220602/b46ad53d8e8d4c8e90455632c0817ed9.png
[SouthEast 16]: /images/20220602/d40cde8392d546148bf1b8c78166b2d5.png
[SouthEast 17]: /images/20220602/4d3a5c1242884601aa8ca12afe859ae6.png
[SouthEast 18]: /images/20220602/a2d1172e0693468aa5a3d56df2929c24.png
[SouthEast 19]: /images/20220602/dae341fa849b4287945caedd37ecb0ea.png
[SouthEast 20]: /images/20220602/01d101576c04494c8e184cff0ac7c31d.png
[SouthEast 21]: /images/20220602/bf55bbc442a0497b8a379bd88a7ff6d9.png