Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded