同样调整行的所有子项的大小以适应其父项

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
        }
    }
}