用qml实现
http://sc.chinaz.com/jiaobendemo.aspx?downloadid=121210151632660
原来的网页的导航栏菜单是这样的,在QML中,我实现了类似的效果:
main.qml文件:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
menuBar: MenuBar {
Menu {
title: qsTr("JquerySchool")
Action {
text: qsTr("Jquery插件")
onTriggered: console.log("Jquery插件")
}
Action { text: qsTr("JQuery学堂") }
Action { text: qsTr("学习资料库") }
Action { text: qsTr("QQ群堂") }
// MenuSeparator { }
Action { text: qsTr("TAGS标签") }
Action { text: qsTr("在线留言") }
delegate: GreenMenuItem{} //注意这里的delegate不能为某个Component
background: GreenMenuBarBg{}
}
Menu {
title: qsTr("Jquery学堂")
Action { text: qsTr("Jquery插件") }
Action { text: qsTr("Jquery学堂") }
Action { text: qsTr("学习资料库") }
Action { text: qsTr("QQ群堂") }
Action { text: qsTr("TAGS标签") }
Action { text: qsTr("在线留言") }
delegate: GreenMenuItem{}
background: GreenMenuBarBg{}
}
Menu {
title: qsTr("&Help")
Action { text: qsTr("&About") }
delegate: GreenMenuItem{}
background: GreenMenuBarBg{}
}
delegate: GreenMenuBar{}
background: GreenMenuBarBg {}
}
}
上述代码中的delegate不能为某个Component,因为这些delegate是某个Item的,参考:
https://doc.qt.io/qt-5.12/qml-qtquick-tableview.html#delegate-prop
TableView QML Type里的delegate这样说明的:
Note: Delegates are instantiated as needed and may be destroyed at any time. They are also reused if the reuseItems property is set to true. You should therefore avoid storing state information in the delegates.
我遇到的问题就是将delegate:某个Component的Id
结果设置的样式不生效。原谅我是QML初学者,对delegate具体的机制什么的,还理解得较为浅。
控制MenuBarItem样式的,这里的MenuBarItem是指:
控制这些“JquerySchool”样式的是GreenMenuBar.qml文件,控制后面黑色长方形大小和颜色的是GreenMenuBarBg.qml文件。这两个文件的qml代码是:
GreenMenuBar.qml:
import QtQuick 2.5
import QtQuick.Controls 2.5
MenuBarItem {
id: menuBarItem
height: 40
width: 120
font: Qt.font({
family: "微软雅黑",
pointSize: 10,
weight: Font.Bold
})
contentItem: Text {
text: menuBarItem.text
font: menuBarItem.font
opacity: enabled ? 1.0 : 0.3
color: "#ffffff"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 40
implicitHeight: 40
opacity: enabled ? 1 : 0.3
color: menuBarItem.highlighted ? "#8ACE00" : "transparent"
//左边灰白色的竖线
Rectangle {
color: "#808080"
height: parent.height
width: 1
anchors.left: parent.left
opacity: 0.5
}
//右边的竖线
Rectangle {
color: "#696969"
height: parent.height
width: 1
anchors.right: parent.right
opacity: 0.5
}
}
}
GreenMenuBarBg.qml文件:
import QtQuick 2.5
Rectangle {
implicitWidth: 150
implicitHeight: 40
color: "#333333"
Rectangle {
color: "#21be2b"
width: parent.width
height: 1
anchors.bottom: parent.bottom
}
}
控制的样式的是MenuItem,文件为:
GreenMenuItem.qml:
import QtQuick 2.5
import QtQuick.Controls 2.5
MenuItem {
id: menuItem
implicitWidth: 30
implicitHeight: 40
font: Qt.font({
family: "微软雅黑",
pointSize: 10,
weight: Font.Bold
})
contentItem: Text {
//leftPadding: menuItem.indicator.width
//rightPadding: menuItem.arrow.width
text: menuItem.text
font: menuItem.font
opacity: enabled ? 1.0 : 0.3
color: "#ffffff"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 30
implicitHeight: 40
opacity: enabled ? 1 : 0.3
color: menuItem.highlighted ? "#8ACE00" : "transparent"
//上边的横线
Rectangle {
color: "#808080"
height: 1
width: parent.width
anchors.top: parent.top
opacity: 0.5
}
}
}