Forums

OverviewFelgo 2 Support (Qt 5) › Colour change in swipe view

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18154

    Edward

    Hi!

     

    I have a swipe view which scrolls through 3 images on a page. At current I have a set gradient behind the image in the container but I want the colour to transition on swipe, how would I go about this?  Also at current by clicking each image after swiping too it you can change the theme colour, i want this to happen on the swipe also?

     

    below is my code:

         Rectangle {
               id: qwsWrapper
               height: dp(150)
               gradient: Gradient {
                   GradientStop {
                       position: 0
                       color: "#404040"
                   }
    
                   GradientStop {
                       position: 1
                       color: "#0099ff"
                   }
               }
             width: parent.width
             Column {
                 width: parent.width
                 anchors.verticalCenter: parent.verticalCenter
             }
    
             Quick2.SwipeView {
               id: imgSwipeView
               width: parent.width
               height: dp(150)
               anchors.bottom: parent.bottom
               anchors.horizontalCenter: parent.horizontalCenter
               Item { AppImage { source: "../assets/Image1.png"; anchors.fill: parent; fillMode: Image.PreserveAspectFit }         Rectangle {
                       opacity: 0
                       anchors.fill: parent
                       MouseArea {
                           anchors.fill: parent
                           onClicked: { Theme.colors.tintColor =  "#0099ff"}
                       }
                   }
               }
               Item {  AppImage { source: "../assets/Image2.png"; anchors.fill: parent; fillMode: Image.PreserveAspectFit }         Rectangle {
                       opacity: 0
                       anchors.fill: parent
                       MouseArea {
                           anchors.fill: parent
                           onClicked: { Theme.colors.tintColor =  "#ffd303"}
                       }
                   }
               }
               Item {  AppImage { source: "../assets/Image3.png"; anchors.fill: parent; fillMode: Image.PreserveAspectFit }         Rectangle {
                       opacity: 0
                       anchors.fill: parent
                       MouseArea {
                           anchors.fill: parent
                           onClicked: { Theme.colors.tintColor =  "#ff0000"}
                    }
                }
            }
        }
    }

     

    #18155

    Günther
    Felgo Team

    Hi!

    You can add a changed handler for the SwipeView currentIndex property.

    onCurrentIndexChanged: {
      if(currentIndex == 0) {
        // change colors
      }
      // ...
    }

    For changing gradient colors, I recommend to use a property binding for the color and then change the property. The Gradient will adapt accordingly when you change the color property then.

      property color startColor: "#404040"
      // to animate the color when it changes, you can add a behavior:
      Behavior on startColor {
        ColorAnimation {
          duration: 200
        }
      }
    
      Rectangle {
        id: qwsWrapper
        height: dp(150)
        gradient: Gradient {
          GradientStop {
            position: 0
            color: startColor
          }
    
          GradientStop {
            position: 1
            color: "#0099ff"
          }
        }
      }

     

    Best,
    Günther

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support