على قدم المساواة تغيير حجم جميع الأطفال من صف لتناسب في والديهم

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

شخصيا عند القيام بذلك يمكنني استخدام مكرر و ليستموديل أو مجموعة من النص بحيث يمكنك بسهولة معرفة كم 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
        }
    }
}