qt - 平均共享 QML 行中的水平空间

Question

我需要在我的行中的所有“按钮”之间平均共享水平空间。我将此代码与 Repeater 一起使用。

Component {
    id: buttonComponent
    Rectangle {
        height: buttonRow.height
        width: buttonRow.width / buttonsRepeater.count
        color:  "#FFDDDD"
        Text {
            anchors.centerIn: parent
            text: model.text
        }
    }
}

Rectangle {
    color: "#DDDDDD"
    id: buttonBar
    height: 30
    anchors {
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }

    Row {
        id: buttonRow
        anchors.fill: parent
        Repeater {
            id: buttonsRepeater
            model: buttonsModel
            delegate: buttonComponent
        }
    }
}

现在，我想计算 Row 的理想宽度，以便我所有的按钮文本都能正确显示。我怎样才能得到这个理想的宽度？

Answer 1

如果你不想使用 QtQuick.Layouts 因为它们还没有真正准备好，你可以使用这个:

Rectangle {
    id: buttonBar;
    color: "#DDDDDD";
    height: 30;
    width: (buttonColumn.width + 20 + buttonRow.spacing) * buttonsRepeater.count;
    anchors {
        bottom: parent.bottom;
        left: parent.left;
    }

    Column {
        id: buttonColumn;
        visible: false;

        Repeater {
            model: buttonsModel;
            delegate: Text {
                text: model.text;
            }
        }
    }
    Row {
        id: buttonRow;
        anchors.fill: parent;

        property real itemWidth : ((width + spacing) / buttonsRepeater.count) - spacing;

        Repeater {
            id: buttonsRepeater;
            model: buttonsModel;
            delegate: Component {
                id: buttonDelegate;

                Rectangle {
                    height: parent.height;
                    width: parent.itemWidth;
                    color: "#FFDDDD";
                    border.width: 1;

                    Text {
                        anchors.centerIn: parent;
                        text: model.text;
                    }
                }
            }
        }
    }
}

我只是使用了一个隐藏的 Column 来轻松计算文本元素的最大宽度，并在条形宽度中添加了一点填充以避免无间距文本。