QML ListView填充属性不起作用(其动画) [英] QML ListView populate property does not work (its animation)
本文介绍了QML ListView填充属性不起作用(其动画)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在ueLoginWindow内有以下QML ListView:
I have following QML ListView inside ueLoginWindow:
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属性获得动画效果.我缺少什么，因为在填充属性文档状态:
Now, when I run app, the items are fed to ListView from model correctly, but non of the items get animated according to populate property. I would like all items get animated according to populate property. What am I missing, because in the populate property docs states:
populate:过渡此属性保存要应用于的过渡 最初为视图创建的项目.
populate : Transition This property holds the transition to apply to the items that are initially created for a view.
它适用于在以下情况下创建的所有项目:
It is applied to all items that are created when:
首先创建视图.视图的模型更改.视图的模型为 如果模型是QAbstractItemModel子类，则重置
The view is first created The view's model changes The view's model is reset, if the model is a QAbstractItemModel subclass
推荐答案
我认为问题是model属性应在ListView初始化后进行更新:
I think the problem is the model property should be updated after ListView has been initialised:
ListView {
// don't initialise model property this time.
//model: uePeopleModel
// update the model property after ListView initialised.
Component.onCompleted: {
model = uePeopleModel;
}
}
这篇关于QML ListView填充属性不起作用(其动画)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
