How can I create slider and show buttons inside it

Thank You

Just the slider part
This is the thing that I want to implement

I would be happy to get the answer using QWidgets only
NOT QML

Pl45m4

I dont know if the QSlider base class is the correct approach in your case. The QSlider has ticks to set a value in a certain range.
If you just want to slide something to the right or left (like accepting a call on your smartphone or managing your emails), you should create your own custom widget.

mrjj

Hi
The picture is too low-quality for me to see what it is you want to create.
Also why would there be multiple buttons in it ??

You mean like a slide out menu ?

Thank You

@mrjj

Maybe this can help

Pl45m4

@Thank-You

The "item" should "hide" your button and when you swipe to the left or right, the button appears, correct? (Kind of "snap" - behavior)
Definitely possible but might be a little tricky to make it work properly.

Thank You

@Pl45m4 Yes
You can see it in many android apps gmail , messenger and many more

J.Hilk

@Thank-You take a look at this example:

https://doc.qt.io/qt-5/qtwidgets-draganddrop-draggableicons-example.html

that should get you started in creating a left&right dragable widget.

Than its only a matter of creating a custom container/layout for those widgets , so that they are listed one above the other and automatically snap back (or not) when you release the drag

mrjj

@J-Hilk
So what is such a widget called in android terms?
if a common design elements, it must have a name ?
(still not sure how it works. sounds like slide to open menu. :)

J.Hilk

@mrjj Swipe Options ? 🤷‍♂️

edit:
Apparently it's called a dismissible

https://api.flutter.dev/flutter/widgets/Dismissible-class.html

mrjj

@J-Hilk
Thank you.
So the main Info covers some part of the area.
Then you can swipe to say the left to reveal extra options/actions "below it" ?

How come that in pic 2, there blue is only one left. the grey is gone.
Or is that when it sin initial state ?

J.Hilk

@mrjj said in How can I create slider and show buttons inside it:

How come that in pic 2, there blue is only one left. the grey is gone.

it indicates that swiping to the left gives you 3 options and swiping to the right only 1, or in this case toggles E-Mail read state

Pl45m4

@mrjj said in How can I create slider and show buttons inside it:

How come that in pic 2, there blue is only one left. the grey is gone.

There can be couple of options. Basically the top widget / item could hide stuff on the right and on the left. So if you swipe the "cover" item to the right, you'll see the controls on the left (the blue thing). If you swipe left, you'll see multiple flags, buttons or options from which you can choose (gray, blue, gray).

Same for @Thank-You second image on the right.
Three icons for three actions which will show up, when you swipe the mail or phone book entry to the left.

mrjj

Aha and you can even also swipe up and down. it seems.
Ok cool little widget.

Pl45m4

@mrjj said in How can I create slider and show buttons inside it:

swipe up and down

Up / down is just a regular scroll then.
I think the main reason for this is to provide direct access to additional actions / features without navigating through dozens of menus. So you have your actions right below each item or list entry.
Sometimes you don't even have to lift your finger to select something.

mrjj

@Pl45m4
well actually in FLUTTER it has a direction property so you can swipe it up and down if you wish. At least the video says that at 0:44 :)

I tried to find one on my phone but they only swipe one way.

So when it has say multiple buttons "under" then you hold the swipe and then press a button or how does this work ?

Pl45m4

@mrjj said in How can I create slider and show buttons inside it:

So when it has say multiple buttons "under" then you hold the swipe and then press a button or how does this work ?

Depends on the application. One possible way is that the most left/right visible option next to the swiped central "item" gets selected.
The more you swipe in one direction the more you expose the options below and the one which becomes visible last, is your selection. Then just release the swipe. Most of the time the selected button or option provides some visual feedback (like highlight, blink or frame changes).
The MS Outlook Mail App is a good example (OWA on mobile devices as well, I guess)

@J-Hilk said in How can I create slider and show buttons inside it:

Apparently it's called a dismissible

I think only in this specific case shown there (https://api.flutter.dev/flutter/widgets/Dismissible-class.html), because the items disappear. Some call it "Swipe Settings", some "Swipe Actions" and some "Swipe Options" :)
But I'm actually surprised that no one made a similar widget like this before and uploaded it to GitHub

Thank You

@Pl45m4
I found demo video on this thing
Wait I will post here

Both of these video will direct exactly to the demo
https://youtu.be/Cam2AvfJilY?t=2364
https://youtu.be/hnuMyuCWwwU?t=5

It is actually demo for android device
But it doesn't matter

ITS called
"recyclerview" in android

Exactly similar to the video but
Those buttons should be below that layer (I guess that would be good)

I hope you understands

J.Hilk

@Thank-You
I know its QML and not QWidgets, but I promised @mrjj an example he could work/play with :D and its simply much easier to implement in QML

https://github.com/DeiVadder/QmlSwipeOptions

The principles and functionalities are the same in QWidgets, so it may be a good starting point for you as well