水平列表視圖導航 - 可見項目

我有更多的水平列表視圖。例如，讓我們拿兩個。每個列表的項目長度不一樣，當一個列表滾動時 - 另一個列表也會滾動。我用contentX屬性解決了這個問題。但是，當我想在彼此之間導航時（當我按下「向下」鍵時，我需要強制關注第二個listview）。問題是，重點是記住horizontalna2.currentIndex，我想在ListView中第一個可見的項目。水平列表視圖導航 - 可見項目

在Android中是非常簡單的，但是要在這裏解決，呵呵.. 下面是代碼的草圖：

Rectangle { 
width: 500 
height: 200 
ListModel { 
     id: model1 
     ListElement { itemwidth: 100 } 
     ListElement { itemwidth: 200 } 
     ListElement { itemwidth: 50 } 
     ListElement { itemwidth: 70 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
    } 
    ListModel { 
     id: model2 
     ListElement { itemwidth: 300 } 
     ListElement { itemwidth: 50 } 
     ListElement { itemwidth: 70 } 
     ListElement { itemwidth: 100 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 30 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
     ListElement { itemwidth: 90 } 
    } 

ListView { 
    clip: true 
    id: horizontalna 
    boundsBehavior: Flickable.StopAtBounds 
    width: 500 
    height: 60; 
    focus: true 
    model: model1 
    orientation: ListView.Horizontal 
    KeyNavigation.down: horizontalna2 
    onContentXChanged: { 
     if (horizontalna.activeFocus === true) 
     { 
      horizontalna2.contentX = horizontalna.contentX 
     } 
    } 

    delegate: Item { 
     id: containerHorizontal 
     width: itemwidth; height: 60; 

     Rectangle { 
      id: contentHorizontal 
      anchors.centerIn: parent; width: containerHorizontal.width; height: containerHorizontal.height - 10 
      color: "transparent" 
      antialiasing: true 

      Rectangle { id: insideConHorizontal; anchors.fill: parent; anchors.margins: 3; color: "grey"; antialiasing: true; radius: 5 


       Text { 
        id: labelHorizontal 
        text: "name" 
        color: "white" 
       } 
      } 
     } 
     states: State { 
      name: "active"; when: containerHorizontal.activeFocus 
      PropertyChanges { target: contentHorizontal; color: "#FFFF00"; scale: 1} 
      PropertyChanges { target: insideConHorizontal; color: "#F98F06" } 
      PropertyChanges { target: labelHorizontal; color: "#0E2687"} 
     } 

    } 
} 
ListView { 
    id: horizontalna2 
    anchors.top: horizontalna.bottom 
    boundsBehavior: Flickable.StopAtBounds 
    width: 500 
    height: 60; 
    focus: true 
    model: model2 
    orientation: ListView.Horizontal 

    onContentXChanged: { 
     if (horizontalna2.activeFocus === true) 
     { 
      horizontalna.contentX = horizontalna2.contentX 

     } 
    } 
    delegate: Item { 
     id: containerHorizontal2 
     width: itemwidth; height: 60; 

     Rectangle { 
      id: contentHorizontal2 
      anchors.centerIn: parent; width: containerHorizontal2.width; height: containerHorizontal2.height - 10 
      color: "transparent" 
      antialiasing: true 

      Rectangle { id: insideConHorizontal2; anchors.fill: parent; anchors.margins: 3; color: "grey"; antialiasing: true; radius: 5 
       Text { 
        id:labelHorizontal2 
        color: "white" 
        text: "name" 
       } 
      } 
     } 
     states: State { 
      name: "active"; when: containerHorizontal2.activeFocus 
      PropertyChanges { target: contentHorizontal2; color: "#FFFF00"; scale: 1} 
      PropertyChanges { target: insideConHorizontal2; color: "#F98F06" } 
      PropertyChanges { target: labelHorizontal2; color: "#0E2687"} 
     } 
    } 
}

}

EDIT [解決]： 獲取指數第二個列表的第一個可見項取決於contentX - > function indexAt（）

onCurrentIndexChanged: { 
        if (horizontalna.activeFocus === true) 
        { 
         horizontalna2.currentIndex = horizontalna2.indexAt((horizontalna2.contentX),0) 
        } 
       }

來源

2016-08-04 iTwo

Get i第二個列表的第一個可見項的索引取決於contentX - > function indexAt（）

onCurrentIndexChanged: { 
        if (horizontalna.activeFocus === true) 
        { 
         horizontalna2.currentIndex = horizontalna2.indexAt((horizontalna2.contentX),0) 
        } 
       }

來源

2016-08-09 12:23:48 iTwo

水平列表視圖導航 - 可見項目

回答

相關問題