부모에 맞게 행의 모든 ​​자식 크기를 동일하게 조정합니다.

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