当前位置:   article > 正文

QML类型——ListView_qml listview

qml listview

正文

为列表模型(ListModel)的所有元素提供列表视图。

详细说明

ListView显示内置QML类型(例如ListModel和XmlListModel)创建的模型数据,或者使用C++定义的自定义模型类(继承QAbstractItemModel或QAbstractListModel)创建的数据。

ListView有一个Model(定义要显示的数据)和一个Delegate(定义如何显示数据)。ListView中的元素可以水平或垂直放置。列表视图本质上是可以拖动的,因为ListView继承Flickable。

用法示例

以下示例显示了在名为ContactModel.qml的文件中定义的简单列表模型:

import QtQuick 2.0

ListModel {
    ListElement {
        name: "Bill Smith"
        number: "555 3264"
    }
    ListElement {
        name: "John Brown"
        number: "555 8426"
    }
    ListElement {
        name: "Sam Wise"
        number: "555 0473"
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

另一个组件可以在ListView中显示此模型数据,如下所示:

import QtQuick 2.0

ListView {
    width: 180; height: 200

    model: ContactModel {}
    delegate: Text {
        text: name + ": " + number
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

示例中,ListView为model创建了ContactModel组件,并为其委托创建一个Text显示项。

改进的列表视图如下所示。对委托进行了显示效果改进,并将其移至单独的contactDelegate组件中。

Rectangle {
    width: 180; height: 200

    Component {
        id: contactDelegate
        Item {
            width: 180; height: 40
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

示例中,当前选中的元素使用highlight属性,以蓝色矩形突出显示,并将焦点(focus)设置为true以启用ListView的键盘导航。ListView本身就是焦点范围(有关详细信息,请参考Qt Quick中的Keyboard Focus)。

代理(delegate)将根据需要实例化,并且可以随时销毁。它们是ListView的contentItem的父级,而不是ListView本身的父级。永远不要将状态存储在代理中。

ListView将许多属性附加到代理的根元素(root item),例如ListView.isCurrentItem。在以下示例中,代理的根元素可以直接访问附加属性ListView.isCurrentItem。而子contactInfo对象必须通过父级访问(wrapper.ListView.isCurrentItem)

ListView {
    width: 180; height: 200

    Component {
        id: contactsDelegate
        Rectangle {
            id: wrapper
            width: 180
            height: contactInfo.height
            color: ListView.isCurrentItem ? "black" : "red"
            Text {
                id: contactInfo
                text: name + ": " + number
                color: wrapper.ListView.isCurrentItem ? "red" : "black"
            }
        }
    }

    model: ContactModel {}
    delegate: contactsDelegate
    focus: true
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

注意:视图不会自动启用裁剪(clip)。如果视图没有被其他对象或屏幕裁剪,则必须设置clip:true才能将超出视图部分裁剪掉。

ListView布局

ListView中的元素布局方式有以下三种:

  1. orientation
    控制元素是水平还是垂直布局,该值可以是Qt.Horizontal和Qt.Vertical。

  2. layoutDirection
    控制水平方向布局方式,通过Qt.LeftToRight或Qt.RightToLeft控制水平从左到右还是从右到左布局。

  3. verticalLayoutDirevtion
    控制垂直方向布局方式,通过ListView.TopToBottom或ListView.BottomToTop来控制垂直从上到下还是从下到上布局。

默认情况下,ListView是垂直布局,并且是从上到下放置。下图显示了ListView可以具有的不同布局方式,具体取决于上面列出的属性值:
在这里插入图片描述

Flickable设置

默认情况下,垂直ListView将flickableDirection设置为Flickable.Vertical,水平ListView将其设置为Flickable.Horizontal。此外,垂直ListView只计算contentHeight,而水平ListView只计算contentWidth。

从Qt 5.9(Qt Quick 2.9)开始,可以制作一个可以向两个方向滑动的ListView。将flickableDirection设置为Flickable.AutoFlickDirection或Flickable.AutoFlicklfNeeded,并且必须提供所需的contentWidth和contentHeight。

ListView {
    width: 180; height: 200

    contentWidth: 320
    flickableDirection: Flickable.AutoFlickDirection

    model: ContactModel {}
    delegate: Row {
        Text { text: '<b>Name:</b> ' + name; width: 160 }
        Text { text: '<b>Number:</b> ' + number; width: 160 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

ListView中的顺序

元素的Z值确定了它们的与渲染顺序。ListView使用几个不同的默认Z值,具体取决于要创建的项目类型:

属性默认Z值
delegate1
footer1
header1
highlight2
section.delegate2

属性

  • highlightMoveDuration : int
  • highlightMoveVelocity : real
  • highlightResizeDuration : int
  • highlightResizeVelocity : real
    这些属性控制高亮显示代理的移动速度和调整动画大小。
    highlightFollowsCurrentItem必须为true才能使这些属性生效。
    highlightMoveVelocity移动速度属性默认值为400像素/秒。
    highlightMoveDuration持续时间属性默认值为-1,即高亮显示将以设置的速度移动所需的时间。
    这些属性与SmoothedAnimation具有相同的特征:如果同事设置了速度和持续时间,则动画将使用持续时间较短的那个。
    移动速度和持续时间属性用于控制由于索引变化而引起的移动;例如,当调用crementCurrentCurrentIndex()时,当用户flick(轻弹)ListView时,flick的速度将用于控制移动。
    如果仅设置一个属性,可以将另一个属性设置为-1:
highlightMoveDuration :1000 
highlightMoveVelocity :- 1  
  • 1
  • 2
  • displayMarginBeginning : int
  • displayMarginEnd : int
    此属性允许将代理显示在视图的外面。
    如果该值不为零,则视图将在视图开始之前或结束之后创建额外的代理。该视图将创建适合指定像素大小的尽可能多的代理。
    例如,如果在垂直视图中的代理是20像素高,displayMarginBeginning和displayMarginEnd都设置为40,然后2个代理在视图上面被创建,2个代理在视图下面被创建。

默认值为0.
此属性用于允许配置某些UI,而不是性能优化。如果处于性能原因希望在视图外部创建代理,则可能要改用cacheBuffer属性。

  • highlightRangeMode : enumeration
  • preferredHighlightBegin : real
  • preferredHighlightEnd : real
    这些属性定义属兔中高亮显示的范围。
    preferredHighlightBegin值必须小于preferredHighlightEnd值。
    当滚动列表时,这些属性会影响当前对象的位置。例如,如果在滚动视图时,当前选定的对象应停留在列表中间,则将preferredHighlightBegin和preferredHighlightEnd设置为中间对象所在位置的顶部和底部坐标。如果以编程方式更改currentItem,则列表将自动滚动,以使当前对象位于视图中间。此外,无论是否存在高亮显示,当前对象索引的行为都会发生。

highLightRangeMode有效值:

  1. ListView.ApplyRange
    视图尝试将高亮显示保持在范围内。
    但是高亮显示可能会移动到列表末尾的范围之外。
  2. ListView.StrictlyEnforceRange
    高亮不会超出范围。如果键盘或失败操作会导致高亮显示超出范围,则当前对象会更改。
  3. ListView.NoHighlightRange
    这是默认值。
  • currentIndex:int/font>

  • currentItem : Item
    currentIndex属性保存当前对象的索引
    currentItem保存当前对象。
    将currentIndex设置为-1将清除高亮显示并将currentItem设置为null。
    如果highlightFollowsCurrentItem为true,则设置这两个属性中的任何一个都将平滑滚动ListView,以便当前对象可见。
    请注意,当前对象的位置是不准确的,直到在视图中变得可见位置。

  • add : Transition
    此属性指定添加对象到视图时的过渡效果。
    例如,以下视图指定了过渡效果:

ListView {
    ...
    add: Transition {
        NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

只要将对象添加到上面视图中,该对象就会在一秒内从位置(100,100)到视图的最终位置(x,y),对这移动过程进行动画处理。过渡仅适用于添加到视图中的新对象。它不适用于被替换的对象,要设置被替换对象的动画,请设置displaced或addDisplaced属性。

  • addDisplaced : Transition
    此属性指定因添加对象而被替换的对象的过渡效果。
    如下示例:
ListView {
    ...
    addDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

每当一个对象添加到视图中时,新对象下面的所有对象都会被移动,从而导致它们在视图内向下移动(或者,如果水平放置则横向移动)。当发生这种移动时,对象将按照指定的时间在一秒钟内通过NumberAnimation移动到视图中最终位置(x,y),并将过程进行动画处理。此过渡不适用于已添加到视图中的新对象。
如果一个对象同时通过多种类型的操作进行移动,则不会定义addDisplaced,moveDisplaced或removeDisplaced过渡。此外,如果不根据addDisplaced,moveDisplaced或removeDisplaced操作来指定不同的过渡效果,请考虑设置displaced属性。

注意:此过渡不适用于初始化填充视图或视图模型更改时创建的对象。在这些情况下将应用populate过渡。

  • cacheBuffer:int
    此属性确定是否将代理保留在视图的可见区外。
    如果辞职大于零,则视图可能会保留实例化的代理,只要它适合指定的缓冲区即可。例如,如果在垂直视图中代理的高为20像素,且cacheBuffer设置为40,那么最多可以创建/保留可见区域上方的2个代理和下方的2个代理。缓冲的代理是异步创建的,从而允许跨多个帧进行创建,并减少了跳过帧的可能性。wield提高绘制性能,不对可见区域外的代理进行绘制。
    此属性的默认值取决于平台,但通常是大于零的值。负值将被忽略。
    请注意,cacheBuffer不是像素缓冲区,它仅维护其他实例化的代理对象。
    注意:设置此属性不能代替创建有效的代理。它可以提高滚动行为的平滑性,但会小号更多的内存。代理中的对象和绑定越少,视图滚动的速度就越快。重要的是要意识到,设置cacheBuffer只会推迟由缓慢加载代理引起的问题,这不是问题的解决方案。

cacheBuffer在displayMarginBeginning或displayMarginEnd指定的任何显示边界之外运行。

  • count : int
    此属性保存视图中的对象个数。

  • currentSection : string
    此属性保存当前位于视图头部的部分。

  • delegate : Component
    代理提供一个模板,定义了由视图实例化的每个对象。index是公开可访问的索引属性。
    代理中对象和绑定的数量直接影响视图的flick性能。如果可能的话,将不需要正常显示代理的功能放在加载器中,该将在其可以在需要时加载其他组件。
    ListView将根据代理中根对象的大小对对象进行布局。

  • displaced : Transition
    此属性指定视图的模型中被替换的对象的过渡效果。
    这是便捷的方法,用于指定要应用于通过添加、移动和删除操作替换的所有对象的过渡效果,而不必指定单个addDisplaced,moveDisplaced和removeDisplaced属性。如下示例指定唯一过渡的视图:

ListView {
    ...
    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

示例中,在视图中添加、移动或删除任何对象时,其下面的对象都会移动,从而导致它们在视图中向下移动。当发生这种移动时,将按照指定的时间(一秒之)内通过NumberAnimation对对象在视图中向其新的位置(x,y)的移动进行动画处理。

如果视图指定了此通用移动效果以及特定的addDisplaced,moveDisplaced或removeDisplaced过渡效果,则在相关操作发生时,将使用更具体的过渡效果来代替通用过渡效果,前提是尚未禁用更具体的过渡(enabled设置为false)。如果确实禁用了,则改用为通用过渡效果。

  • effectiveLayoutDirection : enumeration
    此属性获取水平列表的有效布局方式。
    使用附加属性LayoutMirroring::enabled用于布局时,水平列表的可视布局方向将被镜像。但是,属性layoutDirection将保持不变。

  • footer : Component
    此属性指定用作页脚的组件对象。
    为每个视图创建页脚组件的实例。页脚位于视图中所有对象的末尾。

  • footerItem : Item
    此属性获取页脚组件对于的对象。

  • footerPositioning : enumeration
    此属性确定页脚对象的位置。
    | 值 | 描述 |
    | – | – |
    | ListView.InlineFooter | (默认值)页脚位于内容的末尾,并像普通对象一样与内容一起移动 |
    | ListView.OverlayFooter | 页脚位于视图的末尾 |
    | ListView.PullBackFooter | 页脚位于视图的末尾。可以通过向后移动内容来将页脚推开,然后向前移动内容来将页脚拉回 |
    注意: 此属性对页脚的渲染顺序没有影响。例如,如果在使用ListView.OverlayFooter时将页脚显示在代理对象的上方,则应将其Z值设置为大于代理的Z值。
    注意:如果footerPositioning未设置为ListView.InlineFooter,则用户无法在页脚中按下并轻弹列表。在任何情况下,页脚对象可以包含对象或事件处理程序,以提供对鼠标或触摸屏输入的自定义处理。

  • header : Component
    此属性指定用于标题的组件对象。
    为每个视图创建标题组件的示例。标题位于视图中所有对象的头部。

  • headerItem : Item
    此属性返回标题组件的对象。

  • headerPositioning : enumeration
    此属性确定标题对象的位置。
    | 值 | 描述 |
    | – | – |
    | ListView.InlineHeader | (默认值)标题位于内容开头,并项普通对象一样与内容一起移动。 |
    | ListView.OverlayHeader | 标题位于视图的开头 |
    | ListView.PullBackHeader | 标题位于视图的开头,可以通过向前移动内容来将标题推开,并通过向后移动内容来将标题拉回。 |
    注意:此属性对标题的渲染顺序没有影响。例如,如果在使用ListView.OverlayHeader时标题应显示在代理对象的上方,则其Z值应设置为高于代理的Z值。
    注意:如果headerPositioning未设置ListView.InlineHeader,则用户无法按下并轻弹标题中的列表。在任何情况下,标题对象都可以包含项或事件处理程序,以提供对鼠标或触摸输入的自定义处理。

  • highlight : Component
    此属性指定用于高亮显示的组件对象。
    为每个列表创建一个高亮组件的实例。除非列表中的highlightFollowsCurrentItem属性为false,否则列表将管理所有组件实例的几何形状,使其与当前项保持一致。

  • highlightFollowsCurrentItem : bool
    此属性指定goal显示是否由视图管理。
    如果此属性为true(默认值),则高亮显示将平滑移动以跟随当前对象。否则,高亮不会被视图移动,并且任何移动都必须由高亮实现。
    由SpringAnimation定义动作的高亮:

Component {
    id: highlight
    Rectangle {
        width: 180; height: 40
        color: "lightsteelblue"; radius: 5
        y: list.currentItem.y
        Behavior on y {
            SpringAnimation {
                spring: 3
                damping: 0.2
            }
        }
    }
}

ListView {
    id: list
    width: 180; height: 200
    model: ContactModel {}
    delegate: Text { text: name }

    highlight: highlight
    highlightFollowsCurrentItem: false
    focus: true
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

请注意:高亮显示动画还会影响视图的滚动方式。这是因为视图移动以将高亮显示保持在可见范围内。

  • highlightItem : Item
    返回高亮显示组件的对象。

  • keyNavigationEnabled : bool
    此属性指定是否启用列表的按键导航。
    如果为true,则用户可以使用键盘浏览视图。对于需要选择性地启用或禁用鼠标和键盘交互的应用程序很有用。
    默认情况下,此属性的值绑定到interactive,以确保现有应用程序的行为兼容性。明确设置后,它将不再绑定到interactive属性。

  • keyNavigationWraps : bool
    此属性指定按键导航是否围绕列表。
    如果为true,则当前对象选择移至列表末尾的按键导航会自动回绕,并将选择对象移至列表的开头,反之亦然。
    默认为false。

  • layoutDirection : enumeration
    此属性指定水平列表的布局方式。
    Qt.LeftToRight - (默认值)对象将从左到右进行布局。
    Qt.RightToLeft - 对象从右到左布局。
    如果布局方向是Qt.Vertical,则该属性无效。

  • model : model
    此属性指定为列表提供数据的模型。
    该模型提供了用于在视图中创建对象的数据集。可以使用ListModel,XmlListModel或ObjectModel在QML中直接创建模型,也可以由C++模型类提供。如果使用C++模型类,则它必须是QAbstractItemModel的子类或是简单的列表。

  • move : Transition
    此属性指定对象移动的过渡效果。
    如下示例:

ListView {
    ...
    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

每当模型执行移动操作时,视图中的各个对象将在一秒钟内以动画形式移动到新的位置。过渡仅适用于模型中作为移动操作主题的对象;它不适用于由于移动操作而引起其下面移动的对象。

  • moveDisplaced : Transition
    此属性指定因移动操作引起的移动对象的过渡效果。
    如下示例:
ListView {
    ...
    moveDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

每当模型执行移动操作时,该操作的原索引和目标索引之间的对象就会移动,从而导致它们在视图中向上或向下移动。每当发生这种移动时,将按指定的时间(一秒钟)内通过NumberAnimation对对象在视图中向其新的位置(x,y)的移动进行动画处理。
如果一个对象同时通过多种类型的操作进行位移,则不会定义是否应用addDisplaced,moveDisplaced或removeDisplaced过渡。

  • orientation : enumeration
    此属性指定列表的方向。
    ListView.Horizontal - 水平放置对象。
    ListView.Vertical - (默认)垂直放置对象。
    水平方向:
    在这里插入图片描述

垂直方向:
在这里插入图片描述

  • populate : Transition
    此属性指定视图中初始化创建的对象的过渡效果。
    它适用于在以下情况下创建的所有对象:
  1. 先创建的视图
  2. 视图的model发生改变,以使可见的代理被完全替换
  3. 视图的model是reset,如果模型是QAbstractItemModel子类
    如下示例:
ListView {
    ...
    populate: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

初始化视图后,该视图将创建所有必要的对象,然后在一秒钟内将它们设置到最终位置。
但是,当后续滚动视图时,即使在代理变得可见时实例化了代理,填充过渡也不会运行。当模型以新的可见代理的方式更改时,add过渡就能运行。因此,您不应该依赖于populate转换来初始化代理中的属性,因为它并不适用于每个代理。如果您的动画给to属性设置了值,为了有动画效果,还得设置from属性:

ListView {
    ...
    delegate: Rectangle {
        opacity: 1 // not necessary because it's the default
    }
    populate: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • remove : Transition
    此属性指定了从视图中删除的对象的过渡效果。
    如下示例:
ListView {
    ...
    remove: Transition {
        ParallelAnimation {
            NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
            NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

每当从视图中删除一个对象时,该对象将在一秒钟内动画化到位置(100,100),同时还将其透明度更改为0 。该过渡仅适用于从视图中删除的对象。
请注意,在应用删除多度时,该对象已从模型中删除,对已删除的模型数据的索引引用将无效。
此外,如果已为代理对象设置了delayRemove附加属性,则在delayRemove再次变为false之前,将不应用删除过渡效果。

  • removeDisplaced : Transition
    此属性指定因删除操作引起的被替换的对象的过渡效果。
    如下示例:
ListView {
    ...
    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

每当从视图中删除某个对象时,位于其下方的所有对象都将移动,从而使它们在视图内向上移动。当发生这种位移时,将按指定的时间内通过NumberAnimation对对象在视图中向其新的位置(x,y)的移动进行动画处理。此过渡不适用于实际已从视图中删除的对象。

  • reuseItems : bool
    此属性在Qt 5.15引入
    此属性可以重用从代理实例化的对象。如果设置为false,则任何当前合并的对象都将被销毁。
  • section.criteria : enumeration
  • section.delegate : Component
  • section.labelPositioning : enumeration
  • section.property : string
    这些属性确定模型内容的分组/分节的外观。
    section.property包含作为每个分组基础的属性的名称。
    section.criteria包含根据section.property组成每个部分的标准。列举值:
    1.ViewSection.FullString - (默认值)根据section.property值分组/分节
    2.ViewSection.FirstCharacter - 根据section.property对应的字符串首字母分组(不区分大小写,例如,地址簿的“A”,“B”,“C”section等)
    确定部分边界时,使用不区分大小写的比较。
    section.delegate分组的代理组件。
    section.labelPositioning确定当前和/或下一部分标签是否粘贴在视图的开始/结尾,以及标签是否以内联方式显示。列举值:
    1.ViewSection.InlineLabels-分组标签在分隔各部分的对象代理之间内联显示(默认)。
    2.ViewSection.CurrentLabelAtStart-当前节标签在移动时会粘贴到视图的开始。
    3.ViewSection.NextLabelAtEnd-下一个分组标签(在所有可见分组之外)在移动视图时粘贴在视图的末尾。
    注意:启用ViewSection.NextLabelAtEnd要求视图向前扫描下一部分,这会影响性能,特别是对于速度较慢的模型。

列表中的每个对象都具有名为ListView.section,ListView.previousSection和ListView.nextSection的附加属性。

如下示例,一个ListView显示动物列表,分为几部分。ListView中的每个对象都根据模型对象的“size”属性放置在不同的部分中。sectionHeading代理组件提供了淡蓝色的条,用于标记每个节的开始。

// The delegate for each section header
    Component {
        id: sectionHeading
        Rectangle {
            width: container.width
            height: childrenRect.height
            color: "lightsteelblue"

            required property string section

            Text {
                text: parent.section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }

    ListView {
        id: view
        anchors.top: parent.top
        anchors.bottom: buttonBar.top
        width: parent.width
        model: animalsModel
        delegate: Text {
            required property string name
            text: name
            font.pixelSize: 18
        }

        section.property: "size"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeading
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

在这里插入图片描述

注意:ListView添加节是不会自动根据节条件对列表项进行重新排序。如果未按节对模型进行排序,则创建的节可能不是唯一的。即使该节存在于其他位置,不同节之间的每个边界也会创建节标题。

  • snapMode : enumeration
    此属性确定拖动或轻弹后视图滚动的沉降方式。列举值:
    1.ListView.NoSnap(默认值)-视图在可见区域内的任何位置停止。
    2.ListView.SnapToItem - 视图通过移动距离是否超过半个Item来判断视图停止的位置。
    3.ListView.SnapOneItem - 释放鼠标按钮时,视图与第一个可见对象的距离不超过一个对象。此模式对于一次移动一页特别有用。

建议亲手实验:

ListView{
    id:listView
    anchors.fill: parent
    model: 20
    snapMode: ListView.SnapOneItem

    delegate: Rectangle{
        width: listView.width
        height: listView.height
        color: index % 2 ? "red":"yellow"
        Label{
            id:txt
            anchors.centerIn: parent
            font.pointSize: 50
            text: index
            }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • spacing: real
    此属性指定相邻对象之间的间距。默认为0
  • verticalLayoutDirection: enumeration
    此属性指定垂直列表的布局方向。
    ListView.TopToBottom - (默认)对象从上到下排列。
    ListView.BottomToTop - 对象从下到上排列。

信号

  • add()
    将对象添加到视图后,离家发送此信号。
    如果指定了add过渡效果,则在处理此信号后立即生效。

  • remove()
    在从视图中删除对象之前会发送该信号。
    如果指定了remove过渡效果,则在处理此信号后应用过渡效果,前提是delayRemove为false。

方法

  • positionViewAtBeginning()
  • positionViewAtEnd()
    考虑到所有页眉和页脚,将视图放在开头和结尾。
    不建议使用contentX和contentY将视图定位在特定位置。这是不可靠的,因为从列表的开头删除对象不会导致其他对象重新定位,并且视图的实际开始位置可能会因代理的大小而异。
    注意:只能在组件完成后才能调用该方法。如下示例,在组件初始化完成后调用方法将视图放置末尾:
Component.onCompleted: positionViewAtEnd()
  • 1
  • decrementCurrentIndex()
    减少当前索引。如果keyNavigationWraps为true且当前位于开头,则当前索引将换行。如果计数为0则此方法无效。
    测试后发现没有什么现象,后续再查找资料理解。

  • forceLayout()
    通常,模型中的更改会按照每帧更新一次。这意味着在内部脚本块中可能会出现模型的更改未更新显示。此方法将强制ListView立即响应模型中的所有更改。

  • incrementCurrentIndex()
    增加当前索引。如果keyNavigationWraps为true且当前位于末尾,则当前索引将换行。

  • int indexAt(x, real y)
    返回在当前坐标(x,y)的可见项的索引。如果在指定的点没有对象,或者该对象不可见,则返回-1。
    如果该对象在可见区域外,则无论滚动到视图中时该点是否存在对象,都将返回-1。

  • Item itemAt(x, real y)
    返回当前位置(x,y)的可见项对象。如果指定的点上没有对象或该对象不可见,则返回null。 如果该对象在可见区域外,则无论滚动到视图中时该点是否存在对象,都将返回null。

  • Item itemAtIndex(index)
    返回索引index对应的对象。如果没有该索引的对象(例如该对象尚未被创建),或者因为已将其平移到可见区域外并从缓存中删除,则返回null。
    注意:返回值不能存储,因为如果视图释放了该对象,则一旦控制权超出调用范围,它将变为null。
    Qt 5.13引入此方法。

  • positionViewAtIndex(index, PositionMode mode)
    定位视图,使索引位于mode指定的位置:

  1. ListView.Beginning - 在视图顶部(或水平布局的左侧)放置对象。
  2. ListView.Center - 位于视图中心的位置。
  3. ListView.End - 位于底部(或水平布局的右侧)放置。
  4. ListView.Visible - 如果该对象的任何部分可见,则不执行任何操作,否则将其显示。
  5. ListView.Contain - 确保整个对象可见。如果对象大于视图,则该对象位于视图的顶部(或水平布局的左侧)。
  6. ListView.SnapPosition - 将对象定位在preferredHighlightBegin。仅当highlightRangeMode为StrictlyEnforceRange或通过snapMode启用捕捉时,此模式才有效。

如果将视图定位在索引处会导致在视图的开始或结尾显示空白,则视图将位于边界处。
不建议使用contentX或contentY将视图定位在特定索引处。这是不可靠的,因为从列表的开头删除对象不会导致所有其他项目重新定位,并且视图的实际开始可能会因委托的大小而异。使对象可见的正确方法是使用positionViewAtIndex。
注意:仅应在组件完成后才调用方法。若要在启动时定位视图,应在Component.onCompleted调用此方法。例如,将视图放在末尾:

Component.onCompleted: positionViewAtIndex(count - 1, ListView.Beginning)
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/170737
推荐阅读
相关标签
  

闽ICP备14008679号