BlinCT
BlinCTApril 30, 2016, 1: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 мне кажется не подходящим. Хотя я могу и ошибаться из-за малых знаний.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

13
iG
  • April 30, 2016, 3:36 p.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
    • April 30, 2016, 4:35 p.m.

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

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

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

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

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

                  BlinCT
                  • May 1, 2016, 10:05 a.m.

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

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

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

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

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

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

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

                        rectangle.height: ColumnLayout.height

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

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

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

                            Comments

                            Only authorized users can post comments.
                            Please, Log in or Sign up
                            Дмитрий

                            C ++ - Test 004. Pointers, Arrays and Loops

                            • Result:60points,
                            • Rating points-1
                            Дмитрий

                            C++ - Тест 003. Условия и циклы

                            • Result:92points,
                            • Rating points8
                            d
                            • dsfs
                            • April 26, 2024, 4:56 a.m.

                            C ++ - Test 004. Pointers, Arrays and Loops

                            • Result:80points,
                            • Rating points4
                            Last comments
                            k
                            kmssrFeb. 8, 2024, 6:43 p.m.
                            Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                            Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                            EVA
                            EVADec. 25, 2023, 10:30 a.m.
                            Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                            J
                            JonnyJoDec. 25, 2023, 8:38 a.m.
                            Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                            G
                            GvozdikDec. 18, 2023, 9:01 p.m.
                            Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                            Now discuss on the forum
                            G
                            George13May 7, 2024, 12:27 a.m.
                            добавить qlineseries в функции в функции: "GPlotter::addSeries(QString title, QVector &arr)" я вызываю метод setChart(...), я в конструктор передал адрес на QChartView элемент
                            BlinCT
                            BlinCTMay 5, 2024, 5:46 a.m.
                            Написать свой GraphsView Всем привет. В Qt есть давольно старый обьект дял работы с графиками ChartsView и есть в 6.7 новый но очень сырой и со слабым функционалом GraphsView. По этой причине я хочу написать х…
                            PS
                            Peter SonMay 3, 2024, 5:57 p.m.
                            Best Indian Food Restaurant In Cincinnati OH Ready to embark on a gastronomic journey like no other? Join us at App india restaurant and discover why we're renowned as the Best Indian Food Restaurant In Cincinnati OH . Whether y…
                            Evgenii Legotckoi
                            Evgenii LegotckoiMay 2, 2024, 2:07 p.m.
                            Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.
                            IscanderChe
                            IscanderCheApril 30, 2024, 4:22 a.m.
                            Во Flask рендер шаблона не передаётся в браузер Доброе утро! Имеется вот такой шаблон: <!doctype html><html> <head> <title>{{ title }}</title> <link rel="stylesheet" href="{{ url_…

                            Follow us in social networks