3

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

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 的理想宽度，以便我的所有按钮文本都正确显示。我怎样才能得到这个理想的宽度？

4

2 回答 2

3

如果你不想使用 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;
                    }
                }
            }
        }
    }
}

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

于 2013-05-28T10:55:48.823 回答
2

按钮本身的最小宽度是其 Text 元素的implicitWidth 属性。

您的问题的一种解决方案可能是在 Component.onCompleted 处理程序中添加代码，即在转发器创建其项目后执行的代码，然后总结每个转发器项目的这些隐式宽度属性（您可以通过使用它的 itemAt(index) 函数）。

这些动态布局在 QML 中仍然有点麻烦，在 Qt 5.1 中随着Qt Quick Layouts的引入会变得更好

于 2013-05-16T19:14:02.953 回答