水平列表视图导航 - 可见项目

我有更多的水平列表视图。例如，让我们拿两个。每个列表的项目长度不一样，当一个列表滚动时 - 另一个列表也会滚动。我用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

水平列表视图导航 - 可见项目

回答

相关问题