qml Text 文本

最新推荐文章于 2024-03-01 13:56:33 发布

朴勇佑

最新推荐文章于 2024-03-01 13:56:33 发布

阅读量1k

点赞数 2

分类专栏： qt

本文链接：https://blog.csdn.net/yongwoozzang/article/details/111708013

版权

qt 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

qml Text 文本

advance
antialiasing
baseUrl
clip
color
contentHeight
contentWidth: real
elide: enumeration
font
- bold 粗体
- capitalization 大小写
- family 字体
- italic 斜体(默认为false)
- letterSpacing 字间距
- pixelSize 设置像素大小
- pointSize 设置点大小
- strikeout 删除线
- underline 下划线
- weight 大小(枚举:大或者小)
- wordSpacing 单词间距
fontInfo 字体信息
fontSizeMode
- Text.FixedSize
- Text.HorizontalFit
- Text.VerticalFit
- Text.Fit
horizontalAlignment 横向对齐
hoveredLink 停留链接
leftPadding左间距
lineCount 行数(只读)
lineHeight 行间距(默认倍数形式, 1倍, 2倍...n倍, 在lineHeightMode值可设置模式)
lineHeightMode 行间距模式(影响lineHeight)
linkColor 超级链接颜色
maximumLineCount 行数上限设置
minimumPixelSize: 最小字体大小
minimumPointSize 最小字体大小
padding 间距(同时设置上下左右间距)
renderType: 偏好选择(qt字体或者系统字体)
rightPadding: 右间隔
style: 阴影 styleColor: 阴影颜色
text: 文本
textFormat: 文本格式
topPadding: 顶间距
truncated: 是否截断(只读属性

advance

先看下什么是基线:
在这里插入图片描述
advance : size
从文本项的第一个字符的基线原点到文本流中该字符之后的第一个字符的基线原点之间的距离，以像素为单位。

请注意，如果文本从右向左流动，则前进可能为负数。

Qt5.10中引入了此属性。
测试1
在这里插入图片描述

//main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }
    Text {
        id: m_txt
        width: 50
        height: 50
        text: qsTr("一二三四五六去八九十一二三四五六去八九十一二三四五六去八九十")
        wrapMode: Text.WordWrap //换行标志
        Component.onCompleted: {
            console.log(advance)
            console.log(width)
            console.log("content width:" + contentWidth)
//输出:
//qml: QSizeF(36, 18)
//qml: 50
//qml: content width:48
        }
    }
}

测试2: 单个汉字宽度
在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12

//main.qml

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }
    Text {
        id: m_txt
        width: 50
        height: 50
        text: qsTr("一")
        wrapMode: Text.WordWrap //换行标志
        Component.onCompleted: {
            console.log(advance)
            console.log(width)
            console.log("content width:" + contentWidth)
//输出:
//qml: QSizeF(6, 0)
//qml: 50
//qml: content width:6            
        }
    }
}

结论
在这里插入图片描述

antialiasing

抗锯齿
示例1
在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12

//main.qml

Window {
    visible: true
    width: 800
    height: 800
    title: qsTr("main.qml")

    Text {
        antialiasing: false
        width: 800
        height: 800
        font.pixelSize: 400
        font.bold: true
        text: qsTr("2橙子Orange")
    }
}

示例2
在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12

//main.qml

Window {
    visible: true
    width: 800
    height: 800
    title: qsTr("main.qml")

    Text {
        antialiasing: true
        width: 800
        height: 800
        font.pixelSize: 400
        font.bold: true
        text: qsTr("2橙子Orange")
    }
}

结论
Text不像矩形或者圆一样效果明显，antialiasing的值设置哪个效果都一样。

baseUrl

此属性指定用于解析文本中相对URL的基本URL。

URL被解析为与基URL的目标位于同一目录中，这意味着最后一个“/”之后的路径的任何部分都将被忽略。
在这里插入图片描述

import QtQuick.Window 2.12
import QtQuick 2.12

//main.qml

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        text: baseUrl
    }

}

clip

英文翻译: 削减
默认值: false
此属性保存是否剪切文本。
请注意，如果文本不适合边框，它将被突然切碎。
如果您想在有限的空间中显示可能很长的文本，您可能需要改用elide。
示例1
在这里插入图片描述

import QtQuick.Window 2.12
import QtQuick 2.12

//main.qml

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        clip: true
        text: "Hello This Lucy, nice to meet you."
    }

}

示例2
在这里插入图片描述

import QtQuick.Window 2.12
import QtQuick 2.12

//main.qml

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        clip: false
        text: "Hello This Lucy, nice to meet you."
    }

}

color

示例1
使用十六进制表示法定义的绿色文本示例：
在这里插入图片描述

import QtQuick.Window 2.12
import QtQuick 2.12

//main.qml

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        color: "#00FF00"
        text: "green text"
    }

}

示例2
使用SVG颜色名称定义的钢蓝色文本示例：
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        color: "steelblue"
        text: "blue text"
    }
}

示例3
利用rgba设置颜色
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        color: Qt.rgba(186 / 255, 66 / 255, 101 / 255, 0.5);
        text: "pink text"
    }
}

contentHeight

返回文本的高度，包括超过由于文本超过设置高度而覆盖的高度。
只读属性: true
示例1
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        text: "Hello, this is Lucy, that is Lily."

        Component.onCompleted: {
            console.log("contentHeight:" + contentHeight)
        }
    }
}

示例2
多行模式，一行宽度为18，此时多行宽度为18 * 4 = 72
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        text: "Hello, this is Lucy, that is Lily."
        wrapMode: Text.WordWrap

        Component.onCompleted: {
            console.log("contentHeight:" + contentHeight)
        }
    }
}

示例3
根据示例2的高度72 绘制一个矩形证实高度是否一致
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        height: 72
        width: 100
        color: "yellow"
    }

    Text {
        width: 100
        height: 100
        text: "Hello, this is Lucy, that is Lily."
        wrapMode: Text.WordWrap

        Component.onCompleted: {
            console.log("contentHeight:" + contentHeight)
        }
    }
}

contentWidth: real

返回文本的宽度，包括超过宽度的宽度，如果设置了WrapMode，则该宽度是由于包装不足而覆盖的。
示例1
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        text: "Hello, this is Lucy, that is Lily."
        wrapMode: Text.WordWrap

        Component.onCompleted: {
            console.log("contentWidth:" + contentWidth)
        }
    }
}

示例2
只写了Hello, this, 效果与示例1的宽度是一样的, 都是99
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 100
        height: 100
        text: "Hello, this"
        wrapMode: Text.WordWrap

        Component.onCompleted: {
            console.log("contentWidth:" + contentWidth)
        }
    }
}

示例3
这次把wrapMode去掉看看如果字宽度超过宽度会显示多少:
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 100
        text: "Hello, this is Lucy, that is Lily."

        Component.onCompleted: {
            console.log("contentWidth:" + contentWidth)
        }
    }
}

elide: enumeration

将此属性设置为根据文本项的宽度省略部分文本。只有设置了显式宽度，文本才会省略。
此属性不能与富文本一起使用。
省略可以是：

Text.ElideNone - 默认值
Text.ElideLeft
Text.ElideMiddle
Text.ElideRight

如果文本是多长度字符串，而模式不是文本.ElideNone，则将使用适合的第一个字符串，否则将忽略最后一个字符串。

多长度字符串按从最长到最短的顺序排列，由Unicode“字符串终止符”字符U009C分隔（在QML中用“\U009C”或“\x9C”写入）。

示例1: Text.ElideRight
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 100
        elide: Text.ElideRight
        text: "Hello, this is Lucy, that is Lily."
    }
}

示例2: Text.ElideMiddle
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 100
        elide: Text.ElideMiddle
        text: "Hello, this is Lucy, that is Lily."
    }
}

示例3: Text.ElideLeft
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 100
        elide: Text.ElideLeft
        text: "Hello, this is Lucy, that is Lily."
    }
}

示例4: 多行超出height值
在多行显示的情况下, 如果此属性设置为Text.ElideRight, 而且设置了Text高度height, 文本最后会以…显示。
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 60
        elide: Text.ElideRight
        clip: true
        wrapMode: Text.WordWrap
        text: "Hello, this is Lucy, that is Lily."
    }
}

示例5: 多行超出maximumLineCount值
在多行显示的情况下, 如果此属性设置为Text.ElideRight, 而且设置了Text最大行数maximumLineCount, 文本最后会以…显示。
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        maximumLineCount: 2
        elide: Text.ElideRight
        clip: true
        wrapMode: Text.WordWrap
        text: "Hello, this is Lucy, that is Lily."
    }
}

