Rectangle {
    Text {
        text: "Hello World!"
        font.family: "Helvetica"
        font.pointSize: 24
        color: "red"
    }
    Text {
        y:34;
        text: "<b>Hello</b> <i>World!</i>"; // <b>粗体 <i>斜体
    }
}

图片.png

如果高度和宽度没有明确设置，文本将尝试确定需要多少空间并设置它。除非设置WrapMode，否则它总是会适配宽度而不是高度（所有的文本将被放置在一个单一的线）。

elide属性可控制单行普通文本与宽度的匹配关系，分为默认、左边、中间、右边，类似于alignLedt、alignCenter、aliginRight。

注意，支持的html子集是有限的。另外，若文本包含HTML IMG标签，当标签加载远程图片时，文本将会重新载入。

本Text是只可读的，若需要可编辑的文本，元素TextEdit可满足要求。

属性

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

图片.png

Rectangle {
    Text {
        text: baseUrl;
    }
}

clip : bool [此属性保留文本是否被剪裁。请注意，如果文本不适合在边框中，它将被突然切割。如果想在有限的空间中显示潜在的长文本，可用省略代替。]
color : color [文本颜色]
contentHeight : real [内容高度]

Rectangle {
    Text {
        id: demo;
        text: baseUrl;
    }
    Text {
        id: demo2;
        y: demo.contentHeight;
        text: "第一行文本的contentWidth:" + demo.contentWidth + ",contentHeight:" + demo.contentHeight;
    }
    Rectangle {
        y: demo.contentHeight + demo2.contentHeight;
        width: demo.width;
        height: demo.height;
        color: "gray";
    }
}

图片.png

contentWidth : real [内容宽度，参考上面contentHeight]
effectiveHorizontalAlignment : enumeration [水平位置，作用暂时不知]

horizontalAlignment: Text.AlignLeft, Text.AlignRight, Text.AlignHCenter, Text.AlignJustify. 
verticalAlignment  : Text.AlignTop, Text.AlignBottom ,Text.AlignVCenter

elide : enumeration [设置次属性是为了让文本适应宽度]

Text.ElideNone  // 文本会都要显示
Text.ElideLeft   // 文本超出设定的长度，左边显示…
Text.ElideMiddle // 文本超出设定的长度，中间显示…
Text.ElideRight  // 文本

示例代码

Rectangle {
    Text {
        width: 50;
        elide: Text.ElideLeft;
        text: baseUrl;
    }
    Text {
        x: 60;
        width: 50;
        elide: Text.ElideMiddle;
        text: baseUrl;
    }
    Text {
        x:120;
        width: 50;
        elide: Text.ElideRight;
        text: baseUrl;
    }
}

图片.png

font.bold : bool [是否粗体，默认为false]
font.capitalization : enumeration [字符串大小策略，共五种策略：MixedCase（默认，不对文本做改变）、AllUppercase、AllLowercase、SmallCaps(小写字母将会变成小型大写字母)、Capitalize(每一个单词的第一个字母大写)]

Rectangle {
    Text { y:0;    text: "hello world!"; }
    Text { y:14;   text: "hello world!"; font.capitalization: Font.MixedCase     }
    Text { y:14*2; text: "hello world!"; font.capitalization: Font.AllUppercase }
    Text { y:14*3; text: "hello world!"; font.capitalization: Font.AllLowercase }
    Text { y:14*4; text: "HeLLO world!"; font.capitalization: Font.SmallCaps    }
    Text { y:14*5; text: "hello world!"; font.capitalization: Font.Capitalize   }
}

图片.png

font.family : string [字体集名称；如果设置的字体集无效，将使用字体匹配算法设置一个字体集]
font.italic : bool [是否斜体，默认为false]
font.letterSpacing : real [设置字母的字体间距，默认为0，正增负减]
font.pixelSize : int [使用这个函数使字体设备依赖。使用pointSize设置在设备独立的方式字体大小]
font.pointSize : real [字体大小，参照上面font.pixelSize]
font.strikeout : bool [是否增加删除线，默认为false]
font.underline : bool [是否增加下划线，默认为false]
font.weight : enumeration [字体的体重，可理解为笔画的粗细]

Rectangle {
    Text {       text:"Font.Light"   ; font.weight: Font.Light   ; }
    Text { y:14; text:"Font.Normal"  ; font.weight: Font.Normal  ; } // default
    Text { y:28; text:"Font.DemiBold"; font.weight: Font.DemiBold; }
    Text { y:42; text:"Font.Bold"    ; font.weight: Font.Bold    ; }
    Text { y:56; text:"Font.Black"   ; font.weight: Font.Black   ; }
}

图片.png

font.wordSpacing : real [单词间距，正增负减]
fontSizeMode : enumeration [该属性决定字体大小如何显示，暂时没测试出效果]

Text.FixedSize (default) - The size specified by font.pixelSize or font.pointSize is used.
Text.HorizontalFit     - The largest size up to the size specified that fits within the width of the item without wrapping is used.
Text.VerticalFit       - The largest size up to the size specified that fits the height of the item is used.
Text.Fit             - The largest size up to the size specified the fits within the width and height of the item is used

