方法文档轻弹QML ListView的水平和垂直 [英] HowTo flick a QML ListView horizontal and vertical

问题描述

我要显示一个小显示屏上的大名单。与ListView的问题是，我必须设置一个方向，无论是flickable水平或垂直。

我试过是：

1. 我插在Flickable ListView控件，并设置为Flickable水平滚动和垂直滚动的看法，但我不能在同一时间轻弹双方


2. 我试图设置的ListView为Flickable.Horizo​​ntalAndVerticalFlick的flickableDirection财产，但没有奏效。

继承人一个简单的例子：

 进口QtQuick 2.2
进口QtQuick.Window 2.1窗口{
    可见：真
    宽度：360
    身高：360    {的ListModel
        ID：fruitModel        ListElement {
            名称：苹果
            成本：2.45
        }
        ListElement {
            名称：橙色
            成本：3.25
        }
        ListElement {
            名称：香蕉
            成本：1.95
        }
    }    列表显示 {
        anchors.fill：父        型号：fruitModel        代表：矩形{
            ID：delegateRect
            身高：150
            宽度：545            border.color：钢青
            border.width：1            行{
                文字{
                    ID：nameLabel
                    宽度：345
                    文本：名称
                }                文字{
                    ID：costLabel
                    宽度：200
                    文本：成本
                }
            }
        }
    }
}
 

解决方案

我认为你正在寻找解决的办法是的 转发 。

  

中继器类型用于创建大量类似的项目。像其他视图类型，中继器有一个模式和代表：在模型的每个条目，委托是从模型数据播种上下文实例化。中继器项目通常是封闭在一个定位器类型，如行或列视觉定位由Repeater创建的多个委托项目。

由此产生的行（列 RESP）可包含在 Flickable 提供实际轻拂能力。

I want to display a big list on a small display. The problem with the ListView is, that I have to setup a orientation, whether it is flickable horizontal or vertical.

What I tried is:

1. I inserted the ListView in a Flickable, and setup the Flickable for horizontal scroll and the view for vertical scroll, but then I can't flick to both sides at the same time
2. I tried to set the flickableDirection property of the ListView to Flickable.HorizontalAndVerticalFlick, but this didn't work.

Heres a simple example:

import QtQuick 2.2
import QtQuick.Window 2.1

Window {
    visible: true
    width: 360
    height: 360

    ListModel {
        id: fruitModel

        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
    }

    ListView {
        anchors.fill: parent

        model: fruitModel

        delegate: Rectangle {
            id: delegateRect
            height: 150
            width: 545

            border.color: "steelblue"
            border.width: 1

            Row {
                Text {
                    id: nameLabel
                    width: 345
                    text: name
                }

                Text {
                    id: costLabel
                    width: 200
                    text: cost
                }
            }
        }
    }
}

解决方案

I think the solution you are searching for is Repeater.

The Repeater type is used to create a large number of similar items. Like other view types, a Repeater has a model and a delegate: for each entry in the model, the delegate is instantiated in a context seeded with data from the model. A Repeater item is usually enclosed in a positioner type such as Row or Column to visually position the multiple delegate items created by the Repeater.

The resulting Row (Column resp.) can be enclosed in a Flickable which provides the actual flicking ability.

这篇关于方法文档轻弹QML ListView的水平和垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！