【问题标题】:QML ListView populate property does not work (its animation)QML ListView 填充属性不起作用(它的动画)
【发布时间】:2015-09-03 11:09:59
【问题描述】:

我在 ueLoginWindow 内关注 QML ListView

import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1
import Enginio 1.0
import QtBluetooth 5.5
import QtCanvas3D 1.0
import QtLocation 5.5
import QtNfc 5.5
import QtPositioning 5.5
import QtQuick.LocalStorage 2.0
import QtQuick.XmlListModel 2.0
import QtSensors 5.5
import QtWebChannel 1.0
import QtWebKit 3.0
import QtWebSockets 1.0

import "../items"

Rectangle
{
    id: ueLoginWindow

    width: 768
    height: 512

    radius: 16

    border.color: "#ffffff"
    border.width: 4

    clip: true

    anchors.centerIn: parent

    gradient: Gradient
    {
        GradientStop
        {
            position: 0
            color: "#ffffff"
        }   // GradientStop

        GradientStop
        {
            position: 0.81
            color: "#000000"
        }   // GradientStop
    }   // gradient

    ColumnLayout
    {
        id: ueMainLayout

        anchors.margins: ueLoginWindow.radius
        anchors.fill: parent

        clip: true

        antialiasing: true

        layoutDirection: Qt.LeftToRight
        spacing: 16

        Text
        {
            id: ueLoginText

            color: "#000000"

            text: qsTr("STAFF LOGIN")
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 458
            anchors.top: parent.top
            anchors.topMargin: 0
            styleColor: "#ffffff"
            font.family: "Courier"
            font.bold: true

            clip: true

            font.pointSize: 23
            font.capitalization: Font.AllUppercase

            textFormat: Text.RichText

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter

            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

            Layout.fillWidth: true
            Layout.fillHeight: true
        }   // Text

//        ListView
//        {
//            id: uePeopleView

//            antialiasing: true

//            model: uePeopleModel

//            spacing: 16

//            clip: true

//            Layout.alignment: Qt.AlignCenter

//            Layout.fillWidth: true

//            Layout.margins: ueLoginWindow.radius

//            Layout.minimumHeight: 192
//            Layout.preferredHeight: 192
//            Layout.maximumHeight: 192

//            orientation: ListView.Horizontal

//            delegate: Component
//            {
//                id: uePersonDelegate

//                Item
//                {
//                    width: 192
//                    height: 192

//                    Column
//                    {
//                        Image
//                        {
//                            source: "image://uePeopleModel/"+model.ueRoleImage
//                        }   // Image

//                        Text
//                        {
//                            text: model.ueRoleName

//                            font.pointSize: 10
//                            verticalAlignment: Text.AlignVCenter
//                            horizontalAlignment: Text.AlignHCenter
//                        }   // Text
//                    }   // Column
//                }   // Item
//            }   // delegate

//            scale: parent.ListView.isCurrentItem?0.8:1
//            Behavior on scale
//            {
//                NumberAnimation
//                {
//                    duration: 200
//                }   // NumberAnimation
//            }   // Behavior

//            preferredHighlightBegin: width/2-15
//            preferredHighlightEnd: width/2+15
//            highlightRangeMode: ListView.StrictlyEnforceRange
//            Component.onCompleted:
//            {
//                currentIndex=count/2
//            }   // Component.onCompleted

//            populate: Transition
//            {
//                NumberAnimation
//                {
//                    property: "opacity";
//                    from: 0;
//                    to: 1.0;
//                    duration: 400
//                }   // NumberAnimation

//                NumberAnimation
//                {
//                    property: "scale";
//                    from: 0;
//                    to: 1.0;
//                    duration: 400
//                }   // NumberAnimation
//            }   // Transition
//        }   // Listview

        ListView
        {
            id: uePeopleView
            anchors.top: parent.top
            anchors.topMargin: 29
            highlightFollowsCurrentItem: false

            antialiasing: true

            model: uePeopleModel

            spacing: 16

            clip: true

            Layout.alignment: Qt.AlignCenter

            Layout.fillWidth: true

            Layout.margins: ueLoginWindow.radius

            Layout.minimumHeight: 192
            Layout.preferredHeight: 192
            Layout.maximumHeight: 192

            orientation: ListView.Horizontal

            delegate: Component
            {
                id: uePersonDelegate

                Item
                {
                    width: 192
                    height: 192

                    Column
                    {
                        Image
                        {
                            source: "image://uePeopleModel/"+model.ueRoleImage
                        }   // Image

                        Text
                        {
                            text: model.ueRoleName

                            font.pointSize: 10
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                        }   // Text
                    }   // Column
                }   // Item
            }   // delegate

            scale: parent.ListView.isCurrentItem?0.8:1
            Behavior on scale
            {
                NumberAnimation
                {
                    duration: 200
                }   // NumberAnimation
            }   // Behavior

            preferredHighlightBegin: width/2-15
            preferredHighlightEnd: width/2+15
            highlightRangeMode: ListView.StrictlyEnforceRange
            Component.onCompleted: currentIndex=count/2
        }   // Listview

        Tumbler
        {
            id: ueLoginKeypadTumbler
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 77
            anchors.top: parent.top
            anchors.topMargin: 224
            clip: true

            Layout.preferredHeight: 96

            Layout.fillWidth: true
            Layout.alignment: Qt.AlignCenter

            Layout.margins: ueLoginWindow.radius

            antialiasing: true

            TumblerColumn
            {
                id: ueNumericTumblerColumnDigit1000

                model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

                width: 165
            }   // ueNumericTumblerColumnDigit1000

            TumblerColumn
            {
                id: ueNumericTumblerColumnDigit100

                model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

                width: 165
            }   // ueNumericTumblerColumnDigit100

            TumblerColumn
            {
                id: ueNumericTumblerColumnDigit10

                model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

                width: 165
            }   // ueNumericTumblerColumnDigit10

            TumblerColumn
            {
                id: ueNumericTumblerColumnDigit1

                model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

                width: 165
            }   // ueNumericTumblerColumnDigit1
        }   // ueLoginKeypadTumbler

        RowLayout
        {
            id: ueButtonsLayout

            layoutDirection: Qt.LeftToRight
            spacing: 16

            UeButton
            {
                id: ueButtonLogin
                text: qsTr("Login")

                Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

                Layout.fillWidth: true
                Layout.fillHeight: true

                ueText: qsTr("Login")
            }   // UeButton

            UeButton
            {
                id: ueButtonClear
                text: qsTr("Clear")

                Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

                Layout.fillWidth: true
                Layout.fillHeight: true

                ueText: qsTr("Clear")
            }   // UeButton

            UeButton
            {
                id: ueButtonQuit

                Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

                Layout.fillWidth: true
                Layout.fillHeight: true

                ueText: qsTr("Quit")
            }   // UeButton
        }   // RowLayout
    }   // ColumnLayout
}   // Rectangle

现在,当我运行应用程序时,项目会正确地从 model 馈送到 ListView,但没有项目会根据 populate 属性进行动画处理。我希望根据populate 属性对所有项目进行动画处理。我错过了什么,因为在populate property docs 状态:

populate : Transition 此属性保存要应用到的转换 最初为视图创建的项目。

它适用于在以下情况下创建的所有项目:

视图首先被创建视图的模型改变视图的模型是 重置,如果模型是 QAbstractItemModel 子类

【问题讨论】:

    标签: qt qml qtquick2 qtquickcontrols qtquickextras


    【解决方案1】:

    我认为问题在于 model 属性应该在 ListView 初始化后更新:

    ListView {
    
        // don't initialise model property this time.
        //model: uePeopleModel
    
        // update the model property after ListView initialised.
        Component.onCompleted: {
            model = uePeopleModel;
        }
    }
    

    【讨论】:

    • 对我还是不好。所有项目在第一个项目的位置重叠在一起。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-14
    • 2011-08-14
    • 1970-01-01
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    相关资源
    最近更新 更多