qml_puthon_user
qml_puthon_user05 грудня 2019 р. 03:27

подобие TabControl на qml

Доброго времени суток.
Пытаюсь реализовать отображение панелей (Pane) по нажатию лейблов(кнопок) на основной форме.
Код основной формы:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

import "./Components/Panels" as Panels

ApplicationWindow
{
    id: general_win
    visible: true
    width: 800
    height: 600
    title: qsTr("Test title")

    Rectangle 
    {
        color: "yellow"
        id: mainwindow

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        Panels.Panel_menu
        {
            id: p_men
        }

        Panels.Panel_top
        {
            id: p_t
            anchors.left: p_men.right
        }

        Panels.Panel_1
        {
            anchors.top: p_t.bottom
            anchors.left: p_men.right
        }

        Panels.Panel_2
        {
            anchors.top: p_t.bottom
            anchors.left: p_men.right
        }
    }
}

Код панели меню:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Pane 
{
    id: panel_menu
    width: 270
    height: 480
    padding: 0

    Rectangle 
    {
        width: panel_menu.width
        height: panel_menu.height
        color: "green"

        Column 
        {
            id: column
            x: 0
            y: 0
            width: panel_menu.width
            height: general_win.height

            Label 
            {
                id: lbl_p1
                width: panel_menu.width
                height: 50
                text: qsTr("Panel_1")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: "#ffffff"
                background: Rectangle 
                {
                    id: lbl_p11
                    color: "#2d343d"
                }

                MouseArea 
                {
                    id: mouseArea_1
                    x: 0
                    y: 25
                    anchors.fill: lbl_p11
                    hoverEnabled: true

                    onEntered: lbl_p11.color = "#289ed7"
                    onExited: lbl_p11.color = "#2d343d"

                    onClicked: 
                    {
                        Panel_1.visible = true
                        Panel_2.visible = false
                    }
                }
            }

            Label 
            {
                id: lbl_2
                width: panel_menu.width
                height: 50
                text: qsTr("Panel_2")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: "#ffffff"
                background: Rectangle 
                {
                    id: lbl_22
                    color: "#2d343d"
                }

                MouseArea 
                {
                    id: mouseArea_2
                    x: 0
                    y: 25
                    anchors.fill: lbl_2
                    hoverEnabled: true

                    onEntered: lbl_22.color = "#289ed7"
                    onExited: lbl_22.color = "#2d343d"

                    onClicked: 
                    {
                        Panel_1.visible = false
                        Panel_2.visible = true
                    }
                }
            }
        }
    }
}

Код Panel_1:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Pane 
{
    id: p1
    x: 170
    y: 35
    width: 470
    height: 445
    padding: 0
    visible: true

    anchors.top: Panel_top.bottom
    anchors.left: Panel_menu.right
    anchors.right: mainwindow.right
    anchors.bottom: mainwindow.bottom

    Rectangle
    {
        id: p1_content
        width: p1.width
        height: p1.height
        color: "#EB1EA6"
        Label
        {
            text: qsTr("Panel_1")
        }
    }

}

Код Panel_2:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Pane 
{
    id: p2
    x: 170
    y: 35
    width: 470
    height: 445
    padding: 0
    visible: false

    anchors.top: Panel_top.bottom
    anchors.left: Panel_menu.right
    anchors.right: mainwindow.right
    anchors.bottom: mainwindow.bottom

    Rectangle
    {
        id: p2_content
        width: p2.width
        height: p2.height
        color: "#92D161"
        Label
        {
            text: qsTr("Panel_2")
        }
    }

}

Обработчик нажатий у меня реализован в Panel_menu. Когда кликаю на lbl_p1, по идее, Panel_1 должна отобразиться, а Panel_2 оставаться скрытой и когда кликаю на lbl_p2, наоборот, Panel_1 должна скрыться, а Panel_2 отобразиться.
Мне нужно как-то передать событие onClicked с Panel_menu в главную форму? Или на главной форме делать обработчик onClicked? Или есть что-то попроще и получше?

Спасибо!

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

Вам це подобається? Поділіться в соціальних мережах!

2
Evgenii Legotckoi
  • 05 грудня 2019 р. 03:37
  • (відредаговано)
  • Відповідь була позначена як рішення.

Добрый день.

Изучите вот эту статью - QML - Урок 018. Loader в QML Qt - динамическая работа с компонентами . Там по сути используется нужный вам функционал. Но вам нужно использовать или Loader или StackView, в той статье описывается применение Loader.

Статья немного устарела, но при этом актуальна. Вам нужно только использовать QtQuick 2 в своём коде. Там написано на QtQuick 1. Разница будет только в импортах, а код должен быть одинаковым в обоих случаях.

    qml_puthon_user
    • 05 грудня 2019 р. 04:27

    Вот код, вдруг, кому поможет.
    Код основной формы:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    import "./Components/Panels" as Panels
    
    ApplicationWindow
    {
        id: general_win
        visible: true
        width: 1000
        height: 600
        title: qsTr("Test title")
    
        Rectangle 
        {
            color: "yellow"
            id: mainwindow
    
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
    
            Panels.Panel_menu
            {
                id: p_men
            }
    
            Panels.Panel_top
            {
                id: p_t
                anchors.left: p_men.right
            }
    
            Loader 
            {
                id: loader
                anchors.top: p_t.bottom
                anchors.left: p_men.right
                anchors.right: mainwindow.right
                anchors.bottom: mainwindow.bottom
    
            }
        }
    }
    

    Код панели меню:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    Pane 
    {
        id: panel_menu
        width: 270
        height: 480
        padding: 0
    
        Rectangle 
        {
            width: panel_menu.width
            height: panel_menu.height
            color: "green"
    
            Column 
            {
                id: column
                x: 0
                y: 0
                width: panel_menu.width
                height: general_win.height
    
                Label 
                {
                    id: lbl_p1
                    width: panel_menu.width
                    height: 50
                    text: qsTr("Panel_1")
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: "#ffffff"
                    background: Rectangle 
                    {
                        id: lbl_p11
                        color: "#2d343d"
                    }
    
                    MouseArea 
                    {
                        id: mouseArea_1
                        x: 0
                        y: 25
                        anchors.fill: lbl_p11
                        hoverEnabled: true
    
                        onEntered: lbl_p11.color = "#289ed7"
                        onExited: lbl_p11.color = "#2d343d"
    
                        onClicked: 
                        {
                            loader.source = "Panel_1.qml"
                        }
                    }
                }
    
                Label 
                {
                    id: lbl_2
                    width: panel_menu.width
                    height: 50
                    text: qsTr("Panel_2")
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: "#ffffff"
                    background: Rectangle 
                    {
                        id: lbl_22
                        color: "#2d343d"
                    }
    
                    MouseArea 
                    {
                        id: mouseArea_2
                        x: 0
                        y: 25
                        anchors.fill: lbl_2
                        hoverEnabled: true
    
                        onEntered: lbl_22.color = "#289ed7"
                        onExited: lbl_22.color = "#2d343d"
    
                        onClicked: 
                        {
                            loader.source = "Panel_2.qml"
                        }
                    }
                }
            }
        }
    }
    

    Код Panel_1:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    Pane 
    {
        id: p1
        width: 470
        height: 445
        padding: 0
        visible: true
    
        Rectangle
        {
            id: p1_content
            width: p1.width
            height: p1.height
            color: "#EB1EA6"
    
            Label
            {
                text: qsTr("Panel_1")
            }
        }   
    }
    

    Код Panel_2:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    Pane 
    {
        id: p2
        width: 470
        height: 445
        padding: 0
        visible: true
    
        Rectangle
        {
            id: p2_content
            width: p2.width
            height: p2.height
            color: "#92D161"
            Label
            {
                text: qsTr("Panel_2")
            }
        }
    }
    

      Коментарі

      Only authorized users can post comments.
      Please, Log in or Sign up
      sf

      C++ - Тест 004. Указатели, Массивы и Циклы

      • Результат:90бали,
      • Рейтинг балів8
      МВ

      Qt - Тест 001. Сигналы и слоты

      • Результат:68бали,
      • Рейтинг балів-1
      ЛС

      C++ - Тест 001. Первая программа и типы данных

      • Результат:53бали,
      • Рейтинг балів-4
      Останні коментарі
      A
      ALO1ZE19 жовтня 2024 р. 15:19
      Читалка файлів fb3 на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
      ИМ
      Игорь Максимов05 жовтня 2024 р. 14:51
      Django - Урок 064. Як написати розширення для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
      d
      dblas505 липня 2024 р. 18:02
      QML - Урок 016. База даних SQLite та робота з нею в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
      k
      kmssr09 лютого 2024 р. 02:43
      Qt Linux - Урок 001. Автозапуск програми Qt під Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
      АК
      Анатолий Кононенко05 лютого 2024 р. 09:50
      Qt WinAPI - Урок 007. Робота з ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
      Тепер обговоріть на форумі
      J
      JacobFib17 жовтня 2024 р. 10:27
      добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
      ИМ
      Игорь Максимов03 жовтня 2024 р. 11:05
      Реализация навигации по разделам Спасибо Евгений!
      JW
      Jhon Wick01 жовтня 2024 р. 22: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 вересня 2024 р. 16:09
      Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
      F
      Fynjy22 липня 2024 р. 11:15
      при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

      Слідкуйте за нами в соціальних мережах