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

同样调整行的所有孩子的大小以适合他们的父母

1 个答案: