2

ウィンドウに 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子に幅を強制するオプションはありますか? または、他にどのようなレイアウト オプションがありますか?

4

1 に答える 1

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
        }
    }
}
于 2014-04-13T09:56:24.603 に答える