BlinCT
April 30, 2016, 11:11 p.m.

Выпадающий подпункт в меню при нажатии. Разработка под QML

меню, qml, выпадающий пункт меню

Еще раз всем привет.
Обращаюсь скорее по вариантам, советам в подходе к решению вот такой проблемы:
Есть какие-то пункты меню, представляющие из себя:

ColumnLayout
{
    Rectangle
    {
        id: menuItem1
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.top: parent.top
        height: dp(30)
        Text
        {
            id: textItem1
            anchors.fill: parent
        }
        MouseArea
        {
            anchors.fill: parent
            onPressed: parent.color = "lightblue"
            onReleased: parent.color = "red"
        }
    }
    //контент который должен появится при нажатии на пункт меню
    Rectangle 
    {
        id: rectMenuContent1
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.top: menuItem1.bottom
        Loader 
        {
            id: loader1
            anchors.fill: parent
            source: "menucontent1.qml" //Подгружаемый внешний файл с пунктами настроек
        }
    }
    //
    Rectangle
    {
        id: menuItem2
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.margins: dp(3)
        anchors.top: rectMenuContent1.bottom
        height: dp(30)
        Text
        {
            id: textItem2
            anchors.fill: parent
        }
    }
 
    Rectangle
    {
        id: menuItem3
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.margins: dp(3)
        anchors.top: menuItem2.bottom
        height: dp(30)
        Text
        {
            id: textItem3
            anchors.fill: parent
        }
    }
 
}

Задача такая, при нажатии на какой-то из пунктов под ним должен появится, сдвигая вниз остальные какой-то контент. В данном случае это rectangle id: rectMenuContent1.
Его я туда поместил только ради демонстрации.
Вопрос: какими возможностями можно добиться такого результата? То есть нажали, пункт раскрылся, снова нажали и все скрылось, и так с каждым. Посоветуйте пожалуйста и если даже есть подобное что-то с примером, то как это можно сделать. Скорее всего тут надо будет что-то с якорями делать. По этому вариант как из урока Евгения с Drawer мне кажется не подходящим. Хотя я могу и ошибаться из-за малых знаний.

0

Do you like it? Share on social networks!

13
iG
  • May 1, 2016, 1:36 a.m.
  • The answer was marked as a solution.

Это неполное решение, но работает.

main.qml

Window {
    visible: true
    width: 640
    height: 480
 
    Flickable{
        anchors.fill: parent
        contentHeight: controlsColumn.height
        Column{
            id: controlsColumn
            spacing: 5
            anchors{
                left: parent.left
                right: parent.right
                margins: 5
            }
            MyItem{ text: "MyItem1"; source: "Controll/one.qml"}
            MyItem{ text: "MyItem2"; source: "Controll/two.qml"}
            MyItem{ text: "MyItem3"; source: "Controll/three.qml"}
 
        }
    }
}

MyItem.qml

import QtQuick 2.0
 
Rectangle{
    property alias text: textItem.text
    height: container.visible ? columns.height+5 : 30
    property alias source: loader.source
    anchors { left: parent.left; right: parent.right }
    color: "#53d769"
    clip: true
    Column{
        id: columns
        anchors.left: parent.left
        anchors.right: parent.right
        Text {
            x: 5
            id: textItem
            height: 30
            verticalAlignment: Text.AlignVCenter
        }
        Rectangle{
            id: container
            visible: false
            color: Qt.darker("#53d769", 1.2)
            anchors { left: parent.left; right: parent.right; margins: 5}
            height: loader.height+10
            Loader{
                y: 5
                anchors { left: parent.left; right: parent.right; margins: 5}
                id: loader
                source: loadCmp
            }
        }
 
    }
    Behavior on height {
        NumberAnimation { duration: 100 }
    }
 
    MouseArea{
        height: 30
        anchors { left: parent.left; right: parent.right }
        onClicked: {
            container.visible = !container.visible
        }
 
    }
}

