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

Question

BlinCTСәуір 30, 2016, 7:37 Т.Ж.

Компоновка элементов в 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
                    }
                }
            }
        }
    }
}

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Талқылауға жазылыңыз0

Бөлімге жазылу99

Сұрақ мақалада қойыладыQML - 013-сабақ. Зәкірлермен QML-де позициялау ( якорь )

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

Сәуір 30, 2016, 10:33 Т.Ж.
Жауап шешім ретінде белгіленді.

Добрый день.
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 → Evgenii Legotckoi
#

Сәуір 30, 2016, 12:51 Т.Қ.

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

Пікірлер

Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
Кіріңіз немесе Тіркеліңіз