Skip to content
slint
// text-example.slintexport component TextExample inherits Window {    // Text colored red.    Text {        x:0; y:0;        text: "Hello World";        color: red;    }
    // This paragraph breaks into multiple lines of text.    Text {        x:0; y: 30px;        text: "This paragraph breaks into multiple lines of text";        wrap: word-wrap;        width: 150px;        height: 100%;    }}

用于显示文本的 Text 元素。

默认情况下,Text 元素的 min-widthmin-heightpreferred-widthpreferred-height 设置为适应完整文本,就好像文本显示在单行中一样 (除非文本包含显式的换行符)。 然而,如果将 wrap 属性设置为 word-wrap,和/或将 overflow 属性设置为 elide, 则 min-width 会减小为零,从而允许文本换行或被省略, 而 preferred-widthpreferred-height 保持不变。

属性

color

brush default: <depends on theme>

文本的颜色。

slint
Text {    text: "Hello";    color: #3586f4;    font-size: 40pt;}

text color

font-family

string default: ""

选择用于渲染文本的字体系列的名称。

slint
Text {    text: "CoMiC!";    color: black;    font-size: 40pt;    font-family: "Comic Sans MS";}

text font-family

Note

请确保在 Text 元素中使用字体之前先加载该字体。 更多内容请参阅 字体处理

font-size

length default: 0px

文本的字体大小。

slint
Text {    text: "Big";    color: black;    font-size: 70pt;}

text font-size

font-weight

int default: 0

字体的字重。值的范围从 100(最细)到 900(最粗)。400 是正常字重。使用 FontWeight 命名空间中的预定义常量。

slint
Text {    text: "BOLD";    color: black;    font-size: 30pt;    font-weight: FontWeight.extra-bold;}

text font-weight

font-italic

bool default: false

字体外观是否应绘制为斜体。

slint
Text {    text: "Italic";    color: black;    font-italic: true;    font-size: 40pt;}

text font-family

font-metrics

struct FontMetrics (out) default: a struct with all default values

缩放至该元素所使用的字体像素大小的字体设计度量。

FontMetrics

用于保存指定像素大小下字体度量的结构体。

  • ascent (length):基线到字体中最高字形顶部的距离。
  • descent (length):基线到字体中最高字形底部的距离。通常为负值。
  • x_height (length):基线到字体中最高字形水平中点的距离,如果字体未指定则为 0。
  • cap_height (length):基线到字体中常规大写字形顶部的距离,如果字体未指定则为 0。

horizontal-alignment

enum TextHorizontalAlignment default: the first enum value

slint
Text {    x: 0;    text: "Hello";    color: black;    font-size: 40pt;    horizontal-alignment: left;}

text-horizontal-alignment

TextHorizontalAlignment

此枚举描述了 TextStyledText 元素沿水平轴的不同对齐方式。

  • start:文本将与包含框的起始边缘对齐。根据文本方向的不同,这可以是左对齐或右对齐。
  • end:文本将与包含框的结束边缘对齐。根据文本方向的不同,这可以是左对齐或右对齐。
  • left:文本将与包含框的左边缘对齐。
  • center:文本将在包含框内水平居中。
  • right:文本将与包含框的右边缘对齐。

letter-spacing

length default: 0px

字间距允许更改字形之间的间距。正值会增加间距,负值会减小距离。

slint
Text {    text: "Spaced!";    color: black;    font-size: 30pt;    letter-spacing: 4px;}

text-horizontal-alignment

overflow

enum TextOverflow default: the first enum value

当文本超出可用空间时,文本应如何表现。

TextOverflow

此枚举描述了当文本过宽而无法适应 TextStyledText 元素宽度时文本的显示方式。

  • clip:文本将被简单地裁剪。
  • elide:文本将被省略显示为

text

string default: ""

渲染的文本。

vertical-alignment

enum TextVerticalAlignment default: the first enum value

文本的垂直对齐方式。

TextVerticalAlignment

此枚举描述了 TextStyledText 元素沿垂直轴的不同对齐方式。

  • top:文本将与包含框的顶部对齐。
  • center:文本将在包含框内垂直居中。
  • bottom:文本将与包含框的底部对齐。

wrap

enum TextWrap default: the first enum value

slint
Text {    text: "This paragraph breaks into multiple lines of text";    font-size: 20pt;    wrap: word-wrap;    width: 180px;}

wrap

TextWrap

此枚举描述了当文本过宽而无法适应 TextStyledText 元素宽度时文本的换行方式。

  • no-wrap:文本不会换行,而是会溢出。
  • word-wrap:文本将尽可能在单词边界处换行,对于非常长的单词则可能在任意位置换行。
  • char-wrap:文本将在任何字符处换行。目前仅 Qt 和软件渲染器支持。

stroke

brush default: a transparent brush

用于文本轮廓的画刷。

slint
Text {    text: "Stroke";    stroke-width: 2px;    stroke: darkblue;    stroke-style: center;    font-size: 80px;    color: lightblue;}

text stroke

stroke-width

length default: 0px

文本轮廓的宽度。如果宽度为零,则将渲染为 1 个物理像素的细线描边。

stroke-style

enum TextStrokeStyle default: the first enum value

slint
Text {    text: "Style";    stroke-width: 2px;    stroke: #3586f4;    stroke-style: center;    font-size: 60px;    color: white;}

stroke-style

TextStrokeStyle

此枚举描述了 TextStyledText 元素中文本描边相对于字形边缘的位置。

  • outside:描边的内边缘位于文本的外边缘处。
  • center:描边的中心线位于文本的外边缘处,如 Adobe Illustrator 中所示。

可访问性

默认情况下,Text 元素具有以下可访问性属性:

  • accessible-role: text;
  • accessible-label: text;

基于 MIT 协议发布