listcontroll.zip

    BlinCT
    • May 1, 2016, 2:35 a.m.

    Это неполное решение но работает

    А вы пробовали собрать?
    И как понять что это не полное решение?
    У меня почему то при сборке с этим кодом ошибка [main.o] Error2 вылетает(

      iG
      • May 1, 2016, 3:06 a.m.

      мздец
      1 способ (без сборки)
      Открыть файл ListControll.qmlproject в QtCreator-ре и запустить проект

      2 способ (без сборки)
      Запустить файл main.qml c помощью qmlscene.exe
      например:
      d:\temp\Qt\5.6\msvc2015_64\bin\qmlscene.exe main.qml

      3 способ
      Тот которым пользуетесь вы
      [main.o] Error2 никакого отношения к qml не имеет

        iG
        • May 1, 2016, 3:45 a.m.
          BlinCT
          • May 1, 2016, 5:12 a.m.
          Вот честно не пойму, на что он ругается. Как добавил этот код, так стала вылетать эта ошибка.
            BlinCT
            • May 1, 2016, 6:13 a.m.
            В общем нашёл, в чем проблема, всё запускается). Странно только, что строка
            height: container.visible ? columns.height + 5 : 30
            в вашем примере при открытии пункта меню высота идет полная на все, что там находится, то есть все элементы видны. А вот у меня почему-то открывается на +5 высоты.
              iG
              • May 1, 2016, 6:24 a.m.
              а файлы скопировал
              Controll/one.qml
              Controll/two.qml
              Controll/three.qml
                Evgenii Legotckoi
                • May 1, 2016, 10:29 a.m.

                У меня почему то при сборке с этим кодом ошибка [main.o] Error2 вылетает(

                Чаще всего такая ошибка появляется из-за мусорных недособранных выходных файлов.
                Обычно помогает очистка проекта и его пересборка.

                  BlinCT
                  • May 1, 2016, 8:05 p.m.

                  а файлы скопировал
                  Controll/one.qml
                  Controll/two.qml
                  Controll/three.qml

                  Это понятно. Я посмотрел ваш пример, и как написал, что в вашем случае панель подменю раскрывается на высоту того контента, что передается с другого файла. Но у меня при тех же настройках он не открывается настолько.

                    BlinCT
                    • May 1, 2016, 10:53 p.m.

                    Чаще всего такая ошибка появляется из-за мусорных недособранных выходных файлов.
                    Обычно помогает очистка проекта и его пересборка.

                    Ошибка оказалась в том, что я сделал копию каталога с проектом, и в нем оказалась часть названия на русском. Удалил русскую надпись, и все норм стало).

                      BlinCT
                      • May 1, 2016, 11:24 p.m.
                      Нашёл ошибку и в расположении по высоте элементов. Хотя может это и не совсем ошибка.
                      У меня стоял rectangle в котором был ColumnLayout и в нем снова rectangle.
                      Возможно снова с наследованием и якорями, но убрал родительский первый, и все стало компоноваться нормально.
                        iG
                        • May 1, 2016, 11:39 p.m.

                        скорее всего rectangle имеет некорректную высоту.

                        rectangle.height: ColumnLayout.height

                          Evgenii Legotckoi
                          • May 2, 2016, 11:48 a.m.

                          Возможно снова с наследованием и якорями

                          Я немного прикопаюсь, но в данном случае наследования не происходит. Родительский и дочерний объекты здесь подразумеваются в том плане, что дочерний объект вложен в родительский. Это снова отсылка к древовидной json-структуре.

                            Comments

                            Only authorized users can post comments.
                            Please, Log in or Sign up
                            • Last comments
                            • Evgenii Legotckoi
                              March 9, 2025, 9:02 p.m.
                              К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…
                            • VP
                              March 9, 2025, 4:14 p.m.
                              Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
                            • ИМ
                              Nov. 22, 2024, 9:51 p.m.
                              Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                            • Evgenii Legotckoi
                              Oct. 31, 2024, 11:37 p.m.
                              Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                            • A
                              Oct. 19, 2024, 5:19 p.m.
                              Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html