qml_puthon_user
Dec. 5, 2019, 2:27 p.m.

подобие TabControl на qml

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

  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. import QtQuick.Layouts 1.3
  4.  
  5. import "./Components/Panels" as Panels
  6.  
  7. ApplicationWindow
  8. {
  9. id: general_win
  10. visible: true
  11. width: 800
  12. height: 600
  13. title: qsTr("Test title")
  14.  
  15. Rectangle
  16. {
  17. color: "yellow"
  18. id: mainwindow
  19.  
  20. anchors.top: parent.top
  21. anchors.left: parent.left
  22. anchors.right: parent.right
  23. anchors.bottom: parent.bottom
  24.  
  25. Panels.Panel_menu
  26. {
  27. id: p_men
  28. }
  29.  
  30. Panels.Panel_top
  31. {
  32. id: p_t
  33. anchors.left: p_men.right
  34. }
  35.  
  36. Panels.Panel_1
  37. {
  38. anchors.top: p_t.bottom
  39. anchors.left: p_men.right
  40. }
  41.  
  42. Panels.Panel_2
  43. {
  44. anchors.top: p_t.bottom
  45. anchors.left: p_men.right
  46. }
  47. }
  48. }

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

  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. import QtQuick.Layouts 1.3
  4.  
  5. Pane
  6. {
  7. id: panel_menu
  8. width: 270
  9. height: 480
  10. padding: 0
  11.  
  12. Rectangle
  13. {
  14. width: panel_menu.width
  15. height: panel_menu.height
  16. color: "green"
  17.  
  18. Column
  19. {
  20. id: column
  21. x: 0
  22. y: 0
  23. width: panel_menu.width
  24. height: general_win.height
  25.  
  26. Label
  27. {
  28. id: lbl_p1
  29. width: panel_menu.width
  30. height: 50
  31. text: qsTr("Panel_1")
  32. verticalAlignment: Text.AlignVCenter
  33. horizontalAlignment: Text.AlignHCenter
  34. color: "#ffffff"
  35. background: Rectangle
  36. {
  37. id: lbl_p11
  38. color: "#2d343d"
  39. }
  40.  
  41. MouseArea
  42. {
  43. id: mouseArea_1
  44. x: 0
  45. y: 25
  46. anchors.fill: lbl_p11
  47. hoverEnabled: true
  48.  
  49. onEntered: lbl_p11.color = "#289ed7"
  50. onExited: lbl_p11.color = "#2d343d"
  51.  
  52. onClicked:
  53. {
  54. Panel_1.visible = true
  55. Panel_2.visible = false
  56. }
  57. }
  58. }
  59.  
  60. Label
  61. {
  62. id: lbl_2
  63. width: panel_menu.width
  64. height: 50
  65. text: qsTr("Panel_2")
  66. verticalAlignment: Text.AlignVCenter
  67. horizontalAlignment: Text.AlignHCenter
  68. color: "#ffffff"
  69. background: Rectangle
  70. {
  71. id: lbl_22
  72. color: "#2d343d"
  73. }
  74.  
  75. MouseArea
  76. {
  77. id: mouseArea_2
  78. x: 0
  79. y: 25
  80. anchors.fill: lbl_2
  81. hoverEnabled: true
  82.  
  83. onEntered: lbl_22.color = "#289ed7"
  84. onExited: lbl_22.color = "#2d343d"
  85.  
  86. onClicked:
  87. {
  88. Panel_1.visible = false
  89. Panel_2.visible = true
  90. }
  91. }
  92. }
  93. }
  94. }
  95. }

Код Panel_1:

  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. import QtQuick.Layouts 1.3
  4.  
  5. Pane
  6. {
  7. id: p1
  8. x: 170
  9. y: 35
  10. width: 470
  11. height: 445
  12. padding: 0
  13. visible: true
  14.  
  15. anchors.top: Panel_top.bottom
  16. anchors.left: Panel_menu.right
  17. anchors.right: mainwindow.right
  18. anchors.bottom: mainwindow.bottom
  19.  
  20. Rectangle
  21. {
  22. id: p1_content
  23. width: p1.width
  24. height: p1.height
  25. color: "#EB1EA6"
  26. Label
  27. {
  28. text: qsTr("Panel_1")
  29. }
  30. }
  31.  
  32. }

Код Panel_2:

  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. import QtQuick.Layouts 1.3
  4.  
  5. Pane
  6. {
  7. id: p2
  8. x: 170
  9. y: 35
  10. width: 470
  11. height: 445
  12. padding: 0
  13. visible: false
  14.  
  15. anchors.top: Panel_top.bottom
  16. anchors.left: Panel_menu.right
  17. anchors.right: mainwindow.right
  18. anchors.bottom: mainwindow.bottom
  19.  
  20. Rectangle
  21. {
  22. id: p2_content
  23. width: p2.width
  24. height: p2.height
  25. color: "#92D161"
  26. Label
  27. {
  28. text: qsTr("Panel_2")
  29. }
  30. }
  31.  
  32. }

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

Спасибо!

2

Do you like it? Share on social networks!

