SplitView



  • hi

    I want to make a form like the picture below

    http://s6.uplod.ir/i/00725/afopfu7e3clx.jpg

    But only the top blue menu is displayed.
    please guide me

    my code:

    import QtQuick.Window 2.2
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtQuick.Layouts 1.2
    import QtQuick.Controls 1.4
    
    import QtQuick 2.4
    import Material 0.1
    import Material.ListItems 0.1 as ListItem
    
    ApplicationWindow {
        id: demo
        visible: true
        visibility: "FullScreen"
        width: Screen.width
        height: Screen.height
    
        theme {
            primaryColor: Palette.colors["cyan"]["500"]
            primaryDarkColor: Palette.colors["blue"]["700"]
            accentColor: Palette.colors["blue"]["A200"]
            tabHighlightColor: "white"
        }
    
        Dialog {
            id: colorPicker
            title: "choose color"
    
            positiveButtonText: "ok"
    
            MenuField {
                id: selection
                model: ["color", "control color", "background color"]
                width: Units.dp(160)
            }
    
            Grid {
                columns: 7
                spacing: Units.dp(8)
    
                Repeater {
                    model: [
                        "red", "pink", "purple", "deepPurple", "indigo",
                        "blue", "lightBlue", "cyan", "teal", "green",
                        "lightGreen", "lime", "yellow", "amber", "orange",
                        "deepOrange", "grey", "blueGrey", "brown", "black",
                        "white"
                    ]
    
                    Rectangle {
                        width: Units.dp(30)
                        height: Units.dp(30)
                        radius: Units.dp(2)
                        color: Palette.colors[modelData]["500"]
                        border.width: modelData === "white" ? Units.dp(2) : 0
                        border.color: Theme.alpha("#000", 0.26)
    
                        Ink {
                            anchors.fill: parent
    
                            onPressed: {
                                switch(selection.selectedIndex) {
                                case 0:
                                    theme.primaryColor = parent.color
                                    break;
                                case 1:
                                    theme.accentColor = parent.color
                                    break;
                                case 2:
                                    theme.backgroundColor = parent.color
                                    break;
                                }
                            }
                        }
                    }
                }
            }
    
            onRejected: {
                // TODO set default colors again but we currently don't know what that is
            }
        }
    
        Dialog {
            id: closeProgram
            title: "close"
            positiveButtonText: "yes"
            negativeButtonText: "no"
            text: "Do you want to exit?"
            onAccepted: Qt.quit()
            onRejected: {
                // TODO set default colors again but we currently don't know what that is
            }
        }
    
        initialPage: TabbedPage {
            id: page
    
            //title: "Haresh"
    
            actionBar.maxActionCount: navDrawer.enabled ? 3 : 5
    
            actions: [
                Action {
                    iconName: "navigation/close"
                    name: "close"
                    onTriggered: closeProgram.show()
                    
                },
    
                Action {
                    iconName: "image/color_lens"
                    name: "color"
                    onTriggered: colorPicker.show()
                },
    
    
                Action {
                    iconName: "action/settings"
                    name: "settings"
                    hoverAnimation: true
                    onTriggered: pageStack.push(Qt.resolvedUrl("settings.qml"))
                },
    
                Action {
                    iconName: "alert/warning"
                    name: "THIS SHOULD BE HIDDEN!"
                    visible: false
                },
    
                Action {
                    iconName: "action/language"
                    name: "language"
                    //enabled: false
                },
    
                Action {
                    iconName: "action/account_circle"
                    name: "account"
                }
            ]
    
            backAction: navDrawer.action
    
            NavigationDrawer {
                id: navDrawer
    
                enabled: page.width < Units.dp(500)
    
                Flickable {
                    anchors.fill: parent
    
                    contentHeight: Math.max(content.implicitHeight, height)
    
                    Column {
                        id: content
                        anchors.fill: parent
    
                    }
                }
            }
    
        }
    
        SplitView {
    
            orientation: Qt.Horizontal
    
            Rectangle {
                width: 200
                Layout.maximumWidth: 400
                color: "lightblue"
                
            }
            Rectangle {
                id: centerItem
                Layout.minimumWidth: 50
                Layout.fillWidth: true
                color: "lightgray"
                
            }
            Rectangle {
                width: 200
                color: "lightgreen"
                
            }
        }
    
    }
    
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.