平均调整行中所有子级的大小以适合其父级

debugcn 发表于 Dev

卡米尔

我试图在窗口中放置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哪个选项强制其子级宽度？还是那里还有其他布局选项？

考帕雅

个人而言，在执行此操作时，我使用了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
        }
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。