Михаиллл
8 апреля 2019 г. 18:05

Как в QML сделать растягивающийся интерфейс

qml

Добрый день.
Как в QML сделать растягивающийся интерфейс?
В Qt дизайнере можно регулировать отношение виджитов на экране через соотношение сгрупированных лэйаутов на экране. Хорошо это описанно тут
Но как это можно реализовать в QML?
Вот пример страницы, на которой тринируюсь 

  1. import QtQuick 2.4
  2. import QtQuick.Controls 2.4
  3.  
  4. Item {
  5.     id: page2element
  6.     width: 400
  7.     height: 600
  8.     property alias page2Button0: page2Button0
  9.     property alias page2Button1: page2Button1
  10.     property alias page2Button2: page2Button2
  11.     property alias page2Button3: page2Button3
  12.     property alias page2ButtonMenu: page2ButtonMenu
  13.     property alias page2Label1: page2Label1
  14.     property alias page2Label2: page2Label2
  15.  
  16.  
  17.  
  18.     Button {
  19.         id: page2ButtonMenu
  20.         x: 150
  21.         y: 493
  22.         text: qsTr("МЕНЮ")
  23.         anchors.horizontalCenter: parent.horizontalCenter
  24.         font.pointSize: 18
  25.     }
  26.  
  27.     Label {
  28.         id: page2labe0
  29.         x: 57
  30.         y: 49
  31.         width: 286
  32.         height: 33
  33.         text: qsTr("Выберете красный цвет")
  34.         anchors.horizontalCenterOffset: 0
  35.         anchors.horizontalCenter: parent.horizontalCenter
  36.         font.family: "Verdana"
  37.         horizontalAlignment: Text.AlignHCenter
  38.         font.pixelSize: 22
  39.         font.weight: Font.Thin
  40.     }
  41.  
  42.     Label {
  43.         id: page2Label1
  44.         x: 122
  45.         y: 343
  46.         width: 156
  47.         height: 56
  48.         text: qsTr("Побед: ")
  49.         anchors.horizontalCenter: parent.horizontalCenter
  50.         horizontalAlignment: Text.AlignHCenter
  51.         font.pointSize: 20
  52.     }
  53.  
  54.  
  55.  
  56.     Label {
  57.         id: page2Label2
  58.         x: 122
  59.         y: 419
  60.         width: 156
  61.         height: 56
  62.         text: qsTr("1 из 20")
  63.         anchors.horizontalCenter: parent.horizontalCenter
  64.         horizontalAlignment: Text.AlignHCenter
  65.         font.pointSize: 20
  66.     }
  67.  
  68.     Row {
  69.         id: row
  70.         x: 29
  71.         y: 102
  72.         spacing: 50
  73.         anchors.horizontalCenter: parent.horizontalCenter
  74.  
  75.         Button {
  76.             id: page2Button0
  77.             width: 100
  78.             height: 100
  79.             Image {
  80.                 id: page2image1
  81.                 width: 100
  82.                 height: 100
  83.                 anchors.rightMargin: 0
  84.                 anchors.bottomMargin: 0
  85.                 anchors.fill: parent
  86.                 source: "qrc:/images/images/close.png"
  87.                 fillMode: Image.Stretch
  88.             }
  89.         }
  90.  
  91.         Button {
  92.             id: page2Button1
  93.             width: 100
  94.             height: 100
  95.             Image {
  96.                 id: page2image2
  97.                 width: 100
  98.                 height: 100
  99.                 anchors.rightMargin: 0
  100.                 anchors.bottomMargin: 0
  101.                 anchors.fill: parent
  102.                 source: "qrc:/images/images/close.png"
  103.                 fillMode: Image.Stretch
  104.             }
  105.         }
  106.     }
  107.  
  108.     Row {
  109.         id: row1
  110.         x: 57
  111.         y: 220
  112.         spacing: 50
  113.         anchors.horizontalCenter: parent.horizontalCenter
  114.  
  115.         Button {
  116.             id: page2Button2
  117.             width: 100
  118.             height: 100
  119.             Image {
  120.                 id: page2image3
  121.                 width: 100
  122.                 height: 100
  123.                 anchors.leftMargin: 0
  124.                 anchors.topMargin: 0
  125.                 anchors.rightMargin: 0
  126.                 anchors.bottomMargin: 0
  127.                 anchors.fill: parent
  128.                 source: "qrc:/images/images/close.png"
  129.                 fillMode: Image.Stretch
  130.             }
  131.         }
  132.  
  133.         Button {
  134.             id: page2Button3
  135.             width: 100
  136.             height: 100
  137.             Image {
  138.                 id: page2image4
  139.                 width: 100
  140.                 height: 100
  141.                 anchors.rightMargin: 0
  142.                 anchors.bottomMargin: 0
  143.                 anchors.fill: parent
  144.                 source: "qrc:/images/images/close.png"
  145.                 fillMode: Image.Stretch
  146.             }
  147.         }
  148.     }
  149.     states: [
  150.         State {
  151.             name: "Page2State1"
  152.  
  153.             PropertyChanges {
  154.                 target: page2image1
  155.                 source: "qrc:/images/images/red.png"
  156.             }
  157.  
  158.             PropertyChanges {
  159.                 target: page2image2
  160.                 source: "qrc:/images/images/black.png"
  161.             }
  162.  
  163.             PropertyChanges {
  164.                 target: page2image3
  165.                 source: "qrc:/images/images/black.png"
  166.             }
  167.  
  168.             PropertyChanges {
  169.                 target: page2image4
  170.                 source: "qrc:/images/images/black.png"
  171.             }
  172.         },
  173.         State {
  174.             name: "Page2State2"
  175.  
  176.             PropertyChanges {
  177.                 target: page2image1
  178.                 source: "qrc:/images/images/black.png"
  179.             }
  180.  
  181.             PropertyChanges {
  182.                 target: page2image2
  183.                 source: "qrc:/images/images/red.png"
  184.             }
  185.  
  186.             PropertyChanges {
  187.                 target: page2image3
  188.                 source: "qrc:/images/images/black.png"
  189.             }
  190.  
  191.             PropertyChanges {
  192.                 target: page2image4
  193.                 source: "qrc:/images/images/black.png"
  194.             }
  195.         },
  196.         State {
  197.             name: "Page2State3"
  198.  
  199.             PropertyChanges {
  200.                 target: page2image1
  201.                 source: "qrc:/images/images/black.png"
  202.             }
  203.  
  204.             PropertyChanges {
  205.                 target: page2image2
  206.                 source: "qrc:/images/images/black.png"
  207.             }
  208.  
  209.             PropertyChanges {
  210.                 target: page2image3
  211.                 source: "qrc:/images/images/red.png"
  212.             }
  213.  
  214.             PropertyChanges {
  215.                 target: page2image4
  216.                 source: "qrc:/images/images/black.png"
  217.             }
  218.         },
  219.         State {
  220.             name: "Page2State4"
  221.  
  222.             PropertyChanges {
  223.                 target: page2image1
  224.                 source: "qrc:/images/images/black.png"
  225.             }
  226.  
  227.             PropertyChanges {
  228.                 target: page2image4
  229.                 source: "qrc:/images/images/red.png"
  230.             }
  231.  
  232.             PropertyChanges {
  233.                 target: page2image2
  234.                 source: "qrc:/images/images/black.png"
  235.             }
  236.  
  237.             PropertyChanges {
  238.                 target: page2image3
  239.                 source: "qrc:/images/images/black.png"
  240.             }
  241.         },
  242.         State {
  243.             name: "Page2State0"
  244.         }
  245.     ]
  246. }
  247.  
Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
2
99

