Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    Solved qt.labs.controls - customizing Tumbler - Material

    QML and Qt Quick
    qt.labs.control material design android
    2
    5
    2100
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ekkescorner
      ekkescorner Qt Champions 2016 last edited by

      I tried to customize the Tumbler.
      a) selected number with accent color and slightly larger font and something less spacing between values
      b) slightly larger font and at top and bottom of selected number a small line in accent color saimilar to TabButton

      a) got it working for color and font size, but didn't found out HowTo change the spacing

      Tumbler {
      	id: tumbler
      	model: 10
      	visibleItemCount: 5
      	delegate: Text {
      		property int displacement: Math.abs(Tumbler.displacement)
      			id: label
      			text: modelData
      			color: displacement == 1 ? Material.accentColor : "darkGray"
      			font: tumbler.font
      			scale: displacement == 1 ? 1.25 : 1.0
      			horizontalAlignment: Text.AlignHCenter
      			verticalAlignment: Text.AlignVCenter
      	}
      }
      

      any ideas HowTo change the space between the values ?

      b) have no idea HowTo draw the accent colored lines

      thx helping

      ekke
      Qt Champion
      mobile business apps
      Qt Quick Controls 2 (Material style) for Android / iOS

      ekkescorner 1 Reply Last reply Reply Quote 0
      • ekkescorner
        ekkescorner Qt Champions 2016 @ekkescorner last edited by

        @ekkescorner any ideas or hints ? - thx

        ekke
        Qt Champion
        mobile business apps
        Qt Quick Controls 2 (Material style) for Android / iOS

        1 Reply Last reply Reply Quote 0
        • jpnurmi
          jpnurmi last edited by

          It sounds like you would have to replace the builtin contentItem, which is a PathView. You could copy the one from http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/material/Tumbler.qml and use it as a starting point and tweak the path to your needs.

          ekkescorner 2 Replies Last reply Reply Quote 0
          • ekkescorner
            ekkescorner Qt Champions 2016 @jpnurmi last edited by

            @jpnurmi thx for the hint.
            then at first I have to learn what a PathView is ;-)

            ekke
            Qt Champion
            mobile business apps
            Qt Quick Controls 2 (Material style) for Android / iOS

            1 Reply Last reply Reply Quote 0
            • ekkescorner
              ekkescorner Qt Champions 2016 @jpnurmi last edited by

              @jpnurmi thx again
              only had to change the implicitHeight:

              Tumbler {
                  id: tumbler
                  model: 10
                  visibleItemCount: 5
                  implicitHeight: visibleItemCount * 24
                  delegate: Text {
                      property int displacement: Math.abs(Tumbler.displacement)
                      id: label
                      text: modelData
                      color: displacement == 0 ? Material.primaryTextColor : Material.secondaryTextColor
                      font: tumbler.font
                      scale: displacement == 0 ? 1.20 : 1.0
                      horizontalAlignment: Text.AlignHCenter
                      verticalAlignment: Text.AlignVCenter
                  }
              }
              

              while flicking the tumbler there's a noticable delay before only the selected number will be scaled,
              but I can live with this.

              ekke
              Qt Champion
              mobile business apps
              Qt Quick Controls 2 (Material style) for Android / iOS

              1 Reply Last reply Reply Quote 0
              • First post
                Last post