QML：ApplicationWindow中的menuBar、header、footer

一、ApplicationWindow简介

ApplicationWindow是一个窗口，可以方便地在窗口中添加菜单栏、页眉和页脚项。
您可以将ApplicationWindow声明为应用程序的根项，并使用QQmlApplicationEngine运行它。通过这种方式，您可以从QML控制窗口的属性、外观和布局。

二、Menu bar 代码示例

menuBar: MenuBar
    {
        Material.background: "#a8c0fd"

        Menu
        {
            title: "主食"
            MenuItem { text: "米饭" }
            MenuItem { text: "面条" }
            MenuItem { text: "米线" }
        }

        Menu
        {
            title: "蔬菜"
            MenuItem { text: "香葱" }
            MenuItem { text: "白菜" }
            MenuItem { text: "冬瓜" }
            MenuItem { text: "南瓜" }
        }

        Menu
        {
            title: "水果"
            MenuItem { text: "苹果" }
            MenuItem { text: "香蕉" }
            MenuItem { text: "哈密瓜" }
            MenuItem { text: "葡萄" }
            MenuItem { text: "草莓" }

            MenuSeparator{} //分割线

            MenuItem { text: "西瓜" }
            MenuItem { text: "樱桃" }
            MenuItem { text: "猕猴桃" }

            MenuSeparator{}

            MenuItem { text: "山竹" }
            MenuItem { text: "莲雾" }
            MenuItem { text: "小番茄" }
        }

        Menu
        {
            title: "饮品"

            Menu
            {
                title: "酒类"
                MenuItem { text: "白酒    ￥15" }
                MenuItem { text: "啤酒    ￥3" }
                MenuItem { text: "鸡尾酒   ￥9" }
            }

            Menu
            {
                title: "果汁"
                MenuItem { text: "西瓜汁   ￥2" }
                MenuItem { text: "芒果汁   ￥3" }
                MenuItem { text: "葡萄汁   ￥3" }
            }

            Menu
            {
                title: "饮料"
                MenuItem { text: "冰红茶   ￥3" }
                MenuItem { text: "矿泉水   ￥1" }
                MenuItem { text: "酸奶    ￥5" }
            }
        }
    }

三、Header 代码示例

header: TabBar
    {
        id: headerTabBar

        TabButton
        {
            text: "页面1"
        }
        TabButton
        {
            text: "页面2"
        }
        TabButton
        {
            text: "页面3"
        }
        TabButton
        {
            text: "页面4"
        }
        TabButton
        {
            text: "页面5"
        }
    }

四、注意 

Footer和Header同理，这里就不写代码演示了。在导入库的时候，如果同时需要用到Material和Dialog库，那么Material库要在前面导入，否则就会报错。

import QtQuick
import QtQuick.Controls.Material    //Material要放在Dialogs的前面，否则会报错
import QtQuick.Controls
import QtQuick.Layouts

还有一点就是，MenuBar、Header、Footer是针对ApplicationWindow而言的，在Window中是使用不了的。 

五、完整代码

import QtQuick
import QtQuick.Controls.Material    //Material要放在Dialogs的前面，否则会报错
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: root
    width: 800
    height: 600
    visible: true
    title: qsTr("欢迎光临角角の超市！")

    menuBar: MenuBar
    {
        Material.background: "#a8c0fd"

        Menu
        {
            title: "主食"
            MenuItem { text: "米饭" }
            MenuItem { text: "面条" }
            MenuItem { text: "米线" }
        }

        Menu
        {
            title: "蔬菜"
            MenuItem { text: "香葱" }
            MenuItem { text: "白菜" }
            MenuItem { text: "冬瓜" }
            MenuItem { text: "南瓜" }
        }

        Menu
        {
            title: "水果"
            MenuItem { text: "苹果" }
            MenuItem { text: "香蕉" }
            MenuItem { text: "哈密瓜" }
            MenuItem { text: "葡萄" }
            MenuItem { text: "草莓" }

            MenuSeparator{} //分割线

            MenuItem { text: "西瓜" }
            MenuItem { text: "樱桃" }
            MenuItem { text: "猕猴桃" }

            MenuSeparator{}

            MenuItem { text: "山竹" }
            MenuItem { text: "莲雾" }
            MenuItem { text: "小番茄" }
        }

        Menu
        {
            title: "饮品"

            Menu
            {
                title: "酒类"
                MenuItem { text: "白酒    ￥15" }
                MenuItem { text: "啤酒    ￥3" }
                MenuItem { text: "鸡尾酒   ￥9" }
            }

            Menu
            {
                title: "果汁"
                MenuItem { text: "西瓜汁   ￥2" }
                MenuItem { text: "芒果汁   ￥3" }
                MenuItem { text: "葡萄汁   ￥3" }
            }

            Menu
            {
                title: "饮料"
                MenuItem { text: "冰红茶   ￥3" }
                MenuItem { text: "矿泉水   ￥1" }
                MenuItem { text: "酸奶    ￥5" }
            }
        }
    }

    header: TabBar
    {
        id: headerTabBar

        TabButton
        {
            text: "页面1"
        }
        TabButton
        {
            text: "页面2"
        }
        TabButton
        {
            text: "页面3"
        }
        TabButton
        {
            text: "页面4"
        }
        TabButton
        {
            text: "页面5"
        }
    }

    StackLayout
    {
        currentIndex: headerTabBar.currentIndex //实现页面切换，注意：不能是StackView

        Rectangle
        {
            width: contentItem.width
            height: contentItem.height
            Text
            {
                text: "页面1：" + parent.width + "x" + parent.height
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
        Rectangle
        {
            width: contentItem.width
            height: contentItem.height
            Text
            {
                text: "页面2：" + parent.width + "x" + parent.height
                font.pixelSize: 30
                anchors.centerIn: parent
            }
            Pane
            {
                x: 20; y: 20
                width: 200; height: 300
                Material.elevation: 5
                Material.roundedScale: Material.MediumScale
            }
        }
        Rectangle
        {
            width: contentItem.width
            height: contentItem.height
            Text
            {
                text: "页面3：" + parent.width + "x" + parent.height
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
        Rectangle
        {
            width: contentItem.width
            height: contentItem.height
            Text
            {
                text: "页面4：" + parent.width + "x" + parent.height
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
        Rectangle
        {
            width: contentItem.width
            height: contentItem.height
            Text
            {
                text: "页面5：" + parent.width + "x" + parent.height
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
    }
}

运行效果：

若本文对你有所启发或帮助，不妨点个赞或者收藏一下，感谢！