가로 스크롤

Question

가로 스크롤링 이미지를 만들고 싶습니다. "Blackberry Travel"앱을 본 경우이 앱의 상단 이미지는 동적으로 스크롤됩니다. 같은 스크롤보기를 만들고 싶습니다. 또한 이미지 하단에는 서클을 볼 수 있습니다. 이미지가 변하면 특정 원이 어둡게됩니다. 이 스크롤은 두 가지 방법으로 스크롤 할 수 있습니다. 마우스를 클릭하면 스크롤됩니다. 그래서, 그러한 스크롤을 만드는 것을 도와주세요. 나 여기 처음이야. 고맙습니다 ...

Answer 1

다음은 원/도트 선택 패러다임의 행을 제공하는 컨테이너를 기반으로하는 사용자 지정 컨트롤입니다. 데모 용으로 표준 부인이 적용됩니다. 모든 오류 조건 등을 포착하지는 않습니다. 기본적으로 컨테이너는 각 끝 부분에 많은 공간을 넣지 않으므로 색인 항목을 선택하는 계산은 약간 꺼져 있습니다. 그것은 항목 사이 않습니다. 나는 당신에게 할 일을 남겨 둬야 만합니다.)

또한 선택 및 선택 해제 양식에 대한 이미지를 제공해야하지만 어렵지 않습니다.

/* 
* 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_ */ 

그리고 C++ 소스 :

이

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

#include <QDebug> 
#include <src/ScrollGadget.hpp> 
#include <bb/cascades/TouchBehavior> 
#include <bb/cascades/TouchType> 
#include <bb/cascades/PropagationPhase> 
#include <bb/cascades/TouchResponse> 
#include <bb/cascades/StackLayout> 
#include <bb/cascades/LayoutOrientation> 
#include <bb/cascades/LayoutUpdateHandler> 


using namespace bb::cascades; 

namespace net 
{ 
    namespace test 
    { 

     ScrollGadget::ScrollGadget(Container *parent) : Container(parent), 
       mSelectedIndex(0), 
       mItemCount(0), 
       mSaveIndex(0), 
       mWidth(0), 
       mHeight(0), 
       mSelected("asset:///active.png"), 
       mDeselected("asset:///inactive.png"), 
       mImageView(NULL) 
     { 
      qDebug() << __PRETTY_FUNCTION__; 

      setLayout(StackLayout::create().orientation(LayoutOrientation::LeftToRight)); 

      addTouchBehavior(
       TouchBehavior::create() 
        .addTouchReaction(TouchType::Down, 
             PropagationPhase::AtTarget, 
             TouchResponse::StartTracking)); 

      LayoutUpdateHandler::create(this) 
        .onLayoutFrameChanged(this, SLOT(handleLayoutFrameUpdated(QRectF))); 


      bool c = this->connect(this, SIGNAL(touch(bb::cascades::TouchEvent*)), this, SLOT(onTouch(bb::cascades::TouchEvent*))); 
      Q_ASSERT(c); 
      Q_UNUSED(c); 
     } 

     ScrollGadget::~ScrollGadget() 
     { 
      if (mImageView) { 
       delete mImageView; 
      } 
     } 

     int ScrollGadget::selectedIndex() const { 
      return mSelectedIndex; 
     } 

     int ScrollGadget::itemCount() const { 
      return mItemCount; 
     } 

     void ScrollGadget::setSelectedIndex(int index) { 
      if (index != mSelectedIndex && index >= 0 && index < mItemCount) { 
       syncSelectedIndex(index); 
       emit selectedIndexChanged(mSelectedIndex); 
       qDebug() << "selectedIndexChanged(" << mSelectedIndex << ")"; 
      } 

     } 

     void ScrollGadget::syncSelectedIndex(int index) { 
      if (index != mSelectedIndex && index >= 0 && index < mItemCount) { 
       mImageView[mSelectedIndex]->setImageSource(mDeselected); 
       mSelectedIndex = index; 
       mImageView[mSelectedIndex]->setImageSource(mSelected); 
      } 
     } 

     void ScrollGadget::setItemCount(int count) { 
      qDebug() << __PRETTY_FUNCTION__; 
      if (count != mItemCount && count > 0) { 
       if (mItemCount > 0 && mImageView != NULL) { 
        for (int i = 0; i < mItemCount; i++) { 
         if (mImageView[i] != NULL) { 
          remove(mImageView[i]); 
          mImageView[i]->deleteLater(); 
         } 
        } 
       } 

       mItemCount = count; 
       if (mSelectedIndex < 0 || mSelectedIndex >= mItemCount) { 
        mSelectedIndex = 0; 
       } 

       mImageView = new ImageView*[mItemCount]; 
       for (int i = 0; i < mItemCount; i++) { 
        mImageView[i] = new ImageView(this); 
        if (i == mSelectedIndex) { 
         mImageView[i]->setImageSource(mSelected); 
        } else { 
         mImageView[i]->setImageSource(mDeselected); 
        } 
        add(mImageView[i]); 
       } 

       emit selectedIndexChanged(mSelectedIndex); 
       qDebug() << "selectedIndexChanged(" << mSelectedIndex << ")"; 
      } 
     } 

     void ScrollGadget::onTouch(TouchEvent *event) { 
      //qDebug() << __PRETTY_FUNCTION__ << *event; 
      int index = event->localX()/(mWidth/mItemCount); 
      qDebug() << "index" << index; 
      if (index < 0) index = 0; 
      if (index >= mItemCount) index = mItemCount - 1; 

      switch (event->touchType()) { 
       case TouchType::Down: 
        mSaveIndex = mSelectedIndex; 
        setSelectedIndex(index); 
        break; 
       case TouchType::Move: 
       case TouchType::Up: 
        setSelectedIndex(index); 
        break; 
       case TouchType::Cancel: 
        setSelectedIndex(mSaveIndex); 
        break; 
      } 
     } 

     void ScrollGadget::handleLayoutFrameUpdated(QRectF rect) { 
      qDebug() << __PRETTY_FUNCTION__ << rect; 
      mWidth = rect.width(); 
      mHeight = rect.height(); 
     } 
} /* namespace test */ 
} /* namespace net */ 

이 QML 파일이 빈 블랙 베리 프로젝트에서 그것을 보여줄 것입니다 :

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 
     } 
    } 
} 

그러나 돈 여기

클래스 정의입니다 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에 연결하여 목록의 변경 사항을 가젯에 반영 할 수 있습니다. 이 질문의 답을 아는 사람은