Qt-QML-自定义个自己的文本Text
【摘要】
好久都没有正经的更新自己的文章了,这段时间也辞职了,听了小爱的,准备买个碗,自己当老板,下面请欣赏效果图
这个界面布局就是自己是在想不到啥了,按照常规汽车导航的布局布局了一下,主要看内容哈,看看这个文本文件
问个文本文件的状态了有一下三种
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)