Russian Qt Forum
Ноябрь 01, 2024, 11:29 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
 
  Начало   Форум  WIKI (Вики)FAQ Помощь Поиск Войти Регистрация  

Страниц: [1]   Вниз
  Печать  
Автор Тема: Скелет программы для Android. Выдвигающиеся меню.  (Прочитано 5119 раз)
Avagetto
Гость
« : Январь 22, 2015, 13:02 »

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

Сообщений: 1805



Просмотр профиля WWW
« Ответ #1 : Январь 22, 2015, 13:07 »

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

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

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

Avagetto
Гость
« Ответ #2 : Январь 22, 2015, 17:27 »

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

Код:
    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
Хакер
*****
Offline Offline

Сообщений: 625


Просмотр профиля WWW
« Ответ #3 : Январь 22, 2015, 20:34 »

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

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

http://kibsoft.ru - Download the Qt Media Encoding Library here

The apps that were written using QtMEL:
http://srecorder.com - Screen recording software
Avagetto
Гость
« Ответ #4 : Январь 23, 2015, 18:01 »

Я так и думал) Собственно вот что получилось. Единственное реализовал на событиях 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;
        }
    }
}
« Последнее редактирование: Январь 24, 2015, 13:30 от Avagetto » Записан
Страниц: [1]   Вверх
  Печать  
 
Перейти в:  


Страница сгенерирована за 0.08 секунд. Запросов: 23.