BlinCT
BlinCT30. April 2016 13:11

Выпадающий подпункт в меню при нажатии. Разработка под 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 мне кажется не подходящим. Хотя я могу и ошибаться из-за малых знаний.

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Stabiles Hosting des sozialen Netzwerks EVILEG. Wir empfehlen VDS-Hosting für Django-Projekte.

Magst du es? In sozialen Netzwerken teilen!

13
iG
  • 30. April 2016 15:36
  • Die Antwort wurde als Lösung markiert.

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

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
    • 30. April 2016 16:35

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

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

      iG
      • 30. April 2016 17:06

      мздец
      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
        • 30. April 2016 17:45
          BlinCT
          • 30. April 2016 19:12
          Вот честно не пойму, на что он ругается. Как добавил этот код, так стала вылетать эта ошибка.
            BlinCT
            • 30. April 2016 20:13
            В общем нашёл, в чем проблема, всё запускается). Странно только, что строка
            height: container.visible ? columns.height + 5 : 30
            в вашем примере при открытии пункта меню высота идет полная на все, что там находится, то есть все элементы видны. А вот у меня почему-то открывается на +5 высоты.
              iG
              • 30. April 2016 20:24
              а файлы скопировал
              Controll/one.qml
              Controll/two.qml
              Controll/three.qml
                Evgenii Legotckoi
                • 1. Mai 2016 00:29

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

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

                  BlinCT
                  • 1. Mai 2016 10:05

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

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

                    BlinCT
                    • 1. Mai 2016 12:53

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

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

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

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

                        rectangle.height: ColumnLayout.height

                          Evgenii Legotckoi
                          • 2. Mai 2016 01:48

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

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

                            Kommentare

                            Nur autorisierte Benutzer können Kommentare posten.
                            Bitte Anmelden oder Registrieren
                            Letzte Kommentare
                            ИМ
                            Игорь Максимов5. Oktober 2024 07:51
                            Django – Lektion 064. So schreiben Sie eine Python-Markdown-Erweiterung Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                            d
                            dblas55. Juli 2024 11:02
                            QML - Lektion 016. SQLite-Datenbank und das Arbeiten damit in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                            k
                            kmssr8. Februar 2024 18:43
                            Qt Linux - Lektion 001. Autorun Qt-Anwendung unter Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                            Qt WinAPI - Lektion 007. Arbeiten mit ICMP-Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                            EVA
                            EVA25. Dezember 2023 10:30
                            Boost - statisches Verknüpfen im CMake-Projekt unter Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                            Jetzt im Forum diskutieren
                            J
                            JacobFib17. Oktober 2024 03:27
                            добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
                            JW
                            Jhon Wick1. Oktober 2024 15:52
                            Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…
                            КГ
                            Кирилл Гусарев27. September 2024 09:09
                            Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
                            F
                            Fynjy22. Juli 2024 04:15
                            при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

                            Folgen Sie uns in sozialen Netzwerken