目录
前言
本篇介绍一下JanQuick_Demo的系统内容界面
同样的，本篇的demo源码地址放在末尾，有需要的读者可以自取
开发环境
Qt 5.13.2 + Qt Creator 4.10.1 + MSVC2017/MinGW_64
界面展示
界面结构
整个系统界面内容主要分为四个区域，左上的logo、左侧logo下方的导航栏区域、logo右侧的菜单栏区域、菜单栏区域下的内容显示区域。
代码结构
qml的代码结构是随着页面结构走的，基本结构如下：
1、左上logo
这个区域比较简单，一个rectangle加上logo就能完成
//左上角logo区域 Rectangle{ id:mainIconArea width: 210 height: 56 color: "#334154" Text { text: qsTr("JanQuick") width: contentWidth height: contentHeight font.pixelSize: 28 anchors.centerIn: parent font.family: EFont.textHanSansMedium color: EColor.mainColor(EColor.MColor_1) } }2、左侧logo下方的导航栏区域
这个区域的主要内容就是导航控件，这里只考虑了二级展开，所以使用了自定义listview实现。具体实现有兴趣的读者可以下载源码观看。
//侧边导航栏背景 Rectangle{ id:listviewBg width: 210 height: parent.height-mainIconArea.height anchors.top: mainIconArea.bottom color: "#222d3c" visible: true NavExpListView{ id:navigationBar anchors.fill: parent clip: true Component.onCompleted: { initNav() initTimer.start() } onSigChildClicked: { breadcrumb.model = getBreadcrumbModel() } } }//end listviewBg3、logo右侧的菜单栏区域
这个区域主要是一些按键的排布
//顶部菜单栏背景 Rectangle{ id:menuArea width: parent.width-listviewBg.width height: 56 anchors.left: listviewBg.right anchors.top: parent.top color: "white" //右上角菜单行排列 Row{ height: parent.height anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter spacing: 10 //搜索按键 EIconBaseBtn{ anchors.verticalCenter: parent.verticalCenter cusBorderVis: false cusIconSize:18 onClicked: { eToast.showToast("暂无搜索功能",EToast.StyleEnum.WARNING) } } //消息提醒按键 EIconBaseBtn{ cusIcon: "\uf0f3" anchors.verticalCenter: parent.verticalCenter cusBorderVis: false cusIconSize:18 onClicked: { eToast.showToast("暂无消息展示功能",EToast.StyleEnum.WARNING) } } //用户信息 Rectangle{ height: 40 width: avatarBg.width+8+userNameText.contentWidth anchors.verticalCenter: parent.verticalCenter color: "transparent" radius: 4 Rectangle{ id:avatarBg width: 24 height: width clip: true radius: width/2 color: "lightblue" anchors.verticalCenter: parent.verticalCenter Image { id: avatar anchors.fill: parent clip: true visible: false fillMode: Image.PreserveAspectFit source: "" antialiasing: true } Rectangle{ id:avatarMask anchors.fill: parent radius: parent.width/2 visible: false antialiasing: true } OpacityMask { anchors.fill: avatarBg source: avatar maskSource: avatarMask visible: true antialiasing: true } } Text { id:userNameText width: contentWidth height: contentHeight anchors.verticalCenter: parent.verticalCenter anchors.left: avatarBg.right anchors.leftMargin: 8 text: qsTr("") font.pixelSize: 18 font.family: EFont.textHanSansNormal color: EColor.textColor(EColor.Text_Main) } MouseArea{ anchors.fill: parent hoverEnabled: true onClicked: { if(!userPopup.visible) userPopup.visible = true } onEntered: { parent.color = EColor.mainColor(EColor.MColor_10) } onExited: { parent.color = "transparent" } } //用户信息弹出框 CusPopup{ id:userPopup model: ["个人信息","退出登录"] y:parent.height currentIndex: -1 onCurrentIndexChanged: { switch (currentIndex){ case 0: eToast.showToast("暂无个人信息查看功能",EToast.StyleEnum.WARNING) break case 1: sigSignout() break } currentIndex =-1 } } }//end Rectangle 用户信息背景 //切换语言按键 EIconBaseBtn{ anchors.verticalCenter: parent.verticalCenter cusBorderVis: false cusIcon: "\uf0ac" cusIconSize:18 onClicked: { languagePopup.visible = true } CusPopup{ id:languagePopup model: ["中文","English"] y:parent.height-2 currentIndex: -1 x:parent.width-width-2 width:76 onCurrentIndexChanged: { switch (currentIndex){ case 0: eToast.showToast("暂无切换语言功能",EToast.StyleEnum.WARNING) break case 1: eToast.showToast("暂无切换语言功能",EToast.StyleEnum.WARNING) break } currentIndex =-1 } } } }//end Row }//end menuArea4、菜单栏区域下的内容显示区域
这个区域是根据左侧导航栏变化而变化的，主要是导航面包屑控件和用于加载不同页面的Loader
//内容显示区域背景 Rectangle{ id:contentBg anchors.left: menuArea.left anchors.top: menuArea.bottom width: menuArea.width height: parent.height-menuArea.height color: EColor.bgColor(EColor.BGColor_1) Breadcrumb{ id:breadcrumb anchors.left: parent.left anchors.leftMargin: 24 anchors.top: parent.top anchors.topMargin: 16 } Loader{ width: 1182 height: 769 anchors.left: breadcrumb.left anchors.top:breadcrumb.bottom anchors.topMargin: 48 source: getLoaderSource() } }除开这些界面代码之外便是一些逻辑处理的函数代码了。整体代码如下：
SystemPage.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.13
import Qt.labs.settings 1.0
import EUIpackage 1.0
import EControl 1.0
import "./"
import "./demoControl"
import "./projectOverview"
Page {
signal sigSignout
//左上角logo区域
Rectangle{
id:mainIconArea
width: 210
height: 56
color: "#334154"
Text {
text: qsTr("JanQuick")
width: contentWidth
height: contentHeight
font.pixelSize: 28
anchors.centerIn: parent
font.family: EFont.textHanSansMedium
color: EColor.mainColor(EColor.MColor_1)
}
}
//侧边导航栏背景
Rectangle{
id:listviewBg
width: 210
height: parent.height-mainIconArea.height
anchors.top: mainIconArea.bottom
color: "#222d3c"
visible: true
NavExpListView{
id:navigationBar
anchors.fill: parent
clip: true
Component.onCompleted: {
initNav()
initTimer.start()
}
onSigChildClicked: {
breadcrumb.model = getBreadcrumbModel()
}
}
}//end listviewBg
//顶部菜单栏背景
Rectangle{
id:menuArea
width: parent.width-listviewBg.width
height: 56
anchors.left: listviewBg.right
anchors.top: parent.top
color: "white"
//右上角菜单行排列
Row{
height: parent.height
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 10
//搜索按键
EIconBaseBtn{
anchors.verticalCenter: parent.verticalCenter
cusBorderVis: false
cusIconSize:18
onClicked: {
eToast.showToast("暂无搜索功能",EToast.StyleEnum.WARNING)
}
}
//消息提醒按键
EIconBaseBtn{
cusIcon: "\uf0f3"
anchors.verticalCenter: parent.verticalCenter
cusBorderVis: false
cusIconSize:18
onClicked: {
eToast.showToast("暂无消息展示功能",EToast.StyleEnum.WARNING)
}
}
//用户信息
Rectangle{
height: 40
width: avatarBg.width+8+userNameText.contentWidth
anchors.verticalCenter: parent.verticalCenter
color: "transparent"
radius: 4
Rectangle{
id:avatarBg
width: 24
height: width
clip: true
radius: width/2
color: "lightblue"
anchors.verticalCenter: parent.verticalCenter
Image {
id: avatar
anchors.fill: parent
clip: true
visible: false
fillMode: Image.PreserveAspectFit
source: ""
antialiasing: true
}
Rectangle{
id:avatarMask
anchors.fill: parent
radius: parent.width/2
visible: false
antialiasing: true
}
OpacityMask {
anchors.fill: avatarBg
source: avatar
maskSource: avatarMask
visible: true
antialiasing: true
}
}
Text {
id:userNameText
width: contentWidth
height: contentHeight
anchors.verticalCenter: parent.verticalCenter
anchors.left: avatarBg.right
anchors.leftMargin: 8
text: qsTr("")
font.pixelSize: 18
font.family: EFont.textHanSansNormal
color: EColor.textColor(EColor.Text_Main)
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked: {
if(!userPopup.visible)
userPopup.visible = true
}
onEntered: {
parent.color = EColor.mainColor(EColor.MColor_10)
}
onExited: {
parent.color = "transparent"
}
}
//用户信息弹出框
CusPopup{
id:userPopup
model: ["个人信息","退出登录"]
y:parent.height
currentIndex: -1
onCurrentIndexChanged: {
switch (currentIndex){
case 0:
eToast.showToast("暂无个人信息查看功能",EToast.StyleEnum.WARNING)
break
case 1:
sigSignout()
break
}
currentIndex =-1
}
}
}//end Rectangle 用户信息背景
//切换语言按键
EIconBaseBtn{
anchors.verticalCenter: parent.verticalCenter
cusBorderVis: false
cusIcon: "\uf0ac"
cusIconSize:18
onClicked: {
languagePopup.visible = true
}
CusPopup{
id:languagePopup
model: ["中文","English"]
y:parent.height-2
currentIndex: -1
x:parent.width-width-2
width:76
onCurrentIndexChanged: {
switch (currentIndex){
case 0:
eToast.showToast("暂无切换语言功能",EToast.StyleEnum.WARNING)
break
case 1:
eToast.showToast("暂无切换语言功能",EToast.StyleEnum.WARNING)
break
}
currentIndex =-1
}
}
}
}//end Row
}//end menuArea
DropShadow{//分界线阴影
anchors.fill: menuArea
source: menuArea
color: "#dde1e5"
radius: 4
samples: 8
horizontalOffset: 1
verticalOffset: 6
spread: 0
z:1
}
//内容显示区域背景
Rectangle{
id:contentBg
anchors.left: menuArea.left
anchors.top: menuArea.bottom
width: menuArea.width
height: parent.height-menuArea.height
color: EColor.bgColor(EColor.BGColor_1)
Breadcrumb{
id:breadcrumb
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top
anchors.topMargin: 16
}
Loader{
width: 1182
height: 769
anchors.left: breadcrumb.left
anchors.top:breadcrumb.bottom
anchors.topMargin: 48
source: getLoaderSource()
}
}
Timer{
id:initTimer
interval: 100
running: false
repeat: false
onTriggered: {
breadcrumb.model = getBreadcrumbModel()
}
}
//加载侧边导航栏
function initNav(){
var datalist = [{paretObjName:"首页",
childenList:[{childObjName:"项目总览",parentIndex:0},
{childObjName:"门店情况",parentIndex:0}]},
]
for(var i = 0;i<datalist.length;++i){
navigationBar.model.append(datalist[i])
}
}
//获取标题面包屑的model
function getBreadcrumbModel(){
var currModelData = navigationBar.model.get(navigationBar.currentIndex)
var firstLevel = currModelData.paretObjName
var childenListModel = currModelData.childenList
var secendLevel = childenListModel.get(navigationBar.currChildIndex).childObjName
var retArr = [firstLevel,secendLevel]
return retArr
}
//登录加载用户信息
function loginUser(userName,headPortraitUrl){
userNameText.text = userName
avatar.source = headPortraitUrl
}
//根据导航栏加载不同页面
function getLoaderSource(){
if(navigationBar.currentIndex ===0 && navigationBar.currChildIndex ===0)
return "qrc:/qmlFile/projectOverview/ProjectOverView.qml"
else if(navigationBar.currentIndex ===0 && navigationBar.currChildIndex ===1)
return ""
else
return ""
}
}
源码地址
总结
本次分享就到这了，对你有帮助的话点个赞吧。
1482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