示例6: 多行注意点
如果同时设置了maximumLineCount和height，则将应用maximumLineCount，除非行数值非法。
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 100
        maximumLineCount: 2
        elide: Text.ElideRight
        clip: true
        wrapMode: Text.WordWrap
        text: "Hello, this is Lucy, that is Lily."
    }
}

示例7: \x9C: 结束符
\x9C为字符串结束符
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt
        color: "yellow"
    }

    Text {
        id: m_txt
        width: 100
        height: 100
        text: "Hello, th\x9cis is Lucydddd, that is Lily."
    }
}

font

bold 粗体

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        font.bold: false
        text: "Hello, this is Lucy, that is Lily."
    }

    Text {
        width: 300
        height: 50
        y:50
        font.bold: true
        text: "Hello, this is Lucy, that is Lily."
    }
}

capitalization 大小写

Font.MixedCase-这是不应用大小写更改的普通文本呈现选项。默认选项。
Font.AllUppercase-这将更改要以所有大写类型呈现的文本。
Font.AllLowercase-这将更改要以所有小写类型呈现的文本。
Font.SmallCaps-这将更改要以小型大写类型呈现的文本。
Font.Capitalize-这会改变要以每个单词的第一个字符作为大写字符呈现的文本。

- Font.MixedCase 默认值

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        text: "Hello, this is Lucy, that is Lily."
    }

    Text {
        width: 300
        height: 50
        y:50
        text: "Hello, this is Lucy, that is Lily."
        font.capitalization: Font.MixedCase
    }
}

- Font.AllUppercase 全大写

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        text: "Hello, this is Lucy, that is Lily."
    }

    Text {
        width: 300
        height: 50
        y:50
        text: "Hello, this is Lucy, that is Lily."
        font.capitalization: Font.AllUppercase
    }
}

- Font.AllLowercase 全小写

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        text: "Hello, this is Lucy, that is Lily."
    }

    Text {
        width: 300
        height: 50
        y:50
        text: "Hello, this is Lucy, that is Lily."
        font.capitalization: Font.AllLowercase
    }
}

- Font.SmallCaps 全部变成大写情况下小写的字体变小

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        text: "Hello, this is Lucy, that is Lily."
    }

    Text {
        width: 300
        height: 50
        y:50
        text: "Hello, this is Lucy, that is Lily."
        font.capitalization: Font.SmallCaps
    }
}

- Font.Capitalize 每个单词第一个字母大写

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        text: "Hello, this is Lucy, that is Lily."
    }

    Text {
        width: 300
        height: 50
        y:50
        text: "Hello, this is Lucy, that is Lily."
        font.capitalization: Font.Capitalize
    }
}

family 字体

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y:0
        font.family: "SimSun"   //宋体
        text: "hello, this is lucy, that is Lily, nice to meet you"
    }

    Text {
        width: 300
        height: 50
        y:25
        font.family: "Microsoft Yahei"  //微软雅黑
        text: "hello, this is lucy, that is Lily, nice to meet you"
    }

    Text {
        width: 300
        height: 50
        y:50
        font.family: "SimHei"  //黑体
        text: "hello, this is lucy, that is Lily, nice to meet you"
    }
}

italic 斜体(默认为false)

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y:0
        font.italic: true
        text: "hello, this is lucy, that is Lily, nice to meet you"
    }

    Text {
        width: 300
        height: 50
        y:50
        font.italic: false
        text: "hello, this is lucy, that is Lily, nice to meet you"
    }
}

letterSpacing 字间距

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y:0
        font.pointSize: 20
        font.letterSpacing: 10
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:30
        font.letterSpacing: 20
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:60
        font.letterSpacing: 20
        text: "这是一只猫";
    }

}

pixelSize 设置像素大小

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y:0
        font.pixelSize: 10
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pixelSize: 20
        y:30
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20  //点大小比像素大小大
        y:60
        text: "It is a Cat";
    }

}

pointSize 设置点大小

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y:0
        font.pointSize: 10
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:30
        text: "It is a Cat";
    }


}

strikeout 删除线

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:0
        font.strikeout: true
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:30
        font.strikeout: false
        text: "It is a Cat";
    }

}

underline 下划线

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:0
        font.underline: true
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:30
        font.underline: false
        text: "It is a Cat";
    }

}

