BlinCT
BlinCTApril 30, 2016, 7:37 a.m.

Компоновка элементов в QML

вёрстка qml, qml, ColumnLayout, компоновка qml, Rectangle

Всем привет. Я хочу несколько элементов разместить вертикально. Например, ColumnLayout, ComboBox, ColumnLayout. Если, например, я их оберну каждый в прямоугольник, то как указать каждому из них, что они в расположении должны следовать один за другим?
И еще если это имеет значение, этот файл подгружается из другого места в коде через Loader.

import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
 
Rectangle
{
    id: menucontent1
    color: "grey"
    height: 50
 
    Rectangle
    {
        anchors.fill: top
        ColumnLayout
        {
            anchors.top: parent
            anchors.topMargin: 5
            GroupBox
            {
                title: Check1
 
                RowLayout
                {
                    ExclusiveGroup { id: tabPositionGroup}
                    RadioButton
                    {
                        text: qsTr("One Timer")
                        checked: true
                        exclusiveGroup: tabPositionGroup
                    }
                    RadioButton
                    {
                        text: qsTr("Two Timers")
                        exclusiveGroup: tabPositionGroup
                    }
                }
            }
        }
    }
    Rectangle
    {
        anchors.fill: top
        ComboBox
        {
            width: 60
            model: ["1_language", "2_language", "3_language"]
        }
    }
 
    Rectangle
    {
        anchors.fill: top
        ColumnLayout
        {
            GroupBox
            {
                title: Check2
 
                RowLayout
                {
                    ExclusiveGroup { id: tabPositionGroup1}
                    RadioButton
                    {
                        text: qsTr("Switch_1")
                        checked: true
                        exclusiveGroup: tabPositionGroup1
                    }
                    RadioButton
                    {
                        text: qsTr("Switch_2")
                        exclusiveGroup: tabPositionGroup1
                    }
                }
            }
        }
    }
}

 

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
  • April 30, 2016, 10:33 a.m.
  • The answer was marked as a solution.

Добрый день.
1) Рекомендую ознакомиться с правилами вёрстки и компоновки при разработке на QML. Чтобы разобраться с некоторыми моментами при работе с якорями (anchors), например, как правильно растянуть дочерний элемент по родительскому, или прибить дочерний элемент к верхней части родительского или сестринского, то есть соседнего элемента.
QML имеет json-подобную древовидную структуру. Дочерний элемент располагается внутри родительского. Сестринские элементы располагаются на одном уровне и имеют один и тот же родительский элемент (то есть parent).
2) ColumnLayout располагает элементы в колонку, один под одним. По умолчанию сверху вниз.
3) RowLayout располагается элементы слева направо.
4) Что касается кода, то можно сделать вот так.

Rectangle 
{
    id: menucontent1
    color: "grey"
 
    ColumnLayout
    {
        anchors.top: parent.top
        spacing: 2
 
        Rectangle
        {
            height: childrenRect.height
                GroupBox
                {
                    title: qsTr("Check1")
 
                    RowLayout
                    {
                        ExclusiveGroup { id: tabPositionGroup}
                        RadioButton
                        {
                            text: qsTr("One Timer")
                            checked: true
                            exclusiveGroup: tabPositionGroup
                        }
                        RadioButton
                        {
                            text: qsTr("Two Timers")
                            exclusiveGroup: tabPositionGroup
                        }
                    }
                }
        }
 
        Rectangle
        {
            height: childrenRect.height
            ComboBox
            {
                width: 60
                model: ["1_language", "2_language", "3_language"]
            }
        }
 
        Rectangle
        {
            height: childrenRect.height
            GroupBox
            {
                title: qsTr("Check2")
 
                RowLayout
                {
                    ExclusiveGroup { id: tabPositionGroup1}
                    RadioButton
                    {
                        text: qsTr("Switch_1")
                        checked: true
                        exclusiveGroup: tabPositionGroup1
                    }
                    RadioButton
                    {
                        text: qsTr("Switch_2")
                        exclusiveGroup: tabPositionGroup1
                    }
                }
            }
        }
    }
}

 

    BlinCT
    • April 30, 2016, 12:51 p.m.
    Спасибо за совет, вижу теперь где я допустил оплошность. Я читал вашу тему по якорям, и кое что как раз мне пригодилось. Но вот такое height: childrenRect.height я если честно не знал. И как раз этого мне и не хватало чтобы цепляться к вышестоящему наследнику.

      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. 12, 2024, 6:12 a.m.
      Django - Tutorial 055. How to write auto populate field functionality Freckles because of several brand names retin a, atralin buy generic priligy
      i
      innorwallNov. 12, 2024, 2:23 a.m.
      QML - Tutorial 035. Using enumerations in QML without C ++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
      i
      innorwallNov. 11, 2024, 11:50 p.m.
      Qt/C++ - Lesson 052. Customization Qt Audio player in the style of AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
      i
      innorwallNov. 11, 2024, 10:19 p.m.
      Heap sorting algorithm The role of raloxifene in preventing breast cancer priligy precio
      i
      innorwallNov. 11, 2024, 9:55 p.m.
      PyQt5 - Lesson 006. Work with QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
      Now discuss on the forum
      i
      innorwallNov. 12, 2024, 4:56 a.m.
      добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
      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