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

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

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

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

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

            }

        }

    }

}

巴特西

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

最新文章

热门文章