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

 

[GüntherFelgo 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