Qml 图像的水平滚动

我想创建水平滚动图像。如果你看到黑莓旅行应用程序，在这个应用程序的顶部图像滚动动态。我想创建相同的滚动视图。在图像的底部，我们还可以看到圆圈。随着图像的变化，特定的圆圈变暗。此滚动条有两种方式，即它可以及时滚动，通过单击鼠标也可以滚动。

---

所以，请帮助我创建这样的滚动。我是新来的。谢谢…

这里是一个基于容器的自定义控件，该容器提供了一行圆/点选择范例。标准免责声明适用，出于演示目的，我不保证捕获了所有错误条件等。具体来说，计算选择哪个索引项的数学计算有点不准确，因为默认情况下，容器在每一端的空间不如在项之间的空间大。我得给你留点事做

您还必须为选中和取消选中的表单提供图像，但这并不困难

以下是类定义：

/*
 * ScrollGadget.hpp
 *
 *  Created on: May 22, 2014
 *      Author: richard
 */

#ifndef SCROLLGADGET_HPP_
#define SCROLLGADGET_HPP_

#include <QObject>
#include <bb/cascades/Container>
#include <bb/cascades/ImageView>
#include <bb/cascades/Layout>
#include <QUrl>

using namespace bb::cascades;

namespace net
{
    namespace test
    {

        class ScrollGadget : public Container
        {
            Q_OBJECT

            Q_PROPERTY(int selectedIndex READ selectedIndex WRITE setSelectedIndex NOTIFY selectedIndexChanged)
            Q_PROPERTY(int itemCount READ itemCount WRITE setItemCount NOTIFY itemCountChanged)

        public:
            ScrollGadget(Container *parent = 0);
            virtual ~ScrollGadget();

            int selectedIndex() const;
            int itemCount() const;

        public slots:
            void setSelectedIndex(int index);
            void syncSelectedIndex(int index);
            void setItemCount(int count);


        private slots:
            void onTouch(bb::cascades::TouchEvent*);
            void handleLayoutFrameUpdated(QRectF);

        signals:
            void selectedIndexChanged(int selectedIndex);
            void itemCountChanged(int count);

        private:
            int mSelectedIndex, mItemCount, mSaveIndex;
            qreal mWidth, mHeight;
            QUrl    mSelected, mDeselected;
            ImageView   **mImageView;
        };

    } /* namespace test */
} /* namespace net */

#endif /* SCROLLGADGET_HPP_ */

但在applicationui.cpp中加载QML文档之前，不要忘记注册ScrollGadget：

#include "ScrollGadget.hpp"
...
qmlRegisterType<ScrollGadget>("net.test", 1, 0, "ScrollGadget");

// Create scene document from main.qml asset, the parent is set
// to ensure the document gets destroyed properly at shut down.
QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
...

以下是我使用的活动和非活动图像

要使用此小工具，请将selectedIndex连接到图像显示对象，如列表。您可以将图像显示中的选择信号（如列表中的selectedIndex）连接到ScrollGadget的syncSelectedIndex，以便列表中的更改反映在gadget中

---

有人知道这个问题的答案吗？自从你提出这个问题以来，我一直在思考这个问题。这是一个非常简单的概念，但是要想实现一个干净的实现需要一些仔细的规划。我认为您需要的是两个自定义控件。一个可以通过滑动手势处理滚动图像，提供对齐中心和所有其他预期行为。第二个自定义控件将提供dots UI并接受触摸和滑动手势。然后这两个控件将通过信号和插槽进行通信。可能是提供图像的数据模型对象。我会看看我能把什么放在一起。Richard，我已经用xmldatamodel通过ListView进行了尝试，但我无法创建点及其正确的工作方式。嘿Richard，我刚刚复制并粘贴了代码，输出的是Hello World 0，没有其他内容。现在该怎么办？如果你有asset:///active.png asset:///inactive.png 你应该看到其中的三幅图像。第一个将处于活动状态，其他两个将处于非活动状态。然后你应该可以点击这些图像来选择3个图像中的哪一个是活动的，或者来回滑动你的手指。嗨，Richard，非常感谢。我试图理解代码的某些部分，我理解了。现在，假设我不知道卷轴中有多少个图像，这意味着有时可能有3个图像或5个图像。实际上，我想提供来自服务器的图像，以便活动和非活动图像的计数也发生变化。你知道吗？这就是setItemCount插槽的用途。您可以将其称为C++中的函数或QML中的函数。在QML中使用它作为属性，就像我将它设置为3一样，或者将它连接到来自数据源的信号，该信号以整数形式提供项数。

import bb.cascades 1.2
import net.test 1.0

Page {
    Container {
        Label {
            id: label
            // Localized text with the dynamic translation and locale updates support
            text: qsTr("Hello World ") + scroll.selectedIndex + Retranslate.onLocaleOrLanguageChanged
            textStyle.base: SystemDefaults.TextStyles.BigText
        }

        ScrollGadget {
            id: scroll
            itemCount: 3
        }
    }
}

#include "ScrollGadget.hpp"
...
qmlRegisterType<ScrollGadget>("net.test", 1, 0, "ScrollGadget");

// Create scene document from main.qml asset, the parent is set
// to ensure the document gets destroyed properly at shut down.
QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
...