horizontalAlignment : enumeration [水平对齐，参照effectiveHorizontalAlignment]
hoveredLink : string [只读，鼠标悬停的带有链接的text文本上时，该值为此链接，本属性由Qt5.2引进]

Rectangle {
    Text {
        id: demo;
        text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>.";
    }
    Text {
        y:20;
        text: demo.hoveredLink;
    }
}

图片.png

lineCount : int [只读][返回当前可见的行数，不支持富文本]
lineHeight : real [可设置像素或者使用多倍行高，默认是单倍行高]
lineHeightMode : enumeration [行高模式]

Text.ProportionalHeight (default) - this sets the spacing proportional to the line (as a multiplier). For example, set to 2 for double spacing.
Text.FixedHeight                  - this sets the line height to a fixed line height (in pixels).

linkColor : color [link颜色，默认blue]

Rectangle {
    Text {
        lineHeight:2;
        text: "See the <a href=\"http://qt-project.org\">Qt Project website</a>.";
        linkColor: "red"; // 默认blue
    }
}

图片.png

maximumLineCount : int [设置最大行数，默认为尽可能的大]
minimumPixelSize : int [最小像素大小，如果fontSizeMode是Text.FixedSize或font.pixelSize是-1，这个属性被忽略了]
minimumPointSize : int [最小点大小，如果fontSizeMode是Text.FixedSize或font.pixelSize是-1，这个属性被忽略了]
renderType : enumeration
style : enumeration [设定一个附加的文本样式，默认为Text.Normal，还有Raised、Outline、Sunken]

Rectangle {
    Row {
        Text { font.pointSize: 24; text: "Normal" }
        Text { font.pointSize: 24; text: "Raised"; style: Text.Raised; styleColor: "red" }
        Text { font.pointSize: 24; text: "Outline";style: Text.Outline; styleColor: "red" }
        Text { font.pointSize: 24; text: "Sunken"; style: Text.Sunken; styleColor: "red" }
    }
}

图片.png

styleColor : color [特殊style的阴影颜色，参考上面style的代码]
text : string [本Text显示的内容]
textFormat : enumeration [指定文本格式，默认为自动]

Text.AutoText (default) -- 自动文本
Text.PlainText        --  普通文本
Text.StyledText       --  style文本
Text.RichText        --  富文本

示例

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

图片.png

truncated : bool [只读][如果文本由于最大的或elide而被截断，则返回true]
verticalAlignment : enumeration [垂直策略，默认Text.AlignTop，参考上面horizontalAlignment]
wrapMode : enumeration

Text.NoWrap (default) - 不会执行任何包装。如果文本包含不足的换行符，则内容宽度将超过设置宽度。
Text.WordWrap       - 包装仅在单词边界上完成。如果一个字太长，内容宽度就会超过设定的宽度
Text.WrapAnywhere   - 包装是在一行的任意一点上完成的，即使它发生在一个单词的中间。
Text.Wrap           - 如果可能的话，包装出现在一个词界;否则，它就会出现在直线上的适当点上，即使是在一个单词的中间。

Signals

onLineLaidOut(object line) [每开始输出一行时触发]
line有五个属性：number(read-only)、x、y、width、height
onLinkActivated(string link) [点击link触发]
onLinkHovered(string link) [鼠标放在link上触发，每次从link外到link上触发]

Methods

doLayout() [触发显示文本的重新布局]

Window

目前状况

import QtQuick 2.0
import QtQuick.Window 2.0
Window{
}

图片.png

引入QtQuick1.0提示没有安装该模块，是不是QtQuickWindow2.0QuickWindow2.0依赖于1.0（已引入2.0）？目前未尝试安装1.0，也没有详细搜索其他解决方案，这个目前不是很必要，因为程序实在Qmainwindow里面嵌入式qmk程序，后续有时间可能会回过头来研究，若读者有需要可留言，笔者会继续研究。

描述

提供一个顶层窗口。

属性

activeFocusItem : Item
color : color
contentOrientation : Qt::ScreenOrientation
data : list<Object>
flags : Qt::WindowFlags
height : int
maximumHeight : int
maximumWidth : int
minimumHeight : int
minimumWidth : int
modality : Qt::WindowModality
opacity : real
title : string
visibility : QWindow::Visibility
visible : bool
width : int
x : int
y : int

原博主博客地址：https://blog.csdn.net/qq21497936

原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062

本文章博客地址：https://blog.csdn.net/qq21497936/article/details/78547722

qml开发笔记(六)：可视化元素Text、Window

Qt开发专栏：qml开发（点击传送门）

qml开发笔记(六)：可视化元素Text、Window

前话

Text

描述

属性

Signals

Methods

Window

目前状况

描述

属性

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

qml开发笔记(六)：可视化元素Text、Window

qml开发笔记(六)：可视化元素Text、Window

前话

Text

描述

属性

Signals

Methods

Window

目前状况

描述

属性

热门文章

最新文章

相关电子书

相关实验场景