weight 大小(枚举:大或者小)

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:0
        font.weight: Font.Thin
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:30
        font.weight: Font.Light
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:60
        font.weight: Font.ExtraLight
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:90
        font.weight: Font.Normal
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:120
        font.weight: Font.Medium
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:150
        font.weight: Font.DemiBold
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:180
        font.weight: Font.Bold
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:210
        font.weight: Font.ExtraBold
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:240
        font.weight: Font.Black
        text: "It is a Cat";
    }
}

wordSpacing 单词间距

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:0
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:30
        font.wordSpacing: 10
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        font.pointSize: 20
        y:60
        font.wordSpacing: 20
        text: "It is a Cat";
    }

}

fontInfo 字体信息

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        text: "It is a Cat";
        font.bold: true
        font.family: "SimHei"
        font.italic: true
        font.pointSize: 20
        font.weight: Font.ExtraBold
        Component.onCompleted: {
            console.log("bold:" + fontInfo.bold)
            console.log("family:" + fontInfo.family)
            console.log("italic:" + fontInfo.italic)
            console.log("pixelSize:" + fontInfo.pixelSize)
            console.log("pointSize:" + fontInfo.pointSize)
            console.log("styleName:" + fontInfo.styleName)
            console.log("weight:" + fontInfo.weight)
        }
    }


}

fontSizeMode

如果当前字超出行或者高会自动改变大小确保在Text设置的宽高里显示出来。

枚举值	说明
Text.FixedSize	固定值(默认值)
Text.HorizontalFit	行自适应大小
Text.VerticalFit	高自适应大小
Text.Fit	行和高都自适应大小

Text.FixedSize

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.FixedSize
        font.pixelSize: 40
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

Text.HorizontalFit

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.HorizontalFit
        font.pixelSize: 40
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

Text.VerticalFit

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.VerticalFit
        font.pixelSize: 40
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

Text.Fit

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.Fit
        font.pixelSize: 40
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

horizontalAlignment 横向对齐

横向对齐

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y: 0
        horizontalAlignment: Text.AlignLeft
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        y: 20
        horizontalAlignment: Text.AlignRight
        text: "It is a Cat";
    }

    Text {
        width: 300
        height: 50
        y: 40
        horizontalAlignment: Text.AlignHCenter
        text: "It is a Cat";
    }

}

hoveredLink 停留链接

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y: 0
        text: "It is a <a href=\"http://www.baidu.com\">Cat</a>, not a <a href=\"http://www.sogo.com\">Dog</a>";

        onLinkActivated:function(link) {
            console.log("点击链接: " + link);
        }
        onLinkHovered:function(link) {
            console.log("停留链接: " + link);
            console.log(hoveredLink)
        }
    }

}

leftPadding左间距

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y: 0
        text: "It is a Cat."
    }

    Text {
        width: 300
        height: 50
        y: 20
        text: "It is a Cat."
        leftPadding: 50
    }

}

lineCount 行数(只读)

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 50
        y: 0
        text: "It is a Cat.\nIt is a Dog."

        Component.onCompleted: {
            console.log(lineCount)
        }
    }

}

lineHeight 行间距(默认倍数形式, 1倍, 2倍…n倍, 在lineHeightMode值可设置模式)

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 300
        y: 0
        text: "It is a Cat.\nIt is a Dog."
        lineHeight: 1
    }

    Text {
        width: 300
        height: 300
        y: 50
        text: "It is a Cat.\nIt is a Dog."
        lineHeight: 2
    }

    Text {
        width: 300
        height: 300
        y: 200
        text: "It is a Cat.\nIt is a Dog."
        lineHeight: 3
    }

}

lineHeightMode 行间距模式(影响lineHeight)

枚举值	说明
Text.ProportionalHeight	倍数模式, 设置与直线成比例的间距（作为乘数）。例如，将“双倍间距”设置为2。
Text.FixedHeight	固定值模式, 这会将线条高度设置为固定的线条高度（以像素为单位）。

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 300
        y: 0
        text: "It is a Cat.\nIt is a Dog."
        lineHeight: 100
        lineHeightMode: Text.FixedHeight
    }

    Text {
        width: 300
        height: 300
        y: 200
        text: "It is a Cat.\nIt is a Dog."
        lineHeight: 2
        lineHeightMode: Text.ProportionalHeight
    }
}

