Dec. 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.
2

Добрый день.

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

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

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

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
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

DK
Jan. 16, 2020, 3:19 a.m.
Dmitrij Korjagin

C++ - Test 001. The first program and data types

  • Result:73points,
  • Rating points1
LZ
Jan. 16, 2020, 3:03 a.m.
Lilija Ziganurova

C++ - Test 005. Structures and Classes

  • Result:50points,
  • Rating points-4
p
Jan. 13, 2020, 4:59 p.m.
popkadurak

C++ - Test 002. Constants

  • Result:100points,
  • Rating points10
Last comments
Jan. 17, 2020, 2:31 a.m.
Andrej Jankovich

Выглядит как ошибка библиотеки. Расскажите подробно на какой платформе вы собираете проект (MinGW или MSVC) их версии и версии Qt.
D
Jan. 16, 2020, 12:06 p.m.
DENIZ1819

Доброго времени суток, не подскажите, что делать в данной ситуации, после того, как я сделал все вышеуказанные инструкции для подключения библиотеки к проекту?
Jan. 14, 2020, 5:33 a.m.
Evgenij Legotskoj

Рекомендую Wt, достаточно мощная вещь. Этот фреймворк может использоваться для написания сайтов на C++, либо можно использовать только отдельный компоненты, например только ORM. Но я не знаю, ка…
a
Jan. 14, 2020, 5:29 a.m.
ayb

Спасибо за инфу. Поиск качественной ORM привел меня только к sqlite_orm, но не подходит из-за необходимости полноценной поддержки c++14. Про framework Wt не слышал, спасибо за наводку.
Jan. 14, 2020, 2:50 a.m.
Evgenij Legotskoj

Вы заблуждаетесь. Любая нормальная ORM позволяет выполнение сырых SQL запросов. А если хорошо разобраться в работе моделей данных в Qt, то не составит труда использовать ORM вместе с Qt, ту же с…
Now discuss on the forum
VZ
Jan. 18, 2020, 7:25 a.m.
Vladimir Zhitkovsky

В приложении есть страницы с контролами. в с++ я заполняю структуры ассоциированные с контролами в qml. затем генерю сигнал о том, что все данные готовы и в qml по этому сигналу заполняю контрол…
Jan. 18, 2020, 7:12 a.m.
Ruslan Polupan

Строку host разкоментировать и указать адрес сервера [listener];host=192.168.0.100port=8080minThreads=4maxThreads=100cleanupInterval=60000readTimeout=60000maxRequestSize=16000maxMulti…
Jan. 17, 2020, 2:20 a.m.
Intruder

Александр, доброго дня! Я тоже только учусь и поэтому мой код может быть не совершенен. За отклик большое спасибо.
L
Jan. 16, 2020, 8:14 p.m.
LesLype

Oct Products Similiar To Lasix Kamagra Now.Co.Uk Sky Pharmacy Canada [url=http://cialibuy.com]Buy Cialis[/url] Viagra Ricetta Ripetibile
Jan. 16, 2020, 6:05 p.m.
Aleksej Vnukov

в лоадер вроде как нельзя передать значение при загрузке, я не нашел такой возможности, через стек без проблем. если использую лоадер - я передаю в С++ нужные параметры, а потом при загрузке стр…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB