ColumnLayout寬度管理中的QMLListview

我有一個 ColumnLayout，其中包含一個 ListView，下面有一個 Button。ListView 和 Button 都有 'Layout.fillwidth = true' 以確保它們具有相同的寬度。代表（標簽）的寬度應該占據 Listview 的整個寬度（將它們水平居中，并在稍后使用不同的背景顏色）。如果 Button 比 ListView 寬，則代表的寬度應該增長到仍然容納 ListView 的整個寬度。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Layout test")

    Rectangle {
        color: 'grey'
        anchors.fill: vert_layout
    }

    ColumnLayout {
        id: vert_layout
        anchors.centerIn: parent
        spacing: 0

        ListView {
            id: list

            readonly property int itemHeight: 20
            property int visibleItems: 14

            height: visibleItems * itemHeight
            clip: true
            Layout.fillWidth: true
            Layout.minimumWidth: contentItem.childrenRect.width

            model: 20

            delegate: Label {
                id: itemlabel

                height: list.itemHeight
//                width: list.width      // <== this doesn't work
                color: 'black'
                padding: 4
                horizontalAlignment: Text.AlignHCenter
                text: "entry number "   index
            }
        }

        Button {
            id: btn

            Layout.fillWidth: true
            implicitHeight: 20

            text: "SMALL"
//            text: "REALLY WIDE BUTTON"
        }
    }
}

這段代碼的問題是委托沒有占據 ListView 的整個寬度。因此，串列中的條目是左對齊的，而不是水平居中的。

如果我注釋掉將委托寬度設定為 ListView 寬度的行，條目將水平對齊，但條目的文本不再完全可見。布局管理似乎不再正確計算寬度。

我很想學習如何正確處理這個問題。

uj5u.com熱心網友回復：

我對此進行了多次嘗試，發現這是一個有趣但令人沮喪的問題。最后，我覺得你的邏輯是合理的，讓 ListView 調整為孩子的內容。我發現了一個技巧，即使用模擬專案作為父委托來調整 ListView 的大小。然后，在那個專案里面，我放了一個框架和真正的標簽。雖然 Item 和 Label 大小相同，但 Frame 更大，可以讓我繪制單元格 Rectangle 以及幫助我??定位 Label。

ListView {
    id: list
    Layout.minimumWidth: contentItem.childrenRect.width
    Layout.fillWidth: true
    delegate: Item {
        width: itemLabel.width
        height: list.itemHeight
        Frame {
            width: list.width
            height: parent.height
            padding: 0
            background: Rectangle {
                color: (index & 1) ? "#ccc" : "#aaa"
            }
            Label {
                id: itemLabel
                anchors.centerIn: parent
                text:  "entry number "   index
                color: "black"
            }
        }
    }
}

這是一個完整的作業版本：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Layout test")

    Frame {
        anchors.centerIn: parent
        padding: 0
        background: Rectangle { color: "grey" }

        ColumnLayout {
            id: vert_layout
            spacing: 0

            ListView {
                id: list
                readonly property int itemPadding: 4
                readonly property int itemHeight: tm.height   itemPadding * 2
                readonly property TextMetrics tm: TextMetrics { text: "#" }
                property int visibleItems: 14
                Layout.preferredHeight: visibleItems * itemHeight
                Layout.minimumWidth: contentItem.childrenRect.width   itemPadding * 2
                Layout.fillWidth: true

                clip: true
                model: 20

                delegate: Item {
                    property string txt: wideDelegates.checked
                       ? "really wide entry number "   index
                       : "entry number "   index
                    width: itemLabel.width
                    height: list.itemHeight
                    Frame {
                        id: frame
                        width: list.width
                        height: parent.height
                        padding: 0
                        background: Rectangle {
                            color: (index & 1) ? "#ccc" : "#aaa"
                        }
                        Label {
                            id: itemLabel
                            anchors.centerIn: parent
                            text: wideDelegates.checked
                                ? "really wide entry number "   index
                               : "entry number "   index
                            color: "black"
                        }
                    }
                }
            }

            Button {
                id: btn
                Layout.fillWidth: true
                implicitHeight: 20
                text: wideButton.checked
                    ? "REALLY WIDE BUTTON"
                    : "SMALL"
            }
        }
    }

    footer: RowLayout {
        Item { Layout.fillWidth: true }
        CheckBox {
            id: wideDelegates
            text: "Wide Delegates"
        }

        CheckBox {
            id: wideButton
            text: "Wide Button"
        }
        Item { Layout.fillWidth: true }
    }
}

您可以在線試用！

標籤：qtqml

上一篇：QT事件過濾器優先級問題

下一篇：編譯makefile的問題