Qml listview заполнить анимацию непрозрачности

У меня есть ListView, и я хочу создать эффект плавного появления для populate ViewTransition. Но это работает не так, как ожидалось. Кажется, что начальная непрозрачность делегата равна 1.0, поэтому мне нужно установить свойство from анимации. Но это было похоже на мигание. Поэтому мне нужно установить начальное значение непрозрачности моего делегата на 0.0.
. Теперь у меня новая проблема ... когда я пролистываю список, непрозрачность делегатов по умолчанию - 0.0, и поэтому они невидимы. Итак, мой вопрос: может ли кто-нибудь создать идеальную плавную анимацию для свойства populate ListView?

Спасибо

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"
        }
    }
}
0
0
680
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мигает из-за вашего PauseAnimation, непрозрачность остается на 1 в течение всего времени. Вот красивый график, иллюстрирующий непрозрачность делегата с течением времени во время перехода populate:

opacity over time during the populate transition

Вам необходимо установить непрозрачность делегатов на 0 перед PauseAnimation и в переходе populate, а не непосредственно в делегате (переход применяется только к видимым делегатам, поэтому делегаты ниже области содержимого остаются невидимыми).

Для этого удалите opacity: 0 в вашем делегате и просто добавьте PropertyAction перед PauseAnimation в вашем переходе:

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. Как только ему что-то назначается, создание экземпляра портится.

derM 11.04.2018 14:05

@derM Здесь вроде нормально работает, в чем проблема?

GrecKo 11.04.2018 16:39

Если у меня есть простой ListView { model: 100; anchors.fill:parent; spacing: 3; delegate: Rectangle { width:100; height: 20; color: "red" }}, я получаю, скажем, 20 прямоугольников, нарисованных на моем экране. Как только я устанавливаю какой-либо переход на populate, это прерывается - у меня просто набирается рука, например, нарисовано 1, 7 или 8 ... Я предполагаю, что это как-то связано с ListView, игнорирующими полностью прозрачные элементы в макете. Это может иметь какое-то отношение к изменению размера ListView, когда начинка является ApplicationWindow. Я исследую это.

derM 11.04.2018 23:02

Другие вопросы по теме