QML之Text

20 篇文章 3 订阅

QML提供的text显示文本,只读显示不能读写。和我们一般的文档软件的显示大同小异,只不过文档提供了直接设置,这里我们需要对Text的属性进行设置,达到我们想要的效果


 Rectangle{
        height: 400
        width: 400
        anchors.centerIn: parent
        Text{
            id:text_test
            width: 200
            anchors.horizontalCenter: parent.horizontalCenter
            clip :true  //是否剪切掉超出显示范围的文字,默认false
            text:"Hello World"      //需要显示的文字
            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.NoWrap   //换行属性设置,但需要明确宽度
            //wrapMode: Text.WordWrap    //            
	   //wrapMode: Text.WrapAnywhere
            //wrapMode: Text.Wrap	    
	    //elide: Text.ElideRight //超出显示范围的用...代替
            //elide: Text.ElideNone
            //elide: Text.ElideMiddle
            // elide: Text.ElideLeft
	onImplicitWidthChanged:  { //显示的文本本身的长度发生变化触发信号
           console.log("implicitWidth = ",text_test.implicitWidth)
        }

 
 
 
 
 
        }
 
        Column{//下面显示的是text的只读属性
            spacing: 5
            y:150
            anchors.horizontalCenter: parent.horizontalCenter
            Text{
                text:"lineCount: " + text_test.lineCount //显示的行数
                color: "blue"
                font.pixelSize: 25
            }
            Text{
                text:"paintedHeight: " +text_test.paintedHeight //高度
                color: "blue"
                font.pixelSize: 25
            }
            Text{
                text:"paintedWidth: " +text_test.paintedWidth //宽度
                color: "blue"
                font.pixelSize: 25
            }
            Text{
                text:"paintedWidth: " +text_test.truncated
                color: "blue"
                font.pixelSize: 25
            }
        }
    }

注:本文验证使用的版本是qt4.8,如高版本有差异,欢迎指出

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值