Вам это нравится? Поделитесь в социальных сетях!

1.1K
10
0
0
0
10
Алексей Внуков
  • 8 апреля 2019 г. 18:34

у тебя все элементы имеют точку привязки (х,у), используй соотношение елементов друг к другу

    0
    0
    0
    Михаиллл
    • 8 апреля 2019 г. 19:17

    А как это сделать. Нужно узнавать ширину и высоту дисплея?

      0
      0
      0
      Алексей Внуков
      • 8 апреля 2019 г. 20:32
      • (ред.)

      суть. я думаю поймете, а там експеременты все покажут
      и ознакомьтесь с этим 

      1. import QtQuick 2.4
      2. import QtQuick.Controls 2.4
      3.  
      4. Item {
      5.     id: page2element
      6.     width: 400
      7.     height: 600
      8.  
      9.     Label {
      10.         id: page2labe0
      11.         anchors
      12.         {
      13.             top: parent.top
      14.  
      15.         }
      16.         text: qsTr("Выберете красный цвет")
      17.         anchors.horizontalCenter: parent.horizontalCenter
      18.         font.family: "Verdana"
      19.         horizontalAlignment: Text.AlignHCenter
      20.         font.pixelSize: 22
      21.         font.weight: Font.Thin
      22.     }
      23.  
      24.     Grid {
      25.         id: grid
      26.         anchors
      27.         {
      28.             top:page2labe0.bottom
      29.             left: parent.left
      30.             right:parent.right
      31.         }
      32.         height: 400
      33.         rows: 2
      34.         columns: 2
      35.         spacing: 5
      36.  
      37.         Button {
      38.             id: page2Button0
      39.             width: parent.width/2
      40.             height: parent.height/2
      41.             Image {
      42.                 id: page2image1
      43.                 anchors.fill: parent
      44.                 source: "qrc:/images/images/close.png"
      45.                 fillMode: Image.Stretch
      46.             }
      47.         }
      48.  
      49.         Button {
      50.             id: page2Button1
      51.             width: parent.width/2
      52.             height: parent.height/2
      53.             Image {
      54.                 id: page2image2
      55.                 anchors.fill: parent
      56.                 source: "qrc:/images/images/close.png"
      57.                 fillMode: Image.Stretch
      58.             }
      59.         }
      60.  
      61.         Button {
      62.             id: page2Button2
      63.             width: parent.width/2
      64.             height: parent.height/2
      65.             Image {
      66.                 id: page2image3
      67.                 anchors.fill: parent
      68.                 source: "qrc:/images/images/close.png"
      69.                 fillMode: Image.Stretch
      70.             }
      71.         }
      72.  
      73.         Button {
      74.             id: page2Button3
      75.             width: parent.width/2
      76.             height: parent.height/2
      77.             Image {
      78.                 id: page2image4
      79.                 anchors.fill: parent
      80.                 source: "qrc:/images/images/close.png"
      81.                 fillMode: Image.Stretch
      82.             }
      83.         }
      84.     }
      85.  
      86.  
      87.     Column
      88.     {
      89.         anchors.top: grid.bottom
      90.         anchors.bottom: page2element.bottom
      91.         anchors.horizontalCenter: parent.horizontalCenter
      92.         height: parent.height/3
      93.  
      94.         Label
      95.         {
      96.             id: page2Label1
      97.             text: qsTr("Побед: ")
      98.             horizontalAlignment: Text.AlignHCenter
      99.             font.pointSize: 20
      100.         }
      101.  
      102.         Label
      103.         {
      104.             id: page2Label2
      105.             text: qsTr("1 из 20")
      106.             horizontalAlignment: Text.AlignHCenter
      107.             font.pointSize: 20
      108.         }
      109.  
      110.  
      111.         Button
      112.         {
      113.             id: page2ButtonMenu
      114.  
      115.             text: qsTr("МЕНЮ")
      116.  
      117.             font.pointSize: 18
      118.         }
      119.     }
      120.     states: [
      121.         State {
      122.             name: "Page2State1"
      123.  
      124.             PropertyChanges {
      125.                 target: page2image1
      126.                 source: "qrc:/images/images/red.png"
      127.             }
      128.  
      129.             PropertyChanges {
      130.                 target: page2image2
      131.                 source: "qrc:/images/images/black.png"
      132.             }
      133.  
      134.             PropertyChanges {
      135.                 target: page2image3
      136.                 source: "qrc:/images/images/black.png"
      137.             }
      138.  
      139.             PropertyChanges {
      140.                 target: page2image4
      141.                 source: "qrc:/images/images/black.png"
      142.             }
      143.         },
      144.         State {
      145.             name: "Page2State2"
      146.  
      147.             PropertyChanges {
      148.                 target: page2image1
      149.                 source: "qrc:/images/images/black.png"
      150.             }
      151.  
      152.             PropertyChanges {
      153.                 target: page2image2
      154.                 source: "qrc:/images/images/red.png"
      155.             }
      156.  
      157.             PropertyChanges {
      158.                 target: page2image3
      159.                 source: "qrc:/images/images/black.png"
      160.             }
      161.  
      162.             PropertyChanges {
      163.                 target: page2image4
      164.                 source: "qrc:/images/images/black.png"
      165.             }
      166.         },
      167.         State {
      168.             name: "Page2State3"
      169.  
      170.             PropertyChanges {
      171.                 target: page2image1
      172.                 source: "qrc:/images/images/black.png"
      173.             }
      174.  
      175.             PropertyChanges {
      176.                 target: page2image2
      177.                 source: "qrc:/images/images/black.png"
      178.             }
      179.  
      180.             PropertyChanges {
      181.                 target: page2image3
      182.                 source: "qrc:/images/images/red.png"
      183.             }
      184.  
      185.             PropertyChanges {
      186.                 target: page2image4
      187.                 source: "qrc:/images/images/black.png"
      188.             }
      189.         },
      190.         State {
      191.             name: "Page2State4"
      192.  
      193.             PropertyChanges {
      194.                 target: page2image1
      195.                 source: "qrc:/images/images/black.png"
      196.             }
      197.  
      198.             PropertyChanges {
      199.                 target: page2image4
      200.                 source: "qrc:/images/images/red.png"
      201.             }
      202.  
      203.             PropertyChanges {
      204.                 target: page2image2
      205.                 source: "qrc:/images/images/black.png"
      206.             }
      207.  
      208.             PropertyChanges {
      209.                 target: page2image3
      210.                 source: "qrc:/images/images/black.png"
      211.             }
      212.         },
      213.         State {
      214.             name: "Page2State0"
      215.         }
      216.     ]
      217. }
      218.  
        0
        0
        0
        Михаиллл
        • 9 апреля 2019 г. 17:08

        Спасибо. Статью читал. К сожалению этот вариант страницы не запускается в скомпилированной программе. Но по такому принципу сделал нижиприведенный код. Но при этом не получилось достичь масштабируемости. Помогите пожалуйста решить это: 

        1. import QtQuick 2.4
        2. import QtQuick.Controls 2.4
        3.  
        4. Item {
        5.     id: page2element
        6.     width: 400
        7.     height: 600
        8.     property alias page2Button0: page2Button0
        9.     property alias page2Button1: page2Button1
        10.     property alias page2Button2: page2Button2
        11.     property alias page2Button3: page2Button3
        12.     property alias page2ButtonMenu: page2ButtonMenu
        13.     property alias page2Label1: page2Label1
        14.     property alias page2Label2: page2Label2
        15.  
        16.  
        17.  
        18.  
        19.  
        20.  
        21.     Column {
        22.         id: column
        23.         spacing: 35
        24.         anchors.horizontalCenterOffset: 0
        25.         anchors.bottom: parent.bottom
        26.         anchors.bottomMargin: 10
        27.         anchors.top: parent.top
        28.         anchors.topMargin: 10
        29.         anchors.horizontalCenter: parent.horizontalCenter
        30.  
        31.         Label {
        32.             id: page2labe0
        33.             width: 286
        34.             height: 33
        35.             text: qsTr("Выберете красный цвет")
        36.             anchors.horizontalCenterOffset: 0
        37.             anchors.horizontalCenter: parent.horizontalCenter
        38.             font.family: "Verdana"
        39.             horizontalAlignment: Text.AlignHCenter
        40.             font.pixelSize: 22
        41.             font.weight: Font.Thin
        42.         }
        43.  
        44.         Row {
        45.             id: row
        46.             spacing: 50
        47.             anchors.horizontalCenter: parent.horizontalCenter
        48.  
        49.             Button {
        50.                 id: page2Button0
        51.                 width: 100
        52.                 height: 100
        53.                 Image {
        54.                     id: page2image1
        55.                     width: 100
        56.                     height: 100
        57.                     anchors.rightMargin: 0
        58.                     anchors.bottomMargin: 0
        59.                     anchors.fill: parent
        60.                     source: "qrc:/images/images/close.png"
        61.                     fillMode: Image.Stretch
        62.                 }
        63.             }
        64.  
        65.             Button {
        66.                 id: page2Button1
        67.                 width: 100
        68.                 height: 100
        69.                 Image {
        70.                     id: page2image2
        71.                     width: 100
        72.                     height: 100
        73.                     anchors.rightMargin: 0
        74.                     anchors.bottomMargin: 0
        75.                     anchors.fill: parent
        76.                     source: "qrc:/images/images/close.png"
        77.                     fillMode: Image.Stretch
        78.                 }
        79.             }
        80.         }
        81.  
        82.         Row {
        83.             id: row1
        84.             spacing: 50
        85.             anchors.horizontalCenter: parent.horizontalCenter
        86.  
        87.             Button {
        88.                 id: page2Button2
        89.                 width: 100
        90.                 height: 100
        91.                 Image {
        92.                     id: page2image3
        93.                     width: 100
        94.                     height: 100
        95.                     anchors.leftMargin: 0
        96.                     anchors.topMargin: 0
        97.                     anchors.rightMargin: 0
        98.                     anchors.bottomMargin: 0
        99.                     anchors.fill: parent
        100.                     source: "qrc:/images/images/close.png"
        101.                     fillMode: Image.Stretch
        102.                 }
        103.             }
        104.  
        105.             Button {
        106.                 id: page2Button3
        107.                 width: 100
        108.                 height: 100
        109.                 Image {
        110.                     id: page2image4
        111.                     width: 100
        112.                     height: 100
        113.                     anchors.rightMargin: 0
        114.                     anchors.bottomMargin: 0
        115.                     anchors.fill: parent
        116.                     source: "qrc:/images/images/close.png"
        117.                     fillMode: Image.Stretch
        118.                 }
        119.             }
        120.         }
        121.  
        122.         Label {
        123.             id: page2Label1
        124.             width: 156
        125.             height: 56
        126.             text: qsTr("Побед: ")
        127.             anchors.horizontalCenter: parent.horizontalCenter
        128.             horizontalAlignment: Text.AlignHCenter
        129.             font.pointSize: 20
        130.         }
        131.  
        132.         Label {
        133.             id: page2Label2
        134.             width: 156
        135.             height: 56
        136.             text: qsTr("1 из 20")
        137.             anchors.horizontalCenter: parent.horizontalCenter
        138.             horizontalAlignment: Text.AlignHCenter
        139.             font.pointSize: 20
        140.         }
        141.  
        142.         Button {
        143.             id: page2ButtonMenu
        144.             text: qsTr("МЕНЮ")
        145.             anchors.horizontalCenter: parent.horizontalCenter
        146.             font.pointSize: 18
        147.         }
        148.     }
        149.     states: [
        150.         State {
        151.             name: "Page2State1"
        152.  
        153.             PropertyChanges {
        154.                 target: page2image1
        155.                 source: "qrc:/images/images/red.png"
        156.             }
        157.  
        158.             PropertyChanges {
        159.                 target: page2image2
        160.                 source: "qrc:/images/images/black.png"
        161.             }
        162.  
        163.             PropertyChanges {
        164.                 target: page2image3
        165.                 source: "qrc:/images/images/black.png"
        166.             }
        167.  
        168.             PropertyChanges {
        169.                 target: page2image4
        170.                 source: "qrc:/images/images/black.png"
        171.             }
        172.         },
        173.         State {
        174.             name: "Page2State2"
        175.  
        176.             PropertyChanges {
        177.                 target: page2image1
        178.                 source: "qrc:/images/images/black.png"
        179.             }
        180.  
        181.             PropertyChanges {
        182.                 target: page2image2
        183.                 source: "qrc:/images/images/red.png"
        184.             }
        185.  
        186.             PropertyChanges {
        187.                 target: page2image3
        188.                 source: "qrc:/images/images/black.png"
        189.             }
        190.  
        191.             PropertyChanges {
        192.                 target: page2image4
        193.                 source: "qrc:/images/images/black.png"
        194.             }
        195.         },
        196.         State {
        197.             name: "Page2State3"
        198.  
        199.             PropertyChanges {
        200.                 target: page2image1
        201.                 source: "qrc:/images/images/black.png"
        202.             }
        203.  
        204.             PropertyChanges {
        205.                 target: page2image2
        206.                 source: "qrc:/images/images/black.png"
        207.             }
        208.  
        209.             PropertyChanges {
        210.                 target: page2image3
        211.                 source: "qrc:/images/images/red.png"
        212.             }
        213.  
        214.             PropertyChanges {
        215.                 target: page2image4
        216.                 source: "qrc:/images/images/black.png"
        217.             }
        218.         },
        219.         State {
        220.             name: "Page2State4"
        221.  
        222.             PropertyChanges {
        223.                 target: page2image1
        224.                 source: "qrc:/images/images/black.png"
        225.             }
        226.  
        227.             PropertyChanges {
        228.                 target: page2image4
        229.                 source: "qrc:/images/images/red.png"
        230.             }
        231.  
        232.             PropertyChanges {
        233.                 target: page2image2
        234.                 source: "qrc:/images/images/black.png"
        235.             }
        236.  
        237.             PropertyChanges {
        238.                 target: page2image3
        239.                 source: "qrc:/images/images/black.png"
        240.             }
        241.         },
        242.         State {
        243.             name: "Page2State0"
        244.         }
        245.     ]
        246. }
        247.  
        248.  
          0
          0
          0
          Алексей Внуков
          • 9 апреля 2019 г. 17:20

          а что не понравилось в моем коде выше? там ваш код который маштабируется

            0
            0
            0
            Михаиллл
            • 9 апреля 2019 г. 17:21

            Кажется я понял, нужно похоже так делать, тогда пропорции сохраняются 

            1. spacing: /*50*/0.1 * page2element.width
              0
              0
              0
              Алексей Внуков
              • 9 апреля 2019 г. 17:22

              QML достаточно гибок, чтоб достичь желаемого разными способами, достаточно включить фантазию

                0
                0
                0
                Михаиллл
                • 9 апреля 2019 г. 17:37

                Но есть ли возможности в дизайнере это сделать, без лишнего кода?

                  0
                  0
                  0
                  Михаиллл
                  • 9 апреля 2019 г. 18:05

                  А Ваш код ошибок не выдовал, но программа просто не открывала эту страницу

                    0
                    0
                    0
                    Алексей Внуков
                    • 10 апреля 2019 г. 14:13

                    учитесь делать рауками

                      0
                      0
                      0

                      Комментарии

                      Только авторизованные пользователи могут публиковать комментарии.
                      Пожалуйста, авторизуйтесь или зарегистрируйтесь
                      Actions
                      Написать статьюЗадать вопросПройти тестРасшарить код