2
Evgenii Legotckoi
  • Dec. 5, 2019, 2:37 p.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, 3:27 p.m.

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

    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3. import QtQuick.Layouts 1.3
    4.  
    5. import "./Components/Panels" as Panels
    6.  
    7. ApplicationWindow
    8. {
    9. id: general_win
    10. visible: true
    11. width: 1000
    12. height: 600
    13. title: qsTr("Test title")
    14.  
    15. Rectangle
    16. {
    17. color: "yellow"
    18. id: mainwindow
    19.  
    20. anchors.top: parent.top
    21. anchors.left: parent.left
    22. anchors.right: parent.right
    23. anchors.bottom: parent.bottom
    24.  
    25. Panels.Panel_menu
    26. {
    27. id: p_men
    28. }
    29.  
    30. Panels.Panel_top
    31. {
    32. id: p_t
    33. anchors.left: p_men.right
    34. }
    35.  
    36. Loader
    37. {
    38. id: loader
    39. anchors.top: p_t.bottom
    40. anchors.left: p_men.right
    41. anchors.right: mainwindow.right
    42. anchors.bottom: mainwindow.bottom
    43.  
    44. }
    45. }
    46. }

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

    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3. import QtQuick.Layouts 1.3
    4.  
    5. Pane
    6. {
    7. id: panel_menu
    8. width: 270
    9. height: 480
    10. padding: 0
    11.  
    12. Rectangle
    13. {
    14. width: panel_menu.width
    15. height: panel_menu.height
    16. color: "green"
    17.  
    18. Column
    19. {
    20. id: column
    21. x: 0
    22. y: 0
    23. width: panel_menu.width
    24. height: general_win.height
    25.  
    26. Label
    27. {
    28. id: lbl_p1
    29. width: panel_menu.width
    30. height: 50
    31. text: qsTr("Panel_1")
    32. verticalAlignment: Text.AlignVCenter
    33. horizontalAlignment: Text.AlignHCenter
    34. color: "#ffffff"
    35. background: Rectangle
    36. {
    37. id: lbl_p11
    38. color: "#2d343d"
    39. }
    40.  
    41. MouseArea
    42. {
    43. id: mouseArea_1
    44. x: 0
    45. y: 25
    46. anchors.fill: lbl_p11
    47. hoverEnabled: true
    48.  
    49. onEntered: lbl_p11.color = "#289ed7"
    50. onExited: lbl_p11.color = "#2d343d"
    51.  
    52. onClicked:
    53. {
    54. loader.source = "Panel_1.qml"
    55. }
    56. }
    57. }
    58.  
    59. Label
    60. {
    61. id: lbl_2
    62. width: panel_menu.width
    63. height: 50
    64. text: qsTr("Panel_2")
    65. verticalAlignment: Text.AlignVCenter
    66. horizontalAlignment: Text.AlignHCenter
    67. color: "#ffffff"
    68. background: Rectangle
    69. {
    70. id: lbl_22
    71. color: "#2d343d"
    72. }
    73.  
    74. MouseArea
    75. {
    76. id: mouseArea_2
    77. x: 0
    78. y: 25
    79. anchors.fill: lbl_2
    80. hoverEnabled: true
    81.  
    82. onEntered: lbl_22.color = "#289ed7"
    83. onExited: lbl_22.color = "#2d343d"
    84.  
    85. onClicked:
    86. {
    87. loader.source = "Panel_2.qml"
    88. }
    89. }
    90. }
    91. }
    92. }
    93. }

    Код Panel_1:

    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3. import QtQuick.Layouts 1.3
    4.  
    5. Pane
    6. {
    7. id: p1
    8. width: 470
    9. height: 445
    10. padding: 0
    11. visible: true
    12.  
    13. Rectangle
    14. {
    15. id: p1_content
    16. width: p1.width
    17. height: p1.height
    18. color: "#EB1EA6"
    19.  
    20. Label
    21. {
    22. text: qsTr("Panel_1")
    23. }
    24. }
    25. }

    Код Panel_2:

    1. import QtQuick 2.12
    2. import QtQuick.Controls 2.12
    3. import QtQuick.Layouts 1.3
    4.  
    5. Pane
    6. {
    7. id: p2
    8. width: 470
    9. height: 445
    10. padding: 0
    11. visible: true
    12.  
    13. Rectangle
    14. {
    15. id: p2_content
    16. width: p2.width
    17. height: p2.height
    18. color: "#92D161"
    19. Label
    20. {
    21. text: qsTr("Panel_2")
    22. }
    23. }
    24. }

      Comments

      Only authorized users can post comments.
      Please, Log in or Sign up
      • Last comments
      • AK
        April 1, 2025, 11:41 a.m.
        Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
      • Evgenii Legotckoi
        March 9, 2025, 9:02 p.m.
        К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…
      • VP
        March 9, 2025, 4:14 p.m.
        Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
      • ИМ
        Nov. 22, 2024, 9:51 p.m.
        Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
      • Evgenii Legotckoi
        Oct. 31, 2024, 11:37 p.m.
        Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup