Скелет программы для Android. Выдвигающиеся меню.

[Avagetto]

Здравствуйте. Изучаю QML хочу написать простенькую программу. Но в самом начале сразу возник вопрос как правильно реализовать несколько окон в программе под Android.К примеру, одно окно отображает обычное текстовое поле, а в другом окне отображается картинка. Не могу понять сам механизм многооконности,  как это правильно делается. Так же  интересует вопрос как можно переключатся между ними.  В идеале хочется сделать меню выдвижное как в приложении "Вконтакте", и через него осуществлять смену текущего окна. Кто нибудь подскажите как это правильно реализовать, или подскажите где можно почитать как реализовано что нибудь похожее.  Пытался найти в интернете, но ничего не вышло...
Заранее благодарен.

[gil9red]

Посмотрите примеры QML в креаторе, там полно всего.

Сделайте поиск в примерах "quick" и "QML"

Один из примеров:
Qt Quick Controls - Touch Gallery

[Avagetto]

Спасибо с окнами разобрался, подскажите пожалуйста как можно реализовать вытягивание меню из-за левого края экрана?
Сейчас реализовал появление и исчезание по нажатию на кнопку. Окно выезжает и заезжает обратно.

Код:

    Button {
        x:300
        y:100
        id: button3
        text: qsTr("Press Me 3")
        onClicked:fxMenu.state = fxMenu.state === "visibled" ? "hidden" : "visibled"
    }
    AppMenu {
        id:fxMenu
        state:"hidden"
        y:32
        states: [
          State {
            name: "hidden"
            PropertyChanges { target: fxMenu; x: - width}
          },

          State {
            name: "visibled"
            PropertyChanges { target: fxMenu; x: 0 }
          }
        ]

        transitions: Transition {
            NumberAnimation { properties: "x,y"; duration: 600; easing.type: Easing.OutQuad }
        }
    }

[kibsoft]

Я у себя подобное делал, но левая панель не накладывалась на контент (как в нативных Android приложениях), а контент сдвигался вправо. Т.е. я сделал горизонтальный ListView, задал параметр snapMode = ListView.SnapOneItem. Первым итемом в списке был компонент меню, а вторым уже PageStack с контентом.
Вот скриншот: http://dl1.joxi.net/drive/0000/0094/94/150122/2e8be211be.jpg

Думал также над тем, чтобы сделать как у всех нативных приложений - наложение левой панели на основной контенк(как у вас), идея заключается в следующем:
Само меню отправляем за пределы экрана слева, но к этому меню приделать(справа) прозрачный Rectangle(высотой во весь экран, но небольшой шириной, чтобы не закрыть основной контент), на который повесить MouseArea и в нем прописать drag.
Т.е. юзер этот ректангл не видит, т.к. он прозрачный, но потянуть за него сможет, если начнет тянуть с левого края экрана. Сам это не реализовывал, но думаю крупных проблем не должно возникнуть.
Надеюсь идея понятна

[Avagetto]

Я так и думал) Собственно вот что получилось. Единственное реализовал на событиях onPress, onRelease. Пока что  это черновой вариант и не красиво оформлено.  Подскажите как избавиться от дребезга? Т.е. меню вытаскивается но дребезжит, хотя курсор стоит на месте (ну либо палец ^_^)