linkColor 超级链接颜色

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 300
        y: 0
        font.pointSize: 20
        text: "It is a <a href=\"http://www.baidu.com\">Cat</a>."
        linkColor: "green"
    }

    Text {
        width: 300
        height: 300
        y: 50
        font.pointSize: 20
        text: "It is a <a href=\"http://www.baidu.com\">Cat</a>."
        linkColor: "red"
    }

    Text {
        width: 300
        height: 300
        y: 100
        font.pointSize: 20
        text: "It is a <a href=\"http://www.baidu.com\">Cat</a>."
        linkColor: "blue"
    }

    Text {
        width: 300
        height: 300
        y: 150
        font.pointSize: 20
        text: "It is a <a href=\"http://www.baidu.com\">Cat</a>."
    }

}

maximumLineCount 行数上限设置

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 300
        height: 300
        y: 0
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird."
        maximumLineCount: 1
    }

    Text {
        width: 300
        height: 300
        y: 100
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird."
        maximumLineCount: 2
    }

    Text {
        width: 300
        height: 300
        y: 200
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird."
        maximumLineCount: 3
    }

    Text {
        width: 300
        height: 300
        y: 300
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird."
        maximumLineCount: 4
    }

}

minimumPixelSize: 最小字体大小

即使设置了fontSizeMode为自适应, 字体大小的最小值还是这个minimumPixelSize值
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.Fit
        font.pixelSize: 40
        minimumPixelSize: 30
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.Fit
        font.pixelSize: 40
        minimumPixelSize: 20
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

minimumPointSize 最小字体大小

作用同minimumPixelSize, 即使设置了fontSizeMode为自适应, 字体大小的最小值还是这个minimumPixelSize值
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.Fit
        font.pointSize: 40
        minimumPointSize: 20
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        fontSizeMode:Text.Fit
        font.pointSize: 40
        minimumPointSize: 30
        text: "It is a Cat.\nIt is a Dog.\nIt is a Bird.\nIt is a Bus.\nIt is a Train."
    }

}

padding 间距(同时设置上下左右间距)

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "gray"
     }

    Rectangle{
         anchors.fill: m_txt2
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        text: "It is a Cat."
    }

    Text {
        id: m_txt2
        width: 100
        height: 100
        y: 100
        padding: 20
        text: "It is a Cat."
    }

}

renderType: 偏好选择(qt字体或者系统字体)

枚举值	说明
Text.QtRendering	qt字体
Text.NativeRendering	系统字体

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Rectangle{
         anchors.fill: m_txt2
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 100
        height: 100
        y: 0
        renderType: Text.QtRendering
        text: "It is a Cat."
    }

    Text {
        id: m_txt2
        width: 100
        height: 100
        y: 100
        renderType: Text.NativeRendering
        text: "It is a Cat."
    }

}

rightPadding: 右间隔

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
         anchors.fill: m_txt
         color: "yellow"
     }

    Rectangle{
         anchors.fill: m_txt2
         color: "yellow"
     }

    Text {
        id: m_txt
        width: 200
        height: 100
        y: 0
        horizontalAlignment: Text.AlignRight
        text: "It is a Cat."
    }

    Text {
        id: m_txt2
        width: 200
        height: 100
        y: 100
        horizontalAlignment: Text.AlignRight
        rightPadding: 20
        text: "It is a Cat."
    }

}

style: 阴影 styleColor: 阴影颜色

枚举值	说明
Text.Normal	无阴影(默认值)
Text.Outline	全部覆盖
Text.Raised	从上往下照射
Text.Sunken	从下往上照射

styleColor是阴影颜色
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 200
        height: 100
        font.pointSize: 40
        y: 0
        style: Text.Normal
        styleColor: "red"
        text: "It is a Cat."
    }

    Text {
        width: 200
        height: 100
        font.pointSize: 40
        y: 50
        style: Text.Outline
        styleColor: "red"
        text: "It is a Cat."
    }

    Text {
        width: 200
        height: 100
        font.pointSize: 40
        y: 100
        style: Text.Raised
        styleColor: "red"
        text: "It is a Cat."
    }

    Text {
        width: 200
        height: 100
        font.pointSize: 40
        y: 150
        style: Text.Sunken
        styleColor: "red"
        text: "It is a Cat."
    }

}

text: 文本

支持不同文本和html格式文本
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Text {
        width: 200
        height: 100
        font.pointSize: 40
        y: 0
        text: "It is a Cat."
    }

    Text {
        width: 200
        height: 100
        font.pointSize: 40
        y: 50
        text: "It <b>is</b> a Dog."
    }

}

