Qml ListView动态高度项过渡

Posted 2023-02-16

【中文标题】Qml ListView动态高度项过渡

【英文标题】：Qml ListView dynamic height item transition

【发布时间】：2021-03-22 12:57:27

【问题描述】：

我遇到了 qml listview 和项目的动态高度的问题。我的任务是显示一个项目列表，这些项目可以根据其中的流项目具有不同的高度值。

当我使用过渡时，它会将我的项目移动到错误的距离。

我得到了这个结果：

但我想要这个：

我认为，问题在于 ListView 中项目的默认高度，但我不太明白如何更改此偏移量。

如果这个问题可以解决，如果所有项目在流对象中的项目数量不同，我该怎么办？这个问题能轻松解决吗？

main.qml 文件：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window 
    width: 640
    height: 480
    visible: true

    Rectangle 
        id: rectangle
        color: "#ffffff"
        anchors.fill: parent

        Rectangle 
            id: rectangle1
            height: 50
            color: "#ffffff"
            border.color: "#000000"
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.rightMargin: 5
            anchors.leftMargin: 5


            Row 
                id: row
                anchors.fill: parent
                anchors.rightMargin: 1
                anchors.leftMargin: 1
                anchors.bottomMargin: 1
                anchors.topMargin: 1
                spacing: 5

                Button 
                    id: button
                    width: 50
                    text: qsTr("Insert")
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0

                    onClicked: 
                        list_model.insert(0, 'name': 'Inserted')
                    
                

                Button 
                    id: button1
                    width: 50
                    text: qsTr("Append")
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0

                    onClicked: 
                        list_model.append('name': 'Appended')
                    
                

                Text 
                    text: listView.contentHeight
                
            
        

        Rectangle 
            id: rectangle2
            color: "#ffffff"
            border.width: 1
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: rectangle1.bottom
            anchors.bottom: parent.bottom
            anchors.margins: 5

            ListView 
                id: listView
                anchors.fill: parent
                anchors.margins: 5
                clip: true
                spacing: 5
                model: ListModel 
                    id: list_model
                    ListElement 
                    ListElement 

                 // ListModel id: list_model
                delegate: ItemExample   

                add: Transition 
                    NumberAnimation  properties: "y"; from: -100; duration: 300 
                
                addDisplaced: Transition 
                    NumberAnimation  properties: "y"; duration: 300 
                
            
        
    

和 ItemExample.qml 文件：

import QtQuick 2.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15


Item 
    id: item1
    width: parent.width
    height : flow1.childrenRect.height

    Rectangle 
        id: rectangle
        anchors.fill: parent
        color: 'Grey'
        border.width: 1

        RowLayout 
            id: row
            anchors.fill: parent
            anchors.rightMargin: 2
            anchors.leftMargin: 2
            anchors.bottomMargin: 2
            anchors.topMargin: 2

            Text 
                text: flow1.childrenRect.height
            

            Flow 
                id: flow1
                clip: true
                spacing: 5
                Layout.fillWidth: true
                Layout.fillHeight: true

                Repeater 
                    model: 3
                    Rectangle 
                        width: 150; height: 50
                        border.width: 1
                        color: "yellow"
                    
                
            
        //RowLayout
    
 //Item

【参考方案1】：

我自己回答这个问题。

如前所述，问题在于流对象的默认大小。

我需要在项目本身之前强制流对象布局，以了解该项目的确切高度。

Item 
    id: item1

    ListView.onAdd: 
        flow1.forceLayout()
        height = flow1.childrenRect.height
    
    -||-

希望将来能对某人有所帮助！