BlinCT
BlinCT30 апреля 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
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

2
Evgenii Legotckoi
  • 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
    • 30 апреля 2016 г. 12:51
    Спасибо за совет, вижу теперь где я допустил оплошность. Я читал вашу тему по якорям, и кое что как раз мне пригодилось. Но вот такое height: childrenRect.height я если честно не знал. И как раз этого мне и не хватало чтобы цепляться к вышестоящему наследнику.

      Комментарии

      Только авторизованные пользователи могут публиковать комментарии.
      Пожалуйста, авторизуйтесь или зарегистрируйтесь
      d
      • dsfs
      • 26 апреля 2024 г. 4:56

      C++ - Тест 004. Указатели, Массивы и Циклы

      • Результат:80баллов,
      • Очки рейтинга4
      d
      • dsfs
      • 26 апреля 2024 г. 4:45

      C++ - Тест 002. Константы

      • Результат:50баллов,
      • Очки рейтинга-4
      d
      • dsfs
      • 26 апреля 2024 г. 4:35

      C++ - Тест 001. Первая программа и типы данных

      • Результат:73баллов,
      • Очки рейтинга1
      Последние комментарии
      k
      kmssr8 февраля 2024 г. 18:43
      Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
      АК
      Анатолий Кононенко5 февраля 2024 г. 1:50
      Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
      EVA
      EVA25 декабря 2023 г. 10:30
      Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
      J
      JonnyJo25 декабря 2023 г. 8:38
      Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
      G
      Gvozdik18 декабря 2023 г. 21:01
      Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
      Сейчас обсуждают на форуме
      Evgenii Legotckoi
      Evgenii Legotckoi2 мая 2024 г. 14:07
      Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.
      IscanderChe
      IscanderChe30 апреля 2024 г. 4:22
      Во Flask рендер шаблона не передаётся в браузер Доброе утро! Имеется вот такой шаблон: <!doctype html><html> <head> <title>{{ title }}</title> <link rel="stylesheet" href="{{ url_…
      G
      Gar22 апреля 2024 г. 5:46
      Clipboard Как скопировать окно целиком в clipb?
      Павел Дорофеев
      Павел Дорофеев14 апреля 2024 г. 2:35
      QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
      f
      fastrex4 апреля 2024 г. 4:47
      Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…

      Следите за нами в социальных сетях