Код:

    AppMenu {
        id:fxMenu
        state:"hidden"
        //x:0
        y:32
        states: [
          State {
            name: "hidden";
            PropertyChanges { target: fxMenu; x: - width}
            PropertyChanges { target: menuMouseArea; x: fxMenu.x + fxMenu.width  }
            PropertyChanges { target: test; x: fxMenu.x + fxMenu.width  }
          },

          State {
            name: "visibled";
            PropertyChanges { target: fxMenu; x: 0 }
            PropertyChanges { target: menuMouseArea; x: fxMenu.x + fxMenu.width  }
            PropertyChanges { target: test; x: fxMenu.x + fxMenu.width  }
          },
          State {
              name: "moved";
              PropertyChanges { target: fxMenu; x: menuMouseArea.mouseX  <= width  ? menuMouseArea.mouseX - width : 0  }
              PropertyChanges { target: menuMouseArea; x: fxMenu.x + fxMenu.width - fxMenu.width/20 }
              PropertyChanges { target: test; x: fxMenu.x + fxMenu.width - fxMenu.width/20 }
              PropertyChanges { target: button3 ; text: fxMenu.x  }
          }
        ]

        /*transitions: Transition {
            NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.InOutQuad }
        }*/
    }

    MouseArea {
        id:menuMouseArea

        y:32
        width:parent.width/10
        height: parent.height-32
        //onPressed: ( mouseX < parent.width*5/100 ) && fxMenu.state === "hidden"
        //onPositionChanged:  ( pressed === true) && (mouseX <= fxMenu.width ) ?  fxMenu.x = coords. - fxMenu.width: 0
        onReleased: fxMenu.x >= - ( fxMenu.width / 2 ) ?   ( fxMenu.state = "visibled" ) : fxMenu.state = "hidden"
        onPressed: fxMenu.state = "moved"

    }

p.s. кажется я понял в чем проблема. Если не ошибаюсь то детская ошибка. Забыл вычесть смещение по координате X. Вернее вычел но не полностью, потерял смешение MouseArea.
P.s.2 В общем проблема была с тем что координаты мыши возвращались относительные. Сейчас получение "абсолютных" координат реализовал через небольшой костыль (опять же если будет большая вложенность то надо будет немного подправить код перетаскивания). Если кто подскажет как реализовать более правильно буду благодарен.

Сам код (на текущий момент) если вдруг кому интересен.

Код:

Item {
    id:appMenu
    width: parent.width*7/10
    //height: 480

    Rectangle{
    anchors.fill: parent


    color: "black"


    ListModel {
        id: pageModel
        ListElement {
            title: "Buttons"
            //page: "content/ButtonPage.qml"
        }
        ListElement {
            title: "Sliders"
            //page: "content/SliderPage.qml"
        }
        ListElement {
            title: "ProgressBar"
            //page: "content/ProgressBarPage.qml"
        }
        ListElement {
            title: "Tabs"
            //page: "content/TabBarPage.qml"
        }
        ListElement {
            title: "TextInput"
            //page: "content/TextInputPage.qml"
        }

        ListElement {
            title: "List"
            //page: "content/ListPage.qml"
        }
    }

    ListView {
        model: pageModel
        anchors.fill: parent
        delegate: MenuButton {
            text: title
            //onClicked: stackView.push(Qt.resolvedUrl(page))
        }
    }
    }

    states: [
      State {
        name: "hidden";
        PropertyChanges { target: appMenu; x: - width}
        PropertyChanges { target: menuMouseArea; x: 0  }
      },

      State {
        name: "visibled";
        PropertyChanges { target: appMenu; x: 0 }
      }
    ]

    transitions: Transition {
        NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.InOutQuad }
    }

    Rectangle{
        x:appMenu.width - appMenu.width/20
        y:0
        width:appMenu.width/10
        height: appMenu.height
        //color:"yellow"
        opacity: 0

        MouseArea {
            id:menuMouseArea

            property int menuCoordX: 0
            property int touchPos: 0

            anchors.fill: parent

            onPositionChanged: {
                menuCoordX=mouseX + x + appMenu.x - touchPos;
                touchPos=mouseX + x + appMenu.x;

                if(pressed){
                    appMenu.x = ( appMenu.x + menuCoordX ) < 0 ? appMenu.x + menuCoordX : 0
                    x=appMenu.x + appMenu.width - appMenu.width/20
                }
            }

            onReleased: {
                appMenu.x >= - ( appMenu.width / 2 ) ? ( appMenu.state = "visibled" ) : appMenu.state = "hidden"
                touchPos = 0
            }

            onPressed: touchPos = mouseX + appMenu.x + x;
        }
    }
}