加载中…qml 使用 GridLayout 做一个简单的metro风格界面
(2016-09-30 17:28:47) | 分类： python学习 |
http://s7/mw690/001wL1rxzy75fQ1ntKSe6&690使用 GridLayout 做一个简单的metro风格界面" TITLE="qml 使用 GridLayout 做一个简单的metro风格界面" />
代码如下
其中
import QtQuick 2.0
代码如下
其中
import "../controls" as Awesome
import "../component"*****************************************************************
是为使用网络字体图标而引用 awesome fonts 的开源项目，地址为
https://github.com/QMLCommunity/font-awesome-qml
关于字体图标不知道的可以看看
http://fontawesome.io/icons/
import QtQuick 2.0
import QtQuick.Layouts 1.2
import "../controls" as Awesome
import "../component"
Item{
FontAwesome {
id: awesome
resource: "../fonts/fontawesome-webfont.ttf"
}
id:boxPage
width:800
height:470
RowLayout{
spacing:0
width:parent.width
height:parent.height
anchors.fill: parent
anchors.leftMargin:15
anchors.rightMargin: 15
anchors.topMargin: 35
anchors.bottomMargin: 35
GridLayout{
rows:3
columns: 3
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn1
text:"正则"
state:"c"
icon:awesome.loaded ? awesome.icons.fa_retweet:""
color:"#2F67E9"
}
}
Rectangle{
color:"#00000000"
Layout.columnSpan: 2
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn2
text:"Unix Timestamp"
state:"c"
color:"#8057C1"
icon:awesome.loaded ? awesome.icons.fa_linux:""
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn3
text:"计算器"
state:"c"
icon:awesome.loaded ? awesome.icons.fa_th:""
color:"#F18927"
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn4
text:"取色器"
state:"c"
icon:awesome.loaded ? awesome.icons.fa_image:""
color:"#2FD0E9"
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn5
text:"单位转换"
state:"c"
icon:awesome.loaded ? awesome.icons.fa_exchange:""
color:"#B01C11"
}
}
Rectangle{
color:"#00000000"
Layout.columnSpan: 2
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn6
text:"日历"
state:"c"
icon:awesome.loaded ? awesome.icons.fa_calendar:""
color:"#28269C"
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn9
text:"日历"
state:"c"
icon:awesome.loaded ? awesome.icons.fa_calendar:""
color:"#28269C"
}
}
}
Rectangle{
id:spacerec
width:15
}
GridLayout{
rows:3
columns: 3
//anchors.fill: parent;
anchors.left: spacerec.right
Rectangle{
color:"#00000000"
Layout.columnSpan: 2
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn11
text:"待定栏目"
state:"ls"
color:"#2B975F"
icon:awesome.loaded ? awesome.icons.fa_calendar:""
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn12
text:"虚位以待"
state:"c"
color:"#B60CA5"
icon:awesome.loaded ? awesome.icons.fa_calendar:""
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn14
text:"这不科学"
state:"c"
color:"#8057C1"
icon:awesome.loaded ? awesome.icons.fa_xing:""
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 2
Layout.rowSpan: 2
Image{
source:"../images/skin/11_big.png"
fillMode: Image.Stretch
width:parent.width
height:parent.height
}
}
Rectangle{
color:"#00000000"
Layout.fillHeight: true
Layout.fillWidth: true
BoxPageButton{
id:btn17
text:"待留"
state:"c"
color:"#42804A"
icon:awesome.loaded ? awesome.icons.fa_coffee:""
}}}}}
****************************************
代码 中的
BoxPageButton 为自定义控件， 定义的每个格子中的按钮文字和图标
代码如下 （字数超长，另开一篇）
http://blog.sina.com.cn/s/blog_537517170102ww3o.html
******************************************************
喜欢
0
赠金笔
前一篇：qml学习自定义组件属性赋值
后一篇：接上篇，自定义组件按钮