QML ListView 填充不透明动画
Posted
技术标签:
【中文标题】QML ListView 填充不透明动画【英文标题】：QML ListView populate opacity animation 【发布时间】：2018-04-11 10:14:15 【问题描述】：我有一个ListView，我想为populate ViewTransition 创建一个淡入效果。但它没有按预期工作。似乎委托的初始不透明度为 1.0，因此我需要设置动画的 from 属性。
但它看起来像一个闪光。所以我需要将我的委托的初始不透明度值设置为0.0。
现在我有一个新问题......当我轻弹列表时，代表默认不透明度为0.0，因此它们是不可见的。
所以我的问题是：任何人都可以为 ListView 的populate 属性创建完美的淡入动画吗？
谢谢
import QtQuick 2.9
Rectangle
id: root
property alias model: list.model
ListView
id: list
width: 300; height: 500
model: sampleModel
spacing: 30
footer: Item width: 1; height: 30
populate: Transition
id: _popuTrans
SequentialAnimation
PauseAnimation
duration: 100*_popuTrans.ViewTransition.index
NumberAnimation property: "opacity"; from: 0.0; to: 1.0; duration: 200
PropertyAction property: "opacity"; value: 1.0
delegate: Component
Column
width: parent.width
spacing: 13
opacity: 0.0
Rectangle
width: parent.width*0.84
height: 1
color: colorPalette.altBackgroundColor
anchors.horizontalCenter: parent.horizontalCenter
Row
width: parent.width
spacing: width*0.07
Text
id: valueTxt
font pointSize: 13
color: "black"
width: parent.width*0.64
text: model.body
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignRight
Text
id: keyTxt
font pointSize: 15; weight: Font.Medium
color: "black"
width: parent.width*0.29
text: model.title
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignRight
ListModel
id: sampleModel
ListElement
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
ListElement
title: "وزن"
body: "1.3kg"
ListElement
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
ListElement
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
ListElement
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
ListElement
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
ListElement
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
ListElement
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
ListElement
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
ListElement
title: "وزن"
body: "1.3kg"
ListElement
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
ListElement
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
ListElement
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
ListElement
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
ListElement
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
ListElement
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
ListElement
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
ListElement
title: "وزن"
body: "1.3kg"
ListElement
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
ListElement
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
ListElement
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
ListElement
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
ListElement
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
ListElement
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
ListElement
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
ListElement
title: "وزن"
body: "1.3kg"
ListElement
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
ListElement
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
ListElement
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
ListElement
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
ListElement
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
ListElement
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
ListElement
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
ListElement
title: "وزن"
body: "1.3kg"
ListElement
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
ListElement
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
ListElement
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
ListElement
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
ListElement
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
ListElement
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
【问题讨论】：
【参考方案1】：闪烁是由于您的PauseAnimation，在整个持续时间内不透明度保持在 1。这是一个漂亮的图表，说明了在 populate 转换期间代理的不透明度随时间变化：
您需要在PauseAnimation 之前和populate 过渡中将代理的不透明度设置为0，而不是直接在代理中（过渡仅适用于可见代理，这就是内容区域下方的代理的原因保持隐形）。
为此，请删除您的委托中的opacity: 0，并在您的转换中的PauseAnimation 之前添加一个PropertyAction：
populate: Transition
id: _popuTrans
SequentialAnimation
PropertyAction property: "opacity"; value: 0.0
PauseAnimation duration: 100*_popuTrans.ViewTransition.index
NumberAnimation property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.InOutQuad
【讨论】：
我也这么认为。但这不是唯一的问题。populate-transition 似乎有一些问题。一旦分配了任何东西，它就会破坏实例化。
@derM 这似乎工作正常，有什么问题？
如果我有一个简单的ListView model: 100; anchors.fill:parent; spacing: 3; delegate: Rectangle width:100; height: 20; color: "red" ，我会在我的屏幕上绘制20 个矩形。一旦我将任何转换设置为populate，就会中断 - 我只得到一只手，比如 1、7 或 8...布局。这可能与 填充 ApplicationWindow 时 ListView 的大小变化有关。我会调查的。以上是关于QML ListView 填充不透明动画的主要内容，如果未能解决你的问题，请参考以下文章
qml----Model/View入门ListView动画效果
当代表具有不同的宽度时，QML ListView 滚动不会产生任何动画
React Native：如何在 ScrollView/ListView 子项进入/离开视口时为其设置不透明度动画？