qml с использованием Row для выравнивания компонентов по центру

Я использую Row для размещения некоторых кнопок на Rectangle, который является моей собственной реализацией панели инструментов. Проблема в том, что бы я ни делал, компоненты всегда выравниваются слева. Я хотел бы, чтобы они были выровнены с центром строки и текли наружу к краям. Код выглядит следующим образом:

Rectangle {
        id: toolbar
        color: "green"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 100

        Row
        {
            anchors.fill: parent                
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 60

            ToolButton {
                height: parent.height
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }

            ToolButton {
                height: parent.height
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }
        }
 }

Мои кнопки всегда располагаются, начиная с левой стороны ряда. Скорее я хотел бы, чтобы они были расположены относительно центра панели инструментов. Я думал, что указание этой строки anchors.horizontalCenter: parent.horizontalCenter должно достичь этого, но что бы я ни пытался, компоненты располагаются от левой границы.


qt qml qt-quick qtquickcontrols
person user42140    schedule 01.11.2017    source источник
comment
Проверьте RowLayout. Он выглядит как Row, но имеет больше вариантов компоновки.   -  person Benjamin T    schedule 01.11.2017
comment
@BenjaminT Пробовал и это, но не смог заставить их выровнять компоненты, как хотелось бы.   -  person user42140    schedule 01.11.2017
comment
Хорошо, вы пытаетесь разместить свою строку, чтобы заполнить родителя (anchors.fill: parent) и в то же время центрировать его внутри родителя (anchors.horizontalCenter: parent.horizontalCenter). Это просто не работает вместе. Просто удалите anchors.fill: parent, если вы хотите поместить элемент Row в центр его родителя. Также вы должны установить высоту строки. Я думаю, это должно быть height: parent.height. Также я думаю, вы должны установить ширину ваших ToolButtons   -  person folibis    schedule 01.11.2017
comment
@folibis Вы хотите написать это как ответ, чтобы я мог его принять? Это сработало отлично. Извините, я не могу проголосовать за ваш комментарий из-за моего низкого уличного авторитета.   -  person user42140    schedule 01.11.2017

Ответы (3)


arrow_upward
1
arrow_downward

Если вы установите выравнивание строки по центру в родительском объекте, а затем настроите ширину строки в соответствии с шириной ChildrenRect, тогда вы можете расширять элементы от центра объекта. Примечание: вам может потребоваться установить ширину ToolButton, чтобы для детейRect было заполнено значение ширины.

   Rectangle {
        id: toolbar
        color: "green"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 100

        Row
        {
            anchors{
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            height: parent.height
            width: childrenRect.width
            spacing: 60

            ToolButton {
                height: parent.height
                width: 50
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }

            ToolButton {
                height: parent.height
                width: 50
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }
        }
 }
person piper2200s    schedule 30.09.2020

arrow_upward
0
arrow_downward

Вы установили anchors.fill: parent на Row, поэтому он, конечно, заполнит своего родителя. Вместо этого вы должны удалить это и установить только height: parent.height в строке.

person dobey    schedule 29.04.2020

arrow_upward
0
arrow_downward

Документация:

поскольку строка автоматически позиционирует своих дочерних элементов по горизонтали, дочерний элемент в строке не должен устанавливать свою позицию по оси x или привязываться по горизонтали с помощью привязок left, right, anchors.horizontalCenter, fill или centerIn. Если вам нужно выполнить эти действия, рассмотрите возможность позиционирования элементов без использования строки.

Строка предназначена только для горизонтального расположения дочерних элементов. Без каких-либо «потоков» или центрирования. Это для автоматического позиционирования в строке, которое позволяет вам исключить определения привязок и полей внутри элемента, когда вам нужно выполнить эту простую задачу.

Но если нужно что-то посложнее, то с анкорами и отступами нужно делать вручную. Например. Центрирование элементов и их распространение от центра к краям может выглядеть так:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
            id: toolbar
            color: "green"
            anchors.centerIn: parent

            height: 100
            width: parent.width

            Rectangle {
                id: toolbutton1
                height: parent.height
                anchors {
                    right: toolbutton2.left
                    margins: 20
                }
                width: 100
                color: "blue"
            }

            Rectangle {
                id: toolbutton2
                height: parent.height
                anchors {
                    right: parent.horizontalCenter
                    margins: 10
                }
                width: 100
                color: "magenta"
            }

            Rectangle {
                id: toolbutton3
                height: parent.height
                anchors {
                    left: parent.horizontalCenter
                    margins: 10
                }
                width: 100
                color: "red"
            }
            Rectangle {
                id: toolbutton4
                height: parent.height
                anchors {
                    left: toolbutton3.right
                    margins: 20
                }
                width: 100
                color: "yellow"
            }
     }
}
person Maxim Skvortsov    schedule 14.08.2020