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

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

Лично я при этом использую Повторитель и 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
        }
    }
}