常用窗口和菜单

Window，Dialog、菜单设置，tabBar切换页面。79-86

1.Window

• 直接创建window
• 通过Component创建窗口 wincom.createObject().show();
• 通过外部代码和Component创建 Qt.createComponent("NewWindow.qml").show();

import QtQuick.Controls
Window {
    width:800; height:600
    Window{ //子窗口
        id:subwin1
        width:400; height:300
        title: "subwin1"
    }
    NewWindow{
        id:newwin1
    }
    //subwin1.show(); //显示窗口，窗口只能创建1个实例
    //newwin1.show(); //显示窗口，窗口只能创建1个实例
}
//NewWindow.qml
Window{
    width:400; height:300
    title: "NewWindow"
}
// Componnet 可以创建多个窗口。
Componnet{
    id:wincom
    Window{width:300; height:300; title: "wincom"}
} //wincom.createObject().show(); 创建窗口
Button {
    text: "Componnet subwin"
    onClicked: {
        var wincom = wincom.createObject();
        wincom.show(); //可以创建多个窗口。
    }
}
Button {
    text: "createComponent subwin"
    onClicked: {
        // 创建 Component
        Component comp = Qt.createComponent("NewWindow.qml")
        var win = comp.createObject(rootId); //指定父节点rootId
        win.title = text
        win.show();
    }
}

2.窗口属性

最大化：root.showMaximized()
全屏： root.showFullScreen()
dialog: root.flags = Qt.Dialog;
window: root.flags = Qt.Window;
root.flags = Qt.FramelessWindowHint;
模态窗口 root.modality = Qt.WindowModal;//WindowModal,NonMadal,ApplicationModal
模态窗口未关闭，不能操作其后面的UI内容。
subwin.modality = Qt.WindowModal
subwin.show();

3.Dialog 对话框,

信号：accepted(), rejected()
方法：accept(),close(),done(int result),open(),reject()
属性：title:string,
data:list<QtObject>
result:int(Dialog.Accepted/ Dialog.Rejected)

//可以在c++端设定style，或者执行qml命令的时候添加style=***，但都是非qml代码层解决的。
import QtQuick.Controls.Basic//样式要在QtQuick.Dialogs前导入。
import QtQuick.Dialogs
import QtQuick.Controls

 //1.MessageDialog，可设定按钮。
MessageDialog{
    id: mdialog1
    text: "MessageDialog"
    title: "title"
    buttons: MessageDialog.Ok | MessageDialog.Close
    onAccepted: print("MessageDialog accepted") //按钮点击回调
    onRejected: print("MessageDialog rejected")
} 
Button {
    id: "msg dialog"
    onClicked: {
        mdialog1.open();
    }
}

文件打开和保存 FileDialog

FileDialog {
    id: openFile
    //当前文件 currentFile:
    //当前目录 folder .
    acceptLabel: "上传" //按钮样式定义
    fileMode: FileDialog.OpenFile; //SaveFile保存
    onAccepted: {
        mdialog1.text = selectedFile //选择的文件路径
        mdialog1.open();        
    }   
}

Button {
    id: "open file"
    onClicked: {
        mdialog1.open();
    }
}

3.应用窗口ApplicationWindow

菜单栏(menubar,menu,menuItem)，动态菜单示例，邮件菜单，工具栏，tabBar切换页面。79-86

ApplicationWindow{
    id:root
    menuBar: MenuBar {
        Menu{title:"文件"; 
            MenuItem{title:"打开"; onClicked:print("open")}
            MenuItem{title:"退出"; onClicked: root.close();}
        }
        Menu{title:"编辑"
            Menu{
                title: "高级" //二级菜单
                MenuItem{title:"剪切行"; onClicked:print("剪切行")}
            }
        }
        Menu{title:"试图"}
    }
}

3.1 qml通过json动态生成菜单和处理事件。

menuBar: addMenu(),clear(),insertMenu(),removeMenu();

// 动态菜单的事件处理
property var actions: {
    //更新菜单
    "updateMenu": updateMenu,
    "close": function(){
        root.close();
    },
    "测试": function(){
        root.close();
    }
}
Component{
    id:menuitemcom
    MenuItem{
        onTriggered:{
            if(root.actions[text]){
                root.actions[text]();//调用函数
            }else{
                print("no action:" +text)
            }
        }
    }
}
Component {//一级菜单的组件
    id:menucom
    Menu{}
}
MenuItem{text:"updateMenu"; onClicked:updateMenu() }

function updateMenu() 
{
    print("updateMenu") 
    var jsondata ="[{\"name\":\"File\",  \"menus\":[\"copy\",\"paste\"]},
                    {\"name\":\"System\",\"menus\":[\"exit\",\"测试\"]}]"
    var menudata = JSON.parse(jsondata);
    print(menudata[0].name)
    //1.删除之前的菜单
    while(menubarid.menus.length >0) {
        menubarid.removeMenu(menubarid[0]); 
    }
    //2.遍历menudata，插入一级菜单
    for(var i=0; i<menudata.length; i++) {
        var menu = menucom.createObject(root);
        menu.title = menudata[i].name;
        menubarid.addMenu(menu);
        //3.插入二级菜单，遍历 menudata[i].menus
        for(var j=0; j<menudata[i].menus.length; j++){
            var item= menuitemcom.createObject(root);
            item.text= menudata[i].menus[j];
            menu.addItem(item)
        }
    }
}

4.右键菜单

//Menu,设置id  rightMenu
MouseArea{
    anchors.fill: parent
    acceptedButtons: Qt.RightButton
    onClicked: (mouse)=> {
        rightMenu.x = mouse.x;
        rightMenu.y = mouse.y;
        rightMenu.open();
    }
}

5.ToolBar

header: ToolBar{ //顶部tabbar
RowLayout{
ToolButton{text: "next"}
ToolButton{text: "next2"}
ToolSeparator{}
}
}
header: ToolBar{ //底部tab
//...
}

6.多页面设置。

StackLayout{
id:stack
width:parent.width
currentIndex: bar.currentIndex; //关联底部tabbar。

Item{
    id:homeTab
    Rectangle{
        width:contentItem.width; height:contentItem.height;
        color:"red"
    }
}

}