textFormat: 文本格式

枚举值	说明
Text.AutoText	智能(默认)
Text.PlainText	纯文本
Text.StyledText	html3.2
Text.RichText	html4.0

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Column {

        Text {
            width: 200
            height: 100
            font.pointSize: 40
            textFormat: Text.AutoText   //智能
            text: "It <b>is</b> a Dog."
        }

        Text {
            width: 200
            height: 100
            font.pointSize: 40
            textFormat: Text.PlainText  //纯文本
            text: "It <b>is</b> a Dog."
        }

        Text {
            width: 200
            height: 100
            font.pointSize: 40
            textFormat: Text.StyledText //html3.2
            text: "It <b>is</b> a Dog."
        }

        Text {
            width: 200
            height: 100
            font.pointSize: 40
            textFormat: Text.RichText   //html4.0
            text: "It <b>is</b> a Dog."
        }
    }

}

topPadding: 顶间距

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt1
        color: "yellow"
    }

    Rectangle{
        anchors.fill: m_txt2
        color: "yellow"
    }

    Text {
        id: m_txt1
        width: 200
        height: 100
        y:0
        font.pointSize: 20
        text: "It <b>is</b> a Dog."
    }

    Text {
        id: m_txt2
        width: 200
        height: 100
        y:200
        font.pointSize: 20
        topPadding: 20
        text: "It <b>is</b> a Dog."
    }

}

truncated: 是否被截断(只读)
在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt1
        color: "yellow"
    }

    Rectangle{
        anchors.fill: m_txt2
        color: "yellow"
    }

    Rectangle{
        anchors.fill: m_txt3
        color: "yellow"
    }

    Text {
        id: m_txt1
        width: 200
        height: 100
        y:0
        font.pointSize: 20
        text: "It is a Dog.\nIt is a Cat.\nIt is a Bird.\nIt is a Sheep."
    }

    Text {
        id: m_txt2
        width: 200
        height: 100
        y:200
        font.pointSize: 20
        maximumLineCount: 2
        text: "It is a Dog.\nIt is a Cat.\nIt is a Bird.\nIt is a Sheep."
    }

    Text {
        id: m_txt3
        width: 200
        height: 100
        y:400
        font.pointSize: 20
        elide: Text.ElideRight
        text: "It is a Dog.\nIt is a Cat.\nIt is a Bird.\nIt is a Sheep."
    }

    Component.onCompleted: {
        console.log(m_txt1.truncated)
        console.log(m_txt2.truncated)
        console.log(m_txt3.truncated)
    }
}

truncated: 是否截断(只读属性

由属性值maximumLineCount或者elide的赋值触发的截断事件返回的结果值。

值	说明
true	存在截断
false	不存在截断

在这里插入图片描述

//main.qml

import QtQuick.Window 2.12
import QtQuick 2.12

Window {
    visible: true
    width: 350
    height: 800
    title: qsTr("main.qml")

    Rectangle{
        anchors.fill: m_txt1
        color: "yellow"
    }

    Rectangle{
        anchors.fill: m_txt2
        color: "yellow"
    }

    Rectangle{
        anchors.fill: m_txt3
        color: "yellow"
    }

    Text {
        id: m_txt1
        width: 200
        height: 100
        y:0
        font.pointSize: 20
        maximumLineCount: 1
        text: "Hello, this is a cat\r\n, this is a dog"
    }

    Text {
        id: m_txt2
        width: 200
        height: 100
        y:150
        font.pointSize: 20
        maximumLineCount: 2
        text: "Hello, this is a cat\r\n, this is a dog"
    }

    Text {
        id: m_txt3
        width: 200
        height: 100
        y:300
        font.pointSize: 20
        elide: Text.ElideRight
        text: "Hello, this is a cat, this is a dog"
    }

    Component.onCompleted: {
        console.debug("txt1:" + m_txt1.truncated)
        console.debug("txt2:" + m_txt2.truncated)
        console.debug("txt3:" + m_txt3.truncated)
    }

}

朴勇佑

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
qml Text 文本

qml Text 文本advanceadvance先看下什么是基线:advance : size从文本项的第一个字符的基线原点到文本流中该字符之后的第一个字符的基线原点之间的距离，以像素为单位。请注意，如果文本从右向左流动，则前进可能为负数。Qt5.10中引入了此属性。...
复制链接

扫一扫