qml_puthon_user
qml_puthon_userDec. 5, 2019, 3:27 a.m.

подобие 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? Или есть что-то попроще и получше?

Спасибо!

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!

2
Evgenii Legotckoi
  • Dec. 5, 2019, 3:37 a.m.
  • (edited)
  • The answer was marked as a solution.

Добрый день.

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

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

    qml_puthon_user
    • Dec. 5, 2019, 4:27 a.m.

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

    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")
            }
        }
    }
    

      Comments

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

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

      • Result:50points,
      • Rating points-4
      m

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

      • Result:80points,
      • Rating points4
      m

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

      • Result:20points,
      • Rating points-10
      Last comments
      i
      innorwallNov. 15, 2024, 5:26 a.m.
      Qt/C++ - Lesson 031. QCustomPlot – The build of charts with time buy generic priligy We can just chat, and we will not lose too much time anyway
      i
      innorwallNov. 15, 2024, 3:03 a.m.
      Qt/C++ - Lesson 060. Configuring the appearance of the application in runtime I didnt have an issue work colors priligy dapoxetine 60mg revia cost uk August 3, 2022 Reply
      i
      innorwallNov. 14, 2024, 8:07 p.m.
      Circuit switching and packet data transmission networks Angioedema 1 priligy dapoxetine
      i
      innorwallNov. 14, 2024, 7:42 p.m.
      How to Copy Files in Linux If only females relatives with DZ offspring were considered these percentages were 23 order priligy online uk
      i
      innorwallNov. 14, 2024, 5:09 p.m.
      Qt/C++ - Tutorial 068. Hello World using the CMAKE build system in CLion ditropan pristiq dosing With the Yankees leading, 4 3, Rivera jogged in from the bullpen to a standing ovation as he prepared for his final appearance in Chicago buy priligy pakistan
      Now discuss on the forum
      i
      innorwallNov. 14, 2024, 11:39 a.m.
      добавить qlineseries в функции priligy amazon canada 93 GREB1 protein GREB1 AB011147 6
      i
      innorwallNov. 11, 2024, 6:55 p.m.
      Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
      9
      9AnonimOct. 25, 2024, 4:10 p.m.
      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

      Follow us in social networks