版本:Qt5.12.5 ,参考Qt源码及文档示例
代码链接:https://github.com/gongjianbo/QmlComponentStyle.git
在Qt5.12的文档中你可以搜索到三个MenuBar组件,这里我修改的是Control2中的菜单栏样式,对比如下:
因为菜单栏及菜单项是多个组件组合而成的,都需要进行了自定义来统一风格:
样式修改也没什么好讲的,就那几个固定的设置,要做的就是改改属性参数来实现界面效果。QML这个MenuBar有个好处就是能随便放在哪个位置,Menu也可以单独作为弹出式的菜单。直接放代码:
//basicmenu.qml
//basicmenu.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Window 2.12
T.Menu {
id: control
property color borderColor: "black"
property color backgroundColor: "white"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
margins: 0
overlap: 1
font{
family: "SimSun"
pixelSize: 14
}
delegate: BasicMenuItem { }
contentItem: ListView {
implicitHeight: contentHeight
model: control.contentModel
interactive: Window.window ? contentHeight > Window.window.height : false
clip: true
currentIndex: control.currentIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
implicitWidth: 122
implicitHeight: 32
color: control.backgroundColor
border.width: 1
border.color: control.borderColor
}
T.Overlay.modal: Rectangle {
color: Color.transparent(control.palette.shadow, 0.5)
}
T.Overlay.modeless: Rectangle {
color: Color.transparent(control.palette.shadow, 0.12)
}
}
//basicmenubar.qml
//basicmenubar.qml
import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
T.MenuBar {
id: control
property color backgroundColor: "white"
property color borderColor: "black"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
font{
family: "SimSun"
pixelSize: 16
}
delegate: BasicMenuBarItem { }
contentItem: Row {
spacing: control.spacing
Repeater {
model: control.contentModel
}
}
//背景在MenuBarItem之下,我把MenuBarItem的background高度去了1px
background: Rectangle {
implicitHeight: 30
color: control.backgroundColor
Rectangle {
color: control.borderColor
width: parent.width
height: 1
anchors.bottom: parent.bottom
}
}
}
//basicmenubaritem.qml
//basicmenubaritem.qml
import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
T.MenuBarItem {
id: control
property color textColor: control.highlighted ? "cyan" : "white"
property color backgroundColor: control.down || control.highlighted ? "black" : "gray"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
//spacing: 6
padding: 0
leftPadding: 12
rightPadding: 12
//icon.width: 24
//icon.height: 24
//icon.color: control.palette.buttonText
contentItem: Text {
text: control.text
font: control.font
//opacity: enabled ? 1.0 : 0.3
color: control.textColor
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
elide: Text.ElideRight
}
background: Rectangle {
implicitHeight: 30
height: control.height-1
color: control.backgroundColor
}
}
//basicmenuitem.qml
//basicmenuitem.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Shapes 1.12
T.MenuItem {
id: control
property color textColor: control.highlighted ? "cyan" : "black"
property color buttonColor: control.down ? "black": control.highlighted ? "gray": "transparent"
property color indicatorColor: "black"
property color arrowColor: "black"
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 0
spacing: 6
contentItem: Text {
readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
readonly property real left_pd: !control.mirrored ? indicatorPadding : arrowPadding
//没有边距就贴在边上了
leftPadding: left_pd
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?