Qt-QML-自定义个自己的文本Text

举报
DreamLife 发表于 2022/04/14 23:08:48 2022/04/14
【摘要】 好久都没有正经的更新自己的文章了,这段时间也辞职了,听了小爱的,准备买个碗,自己当老板,下面请欣赏效果图 这个界面布局就是自己是在想不到啥了,按照常规汽车导航的布局布局了一下,主要看内容哈,看看这个文本文件 问个文本文件的状态了有一下三种 1. 正常 normal 2. 激活 active 3. 不可用 enable 位...

好久都没有正经的更新自己的文章了,这段时间也辞职了,听了小爱的,准备买个碗,自己当老板,下面请欣赏效果图

这个界面布局就是自己是在想不到啥了,按照常规汽车导航的布局布局了一下,主要看内容哈,看看这个文本文件

问个文本文件的状态了有一下三种

1. 正常 normal

2. 激活 active

3. 不可用 enable

位置可以有一下方式组合 

1. 上 

2. 下

3. 左

4. 右

5. 中心

等等,自己组合了就不写了

 

颜色目前默认是写了绿色,用了一些军事上面的颜色 。大家可以自行更改

下面附上文本文件的源代码

import QtQuick 2.0

/*
  作者:张建伟
  日期:2018年3月28日
  简述:这是一个针对UFCP专门自定义的一个Text文本显示控件,该模块只适用于某种特定软件开发
 */


Item {

    property string textState: "normal"        //声明一个属性,用来表示当前文本的状态,/*激活:active*/ /*正常:normal*/ /*不可用:enable*/
    property string textDetails: "测试文本"      //声明一个属性,用来表示文本内容
    property string textPositionH: "center"     //声明一个属性,用来表示水平位置布局   /*左:left*/  /*右:right*/  /*中:center*/
    property string textPositionV: "center"     //声明一个属性,用来表示垂直位置布局   /*上: top*/   /*下:bottom*/   /*中:center*/
    width: 200      //默认宽度
    height: 96      //默认高度

    Rectangle                       //用来显示文本的背景颜色
    {
        id: background
        width: m_Text.width < 200 ? m_Text.width : 200
        height: m_Text.height
        color:
        {

            /*
             颜色根据文本不同的状态显示不同的颜色
             */

            if(textState == "active")
            {
                "#00FF00"
            }
            else
            {
                "#0000FF00"
            }
        }

        Text {
            id: m_Text
            color:
            {

                /*
                  文本颜色根据文本状态显示不同颜色
                  */

                if(textState == "active")
                {
                    "#000000"
                }
                else if(textState == "normal")
                {
                    "#00FF00"
                }
                else
                {
                    "#c0c0c0"
                }
            }
            font.pixelSize: 20                      //字体大小20像素
            font.family: "微软雅黑"                  //字体 微软雅黑
            font.bold: false                        //关闭粗体显示
            anchors.centerIn: parent
            text: qsTr(textDetails)                 //文本显示内容
        }

        /*
          文字布局,根据实际需求调整文本布局
          */

        anchors.top:
        {
            if(textPositionV == "top")
            {
                parent.top
            }
        }
        anchors.bottom:
        {
            if(textPositionV == "bottom")
            {
                parent.bottom
            }
        }
        anchors.left:
        {
            if(textPositionH == "left")
            {
                parent.left
            }
        }
        anchors.right:
        {
            if(textPositionH == "right")
            {
                parent.right
            }
        }
        anchors.centerIn:
        {
            if(textPositionH == "center" && textPositionV == "center")
            {
                parent.Center
            }
        }

        anchors.horizontalCenter:
        {
            if(textPositionH == "center")
            {
                parent.horizontalCenter
            }
        }
        anchors.verticalCenter:
        {
            if(textPositionV == "center")
            {
                parent.verticalCenter
            }
        }

    }




}

文章来源: dreamlife.blog.csdn.net,作者:DreamLife.,版权归原作者所有,如需转载,请联系作者。

原文链接:dreamlife.blog.csdn.net/article/details/79734832

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。