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*/
     200      //默认宽度
    height: 96      //默认高度

    Rectangle                       //用来显示文本的背景颜色
    {
        id: background
         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
            }
        }

    }




}