QMLQtQuick.Controls2MenuBarMenu菜单样式⾃定义
版本：Qt5.12.5 ，参考Qt源码及⽂档⽰例
在Qt5.12的⽂档中你可以搜索到三个MenuBar组件，这⾥我修改的是Control2中的菜单栏样式，对⽐如下：
因为菜单栏及菜单项是多个组件组合⽽成的，都需要进⾏了⾃定义来统⼀风格：
样式修改也没什么好讲的，就那⼏个固定的设置，要做的就是改改属性参数来实现界⾯效果。QML这个MenuBar有个好处就是能随便放在哪个位置，Menu也可以单独作为弹出式的菜单。直接放代码：
//basicmenu.qml
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 + leftInt + rightInt,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInt + bottomInt, contentHeight + topPadding + bottomPadding)
margins: 0
overlap: 1
font{
family: "SimSun"
pixelSize: 14
}
delegate: BasicMenuItem { }
contentItem: ListView {
implicitHeight: contentHeight
model: tModel
interactive: Window.window ? contentHeight > Window.window.height : fal clip: true
currentIndex: control.currentIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
implicitWidth: 122
implicitHeight: 32
color: control.backgroundColor粽子怎么包
border.width: 1
}
dal: Rectangle {
color: ansparent(control.palette.shadow, 0.5)
}
deless: Rectangle {
color: ansparent(control.palette.shadow, 0.12)
}
}
//basicmenubar.qml
import QtQuick.Controls.impl 2.12
T.MenuBar {
id: control
property color backgroundColor: "white"
内蒙焖面property color borderColor: "black"
implicitWidth: Math.max(implicitBackgroundWidth + leftInt + rightInt,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInt + bottomInt, contentHeight + topPadding + bottomPadding)
font{
family: "SimSun"
pixelSize: 16
}
delegate: BasicMenuBarItem { }
contentItem: Row {
spacing: control.spacing
Repeater {
model: tModel
}
}
//背景在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
import QtQuick.Controls.impl 2.12
苹果7截图
T.MenuBarItem {
男孩的美丽女老师id: control
property color textColor: control.highlighted ? "cyan" : "white"
property color backgroundColor: control.down || control.highlighted ? "black" : "gray"
implicitWidth: Math.max(implicitBackgroundWidth + leftInt + rightInt,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInt + bottomInt,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
//spacing: 6
padding: 0
leftPadding: 12
rightPadding: 12
//icon.width: 24
//icon.height: 24
//lor: control.palette.buttonText
contentItem: Text {
text:
font: control.font
//opacity: enabled ? 1.0 : 0.3
color: Color
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 + leftInt + rightInt,
implicitWidth: Math.max(implicitBackgroundWidth + leftInt + rightInt,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInt + bottomInt,
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<=0?6:left_pd
rightPadding: control.mirrored ? indicatorPadding : arrowPadding
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
text:
font: control.font
color: Color
}
尚主indicator: Item {
x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
入团的意义
//y: pPadding + (control.availableHeight - height) / 2
implicitWidth: 30
implicitHeight: 30
Rectangle {
width: parent.width-8
height: width
visible: control.checkable
border.width: 1
Rectangle {
width: parent.width-8
height: width
visible: control.checked
color: control.indicatorColor
}
}
}
arrow: Shape {
id: item_arrow
x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
//y: pPadding + (control.availableHeight - height) / 2
visible: control.subMenu
implicitWidth: 30
implicitHeight: 30
ShapePath {
strokeWidth: 0
strokeColor: control.arrowColor
fillRule: ShapePath.WindingFill
fillColor: control.arrowColor
startX: item_arrow.width/4
startY: item_arrow.height*3/4
兔子窗花图片
PathLine { x:item_arrow.width/4; y:item_arrow.height/4 }
PathLine { x:item_arrow.width/2; y:item_arrow.height/2 }
PathLine { x:item_arrow.width/4; y:item_arrow.height*3/4 }
}
}
