Одинаково измените размер всех детей строки, чтобы соответствовать их родителю

Question

Я пытаюсь поместить 5 кнопок в моем окне, выровненных в ряд, и каждая кнопка должна иметь одинаковую ширину, занимая при этом все доступное пространство в родительском элементе. Вот как я пытаюсь (не удается):

Row {
      id: toolbar
      width: 300
      height: 80

      Button {
        text: "left"
      }

      Button {
        text: "right"
      }

      Button {
        text: "tab"
      }

      Button {
        text: "home"
      }

      Button {
        text: "end"
      }
}

В этом примере Button элементы не будут изменены, чтобы соответствовать их родителю. Я хотел бы видеть каждого Button получить 1/5 ширины их родителя. Очевидно, используя Row не достаточно

Также с помощью:

width: parent.width / parent.children.count

в каждой кнопке происходит сбой, так как parent.children.count является undefined, Можно использовать Component.onCompleted установить ширину, когда все уже подготовлено, но должен быть лучший способ.

Есть ли вариант Row который навязывает ширину своим дочерним элементам? Или какой другой вариант макета есть?

Answer 1

Лично при этом я использую Repeater и ListModel или массив текста, чтобы вы могли легко узнать, сколько Button вы будете иметь и изменить их размер должным образом

ListModel {
    id: modelButtons
    ListElement { buttonText: "left" }
    ListElement { buttonText: "right" }
    ListElement { buttonText: "tab" }
    ListElement { buttonText: "home" }
    ListElement { buttonText: "end" }
}

Row {
    id: toolbar
    width: 300
    height: 80

    Repeater {
        id: repeaterButton
        model: modelButtons
        delegate: Button {
            width: toolbar.width / repeaterButton.model.count
            text: buttonText
        }
    }
}