대리자의 너비가 다른 경우 QML ListView 스크롤로 애니메이션이 생성되지 않습니다.

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

/index 속성을 수정하려면 속성을 조합하여 현재 선택된 item을 수정할 수 있습니다. 전자는 선택한 항목을 나타 내기 위해 ListView에 포함 된 속성입니다 (이미 알고있는 것처럼). 후자는 목록에서 해당 항목의 인덱스를 나타 내기 위해 delegate에 표시된 속성입니다. 우리가 그럴 때

ListView.view.currentIndex === index 

우리는 현재 선택된 아이템입니다.

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

지금 선택한 항목이 다른 항목보다 두 배 큰 것 : 따라서, 귀하의 delegate, 당신은 다음처럼 작성할 수 있습니다. 그러나 그 효과는 약간 추합니다. 나는 다음과 같은 하나 갈 것입니다 : 당신은 "이 항목은이 50 % 증가 할 전망 선택된 하나의 경우 가, 그렇지 않으면 50 %으로 축소해야한다"고 말하고있다

다음

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

.

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 
    } 
} 

을 그리고 효과가 말했듯이 아름다운되지 않습니다 :

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 { 
      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 
    } 
} 

참고 : 다음과 같이 나는 scale 속성에 갈 것입니다.