qml_puthon_user
qml_puthon_userЖел. 5, 2019, 3: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
  • Жел. 5, 2019, 3:37 Т.Ж.
  • (өңделген)
  • Жауап шешім ретінде белгіленді.

Добрый день.

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

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

    qml_puthon_user
    • Жел. 5, 2019, 4: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")
            }
        }
    }
    

      Пікірлер

      Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
      Кіріңіз немесе Тіркеліңіз
      AD

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

      • Нәтиже:50ұпай,
      • Бағалау ұпайлары-4
      m
      • molni99
      • Қаз. 26, 2024, 8:37 Т.Ж.

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

      • Нәтиже:80ұпай,
      • Бағалау ұпайлары4
      m
      • molni99
      • Қаз. 26, 2024, 8:29 Т.Ж.

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

      • Нәтиже:20ұпай,
      • Бағалау ұпайлары-10
      Соңғы пікірлер
      ИМ
      Игорь МаксимовҚар. 22, 2024, 7:51 Т.Қ.
      Django - Оқулық 017. Теңшелген Django кіру беті Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
      Evgenii Legotckoi
      Evgenii LegotckoiҚаз. 31, 2024, 9:37 Т.Қ.
      Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
      A
      ALO1ZEҚаз. 19, 2024, 3:19 Т.Қ.
      Qt Creator көмегімен fb3 файл оқу құралы Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
      ИМ
      Игорь МаксимовҚаз. 5, 2024, 2:51 Т.Қ.
      Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
      d
      dblas5Шілде 5, 2024, 6:02 Т.Қ.
      QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
      Енді форумда талқылаңыз
      Evgenii Legotckoi
      Evgenii LegotckoiМаусым 24, 2024, 10:11 Т.Қ.
      добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
      t
      tonypeachey1Қар. 15, 2024, 2:04 Т.Қ.
      google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
      NSProject
      NSProjectМаусым 4, 2022, 10:49 Т.Ж.
      Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
      9
      9AnonimҚаз. 25, 2024, 4:10 Т.Қ.
      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

      Бізді әлеуметтік желілерде бақылаңыз