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

非表示の列を使用して Text 要素の最大幅を簡単に計算し、バーの幅に少しパディングを追加して、スペースのないテキストを回避しました。

于 2013-05-28T10:55:48.823 に答える
2

ボタン自体の最小幅は、その Text 要素の implicitWidth プロパティです。

問題の解決策の 1 つは、Component.onCompleted ハンドラーにコード (つまり、リピーターがアイテムを作成した後に実行されるコード) を追加し、リピーターの各アイテムのこれらの ImplicitWidth プロパティを合計することです (これは、その itemAt(index) 関数)。

この種の動的レイアウトは、QML ではまだ少し面倒ですが、Qt クイック レイアウトの導入により、Qt 5.1 で改善されます。

于 2013-05-16T19:14:02.953 に答える