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
      Evgenii Legotckoi
      Evgenii LegotckoiOct. 31, 2024, 2:37 p.m.
      Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
      A
      ALO1ZEOct. 19, 2024, 8:19 a.m.
      Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
      ИМ
      Игорь МаксимовOct. 5, 2024, 7:51 a.m.
      Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
      d
      dblas5July 5, 2024, 11:02 a.m.
      QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
      k
      kmssrFeb. 8, 2024, 6:43 p.m.
      Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
      Now discuss on the forum
      Evgenii Legotckoi
      Evgenii LegotckoiJune 24, 2024, 3:11 p.m.
      добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
      t
      tonypeachey1Nov. 15, 2024, 6:04 a.m.
      google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
      NSProject
      NSProjectJune 4, 2022, 3:49 a.m.
      Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
      9
      9AnonimOct. 25, 2024, 9:10 a.m.
      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

      Follow us in social networks