属性

add : Transition
addDisplaced : Transition
cacheBuffer : int
count : int
currentIndex : int
currentItem : Item
currentSection : string
delegate : Component
displaced : Transition
displayMarginBeginning : int
displayMarginEnd : int
effectiveLayoutDirection : enumeration
footer : Component
footerItem : Item
footerPositioning : enumeration
header : Component
headerItem : Item
headerPositioning : enumeration
highlight : Component
highlightFollowsCurrentItem : bool
highlightItem : Item
highlightMoveDuration : int
highlightMoveVelocity : real
highlightRangeMode : enumeration
highlightResizeDuration : int
highlightResizeVelocity : real
keyNavigationEnabled : bool
keyNavigationWraps : bool
layoutDirection : enumeration
model : model
move : Transition
moveDisplaced : Transition
orientation : enumeration
populate : Transition
preferredHighlightBegin : real
preferredHighlightEnd : real
remove : Transition
removeDisplaced : Transition
reuseItems : bool
section
section.criteria : enumeration
section.delegate : Component
section.labelPositioning : enumeration
section.property : string
snapMode : enumeration
spacing : real
verticalLayoutDirection : enumeration

模型model

view所管理的所有的数据都存放在该模型中，以供代理进行显示操作

代理delegate

代理决定如何操作模型中存放的数据

ListView {
    id: list
     width: 180; height: 200
     model: ListModel {
         ListElement {
             name: "Bill Smith"
             number: "555 3264"
         }
         ListElement {
             name: "John Brown"
             number: "555 8426"
         }
         ListElement {
             name: "Sam Wise"
             number: "555 0473"
         }
     }
     spacing: 20
     //当前项高亮
     highlight: Rectangle {
         color: "lightsteelblue";
     }
     delegate: Rectangle {
         color: "transparent"
         width: list.width
         height: 20
         Text{
             id: txt
             text: name + ": " + number
         }
         MouseArea{
             anchors.fill: parent
             onClicked: {
                 //修改当前项
                 currentIndex = index
                console.log(index)
             }
         }
     }
 }

拖拽回弹效果

Flickable

interactive : bool 拉动回弹属性

flickableDirection: Flickable.HorizontalFlick    //设置回弹方向与使能
     delegate: Row {
              Text { text: '<b>Name:</b> ' + name; width: 160 }
              Text { text: '<b>Number:</b> ' + number; width: 160 }
          }

页眉header\页脚footer

Rectangle{
    id: rect
    border.width: 2
    border.color: "red"
    width: 400
    height: 200
    anchors.centerIn: parent
    ListView {
        id: list
         anchors.fill: rect
//        width: 180
//        height: 200
        header: Rectangle{
             width: list.width
             height: 20
             color:"blue"
         }
         footer:Rectangle{
             width: list.width
             height: 20
             color: "#22222211"
         }
         footerPositioning:ListView.OverlayFooter    //页脚位置设置
         model: ListModel {
             ListElement {
                 name: "Bill Smith"
                 number: "555 3264"
             }
             ListElement {
                 name: "John Brown"
                 number: "555 8426"
             }
             ListElement {
                 name: "Sam Wise"
                 number: "555 0473"
             }
         }
         spacing: 20
         //当前项高亮
         highlight: Rectangle {
             color: "lightsteelblue";
         }
         delegate: Rectangle {
             color: "transparent"   //每项元素的底色
             width: list.width
             height: 20
             Text{
                 id: txt
                 text: name + ": " + number
             }
             MouseArea{
                 anchors.fill: parent
                 onClicked: {
                     //修改当前项
                     currentIndex = index
                    console.log(index)
                 }
             }
         }
         //滑动回弹效果
         flickableDirection: Flickable.HorizontalFlick
    //     delegate: Row {
    //              Text { text: '<b>Name:</b> ' + name; width: 160 }
    //              Text { text: '<b>Number:</b> ' + number; width: 160 }
    //          }
     }
}

section分组显示

Rectangle{
    id: rect
    border.width: 2
    border.color: "red"
    width: 400
    height: 200
    anchors.centerIn: parent
    ListView {
        id: list
         anchors.fill: rect
         model: ListModel {
             ListElement {
                 name: "Bill Smith"
                 number: "555 3264"
                 size: "small"
             }
             ListElement {
                 name: "John Brown"
                 number: "555 8426"
                 size: "medium"
             }
             ListElement {
                 name: "Sam Wise"
                 number: "555 0473"
                 size: "big"
             }
         }
         spacing: 20
         //当前项高亮
         highlight: Rectangle {
             color: "lightsteelblue";
         }
         //滑动回弹效果
         flickableDirection: Flickable.HorizontalFlick
         delegate: Row {
                  Text { text: '<b>Name:</b> ' + name; width: 160 }
                  Text { text: '<b>Number:</b> ' + number; width: 160 }
              }
         Component {
                  id: sectionHeading
                  Rectangle {
                      width: rect.width
                      height: 20
                      color: "lightsteelblue"
                      required property string section
                      Text {
                          text: parent.section
                          font.bold: true
                          font.pixelSize: 20
                      }
                  }
              }
         section.property: "size"   //分组排列依据
         section.criteria: ViewSection.FullString   //控制property对应的size显示方式 是全字符 还是首字符
         section.delegate: sectionHeading //控制section的每一个property如何绘制
     }
}