QT/QML Text 部分功能（自动省略自动换行自动调节字体大小调节行间距

原创已于 2022-04-27 14:00:22 修改 · 7.4k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#qt

于 2021-03-22 09:44:28 首次发布

Qt 专栏收录该内容

37 篇文章

订阅专栏

本文详细探讨了QtQuick中的Text组件，包括文本颜色、字体样式、对齐方式、行间距、换行模式、省略模式等方面的设置。通过实例展示了如何控制文本显示的宽度、高度以及自动调整字体大小等功能，帮助读者深入理解QtQuick中的文本布局和样式定制。

Text {
    color: "black"
    anchors.fill: parent
    verticalAlignment: TextInput.AlignVCenter
    horizontalAlignment: TextInput.AlignHCenter
    leftPadding: 5 //QtQuick 2.13 间隔
    rightPadding: 5
    text: qsTr("Hello World")
    lineHeight: Text.ProportionalHeight //设置行间距
    lineHeight: 0.7 //行间距比例 最大 1 
    wrapMode: Text.WordWrap //换行
    elide: Text.ElideRight //显示不完则隐藏
    //elide 省略模式 wrap 换行模式
    //contentWidth 手动设置字体显示的宽与高
    font.pixelSize: 15 
    fontSizeMode: Text.Fit //固定 Text 显示大小->字体自动变化的模式选中还有几种看文档
    minimumPixelSize: 10 //设置自动变化最小字体大小
}

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Text{
        id:text_test

                    width: 200

                    anchors.horizontalCenter: parent.horizontalCenter

                    clip :true  //是否剪切掉超出显示范围的文字，默认false

                    text:"Hello Wo111111111111111111111"      //需要显示的文字

                    color: "red"            //文字颜色

                    font.family: "Corbel"   //字体

                    font.pixelSize: 25      //字体大小设置为像素

                    //font.pointSize: 100     //将字体的大小设置为点,存在pixelSize设置，本设置无效

                    font.bold: true         //是否加粗，默认为false

                    font.capitalization: Font.MixedCase //设置文本大小写，不使用大小写,默认值

                    //font.capitalization: Font.AllUppercase //全部使用大写

                    //font.capitalization: Font.AllLowercase   //全部使用小写

                    //font.capitalization: Font.SmallCaps       //小写字母使用小大写

                    //font.capitalization: Font.Capitalize        //第一个单词第一个字符大写

                    font.italic: true         //设置字体是否斜体样式，默认false

                    font.letterSpacing: 8    //设置字母之间的距离，正数为增加默认距离，负数为减少

                    //font.strikeout: true     //设置是否有删除线（中间一条线），默认false

                    font.underline: true     //设置是否有下滑线，默认false

                    //font.weight: Font.Light

                    //font.weight: Font.Normal

                    //font.weight: Font.DemiBold

                    //font.weight: Font.Bold

                    //font.weight: Font.Black

                    font.wordSpacing: 10      //设置单词之间的距离

                    //horizontalAlignment: Text.AlignRight //右对齐

                    //horizontalAlignment: Text.AlignLeft    //左对齐

                    //horizontalAlignment: Text.AlignHCenter   //中间对齐

                    horizontalAlignment: Text.AlignJustify

                    //verticalAlignment:   Text.AlignTop      //上对齐

                    verticalAlignment:   Text.AlignBottom     //下对齐

                    //verticalAlignment:   Text.AlignVCenter  //中间对齐

                    smooth:true        //是平滑

                    //style: Text.Normal  设置字体样式

                    //style: Text.Outline

                   // style: Text.Raised

                    //style: Text.Sunken

                    styleColor: "blue" //配合style使用

                    //textFormat: Text.AutoText //文本属性显示方式

                    //textFormat: Text.PlainText

                    //textFormat: Text.RichText

                    //textFormat: Text.StyledText

                    wrapMode: Text.WrapAnywhere   //换行属性设置，但需要明确宽度

                   // wrapMode: Text.WordWrap    //

               //wrapMode: Text.WrapAnywhere

                    //wrapMode: Text.Wrap

                    elide: Text.ElideRight //超出显示范围的用...代替

                    //elide: Text.ElideNone

                    //elide: Text.ElideMiddle

                    // elide: Text.ElideLeft
                    lineHeightMode:Text.FixedHeight  //行距
                    lineHeight:20
                    maximumLineCount:2

            onImplicitWidthChanged:  { //显示的文本本身的长度发生变化触发信号
                    console.log("implicitWidth = ",text_test.implicitWidth)
                    console.log("implicitHeight = ",text_test.implicitHeight)
                    }
    }
}