QML Text元素

最新推荐文章于 2024-04-24 09:57:54 发布

rainynights

最新推荐文章于 2024-04-24 09:57:54 发布

阅读量1.9k

点赞数

分类专栏： Qt

本文链接：https://blog.csdn.net/qingyulove/article/details/78982619

版权

Qt 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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

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

这里写图片描述

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

这里写图片描述

关于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
        }

这里写图片描述

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

这里写图片描述

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

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

这里写图片描述

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

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

这里写图片描述

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

这里写图片描述

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 //不显示

        }

运行结果：
这里写图片描述

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

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

这里写图片描述

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 }

这里写图片描述

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:"华文楷体"}

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

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

这里写图片描述

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

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

这里写图片描述

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

这里写图片描述

font.wordSpacing : real
设置单词间距

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

这里写图片描述

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

这里写图片描述

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

这里写图片描述

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

  Text {
                font.pointSize: 24
                text: "<b>Hello</b> <i>World!</i>"
            }
            Text {
                font.pointSize: 24
                textFormat: Text.RichText
                text: "<b>Hello</b> <i>World!</i>"
            }
            Text {
                font.pointSize: 24
                textFormat: Text.PlainText
                text: "<b>Hello</b> <i>World!</i>"
            }

这里写图片描述

rainynights

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
QML Text元素

QML中的Text元素可以用来显示纯文本或者富文本内容。导入语句: import QtQuick 2.7 继承:Item 被继承: Label属性： baseUrl : url [此属性指定用于解析文本中相对URL的基本URL，baseUrl有效范围是文件夹路径，默认值是QML文件实例化文本项目的URL] Text { id: show width:
复制链接

扫一扫