Question

我正在创建一个水平方向的ListView。突出显示设置为视图的一个固定位置，以便在我递增/递减当前项时列表元素滚动可见区域。这是我的视图代码：

ListView {
    anchors.fill: parent
    model: ListModel{
        ListElement{name:"x"}
        ListElement{name:"y"}
        ListElement{name:"z"}
    }
    delegate:
        Rectangle {
        property int viewW: ListView.view.width
        property bool isCurrent: ListView.isCurrentItem
        width: ListView.isCurrent? viewW * 0.4 : viewW * 0.3
        Text {
            anchors.fill: parent
            text: name
        }
    }


    orientation: Qt.Horizontal
    highlight: Rectangle {color: "transparent"}
    preferredHighlightBegin: 0
    preferredHighlightEnd: width*0.4
    highlightRangeMode: ListView.StrictlyEnforceRange
}

我希望当前项目的delegate具有比所有其他元素更大的宽度。但是，当所有代表的宽度不相同时，列表滚动动画（例如，您可以看到元素移动到下一个位置，而不是仅仅出现在新位置上）不再适用。

如何让当前元素显示与其他元素不同的宽度ListView，同时仍能够滚动动画？

Answer 1

可以通过将要修改的属性与item / currentIndex属性相结合来修改当前选定的index。前者是ListView中包含的属性，用于指示所选项目（如您所知）。后者是delegate中公开的属性，表示列表中相应项的索引。当我们有那个

ListView.view.currentIndex === index

我们在当前选定的项目中。因此，在你的delegate中，你可以这样写：

width: ListView.view.currentIndex === index ? 60 : 30

现在所选项目将是其他项目的两倍。然而效果有点难看。我会选择以下一个：

scale: ListView.view.currentIndex === index ? 1.5 : 0.5

在这里你说“当这个项目是被选中的时候它应该增长50％，否则它应该缩小50％”。

width的最终代码可能如下所示：

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2

Window {
    id: container
    width: 300
    height: 150
    visible: true

    ListView {
        id: list
        anchors.fill: parent
        spacing: 5

        model: ListModel{
            ListElement{name:"a"}
            ListElement{name:"b"}
            ListElement{name:"c"}
            ListElement{name:"d"}
            ListElement{name:"e"}
            ListElement{name:"f"}
            ListElement{name:"g"}
            ListElement{name:"h"}
            ListElement{name:"i"}
            ListElement{name:"j"}
            ListElement{name:"k"}
            ListElement{name:"l"}
            ListElement{name:"x"}
            ListElement{name:"y"}
            ListElement{name:"z"}
        }

        delegate:
            Rectangle {
            width: ListView.view.currentIndex === index ? 60 : 30  // the magnifying/shrinking
            color: "steelblue"

            height: ListView.view.height
            Text {
                anchors.centerIn: parent
                text: name
                font.pixelSize: 20
            }

            Behavior on width {                    // added to smooth the resizing
                NumberAnimation { duration: 100 }
            }
        }

        orientation: Qt.Horizontal
        highlight: Rectangle {color: "transparent"}
        preferredHighlightBegin: 0
        preferredHighlightEnd: delegate.width
        highlightRangeMode: ListView.StrictlyEnforceRange
    }
}

效果并不像说的那么漂亮。我会选择scale属性，如下所示：

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2

Window {
    id: container
    width: 300
    height: 150
    visible: true

    ListView {
        id: list
        anchors.fill: parent
        spacing: 5

        model: ListModel{
            ListElement{name:"a"}
            ListElement{name:"b"}
            ListElement{name:"c"}
            ListElement{name:"d"}
            ListElement{name:"e"}
            ListElement{name:"f"}
            ListElement{name:"g"}
            ListElement{name:"h"}
            ListElement{name:"i"}
            ListElement{name:"j"}
            ListElement{name:"k"}
            ListElement{name:"l"}
            ListElement{name:"x"}
            ListElement{name:"y"}
            ListElement{name:"z"}
        }

        delegate:
            Rectangle {
            scale: ListView.view.currentIndex === index ? 1.5 : 0.5
            color: "transparent"
            width: 30
            height: ListView.view.height
            Text {
                anchors.centerIn: parent
                text: name
                font.pixelSize: 20
            }

            Behavior on scale {                    // added to smooth the scaling
                NumberAnimation { duration: 100 }
            }
        }

        orientation: Qt.Horizontal
        highlight: Rectangle {color: "steelblue"}
        preferredHighlightBegin: 0
        preferredHighlightEnd: delegate.width
        highlightRangeMode: ListView.StrictlyEnforceRange
    }
}

请注意，根据需要，它突出显示在列表的开头（即左侧）。

当代理具有不同的宽度时，QML ListView滚动不会产生任何动画

1 个答案: