SplitView

[neda]

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"
            
        }
    }

}