I'm new to flutter and I'm looking for a way to implement a simple feature. A draggable container.
I have two groups of UI elements wrapped in a Container widget. I want to be able to go from one group to another by dragging or swiping in different directions.
How would I go about doing this?
Here are sample images of my UI design to help you understand what I want to achieve:
Image #1
Image #2
As you can see, Image #1 and Image #2 are only different in the bottom part of my design. I have already created all the necessary UI elements and wrapped them in the Container widget. Now the only thing I need is the ability to go from one group to another. It would also be nice if there was a callback method that could update the buttons above upon transitioning from one group to another.
Thanks in advance!
There are many possibilities to achieve this, depends on your exact wishes, here are 3 ideas:
Using a TabBarView to swipe the entire screen, Tab1 will be the first screen you showed, and Tab2 will be second screen - only the contents. (you probably did not want that, but just putting it out there).
Dividing the container into 2 pieces (vertically), and placing the TabBarView on the bottom part, having 2 tabs: 1 with the Today part and one with the Weekly part. (there are a few examples out there, for instance: divide screen into two equal parts in flutter).
You can also customize the build method to change anything (for example the top indicator) based on the current tab index (as asked and answered here: How to get current tab index in Flutter)
For a more custom solution you can use:
GestureDetector wrapped around your container, and handle OnHorizontalDragX (where X is Start, End etc.) to do any custom stuff - maybe changing the state and trigger a rebuild with the new image
Related
How do I disable or prevent the split pane to be resizable?
hSplit := container.NewHSplit(
hello,
widget.NewButton("Hi!", func() {
hello.SetText("Welcome :)")
}),
)
I am trying to have a label followed by the NewList widget.
However, I have tried a bunch of layouts for this e.g NewVBoxLayout but as per the doc, all elements in this will be set to the min height. Hence the list becomes extremely small. I am unable to do this using container.
I have tried NewMaxLayout as well, but the list now overlaps with the Select Item label
Usually when you want 1 item to fill space and others to arrange around it you’d use Border.
Note that containers inside containers with different layouts is the way we build more complex arrangements such as you illustrate above.
Not at this time - split pane is a user interface control to support resizing either side.
It sounds like you want to do something else.
What are you aiming to do exactly? If it's just laying things out then try other containers which don't offer this feature.
I have am A-frame scene where a series of entities must become visible after the user has clicked one by one another group of entities. I’ve a system that allowed me to hide every element of this first series, but I cant figured out how to show the second series, mostly because the user could click the first series in any order.
I’ve been trying to adapt this idea: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/, but It seems that the “visibililty” attribute does not work in A-Frame.
Thank you very much.
The rendered elements are not DOM elements, so CSS will have no effect here. To toggle the visibility, use setAttribute()
someElement.setAttribute('visible', false) // or true
Check it out here. Docs here.
I am developing a testing algorithm for our iOS apps using Appium. To fully implement this algorithm i need to identify wither i have moved onto different screen or am still on the same screen after performing some action. I need to know, what makes every screen unique/different from other in terms of Appium?
Going through the pageSource of every screen, i found that most screens have xpath attribute in window element. Can i use value of xpath of window element to mark the screen as unique from others, or do i need to do a trivial string comparison between screen's pageSources to mark them different? Or is there any other better solution?
Not sure if xpath would be the best solution for this. Normally the UIAWindow would remain the same, and developers might use different containers within this UIAWindow to render different screens.
So to verify different screens, you might need to figure out what this container is and see if the container's properties change when you move to a new screen (ie a new container)
If you app user a different header for every new screen, then you can use this header to see if the screen is changed. Example: in WhatsApp, you would see a different persons at the top. So in this case, the person's name can be assumed as the header.
If this doesn't work then you can verify some of the other controls, or say list of all the UIAStaticText on the screen. During screen change the entire list of UIAStaticText might change. So this can indicate a screen change.
For our automation suite at work I've implemented a series of screen check steps. Every time we switch screens I do a find_element command for an element on that screen that is unique to that screen. That way if a button or option takes me to a new screen that is incorrect my test will fail as expected. If it does find the element we're expecting it adds minimal time to the test suite.
Anish Pillai made a good suggestion of using the header text if there is any. Otherwise a particular tab, menu text, resource_id, or whatever is unique about the page would suffice. All you would need to do is a find_element call and a failure message if it fails.
I'm writing a diagram editor in Qt with Graphics View Framework.
Currently I'm just trying to create a simple Node (QGraphicsItem) on GraphScene (QGraphicsScene). I created a Canvas (QGraphicsView) and added a grid to it. I can even add Nodes and move them around on scene. My final goal is to have different working modes, editing and styling options, etc. For now I just want to know how can I setup selection for Nodes already present on scene. I tried doing it with mouse events but noticed that event calls for selection and Node insertion overlap... When I try to select something a new Node is created... This is my first Qt application so I don't fully understand how the functionality I want to achieve should be designed.
How the Selection Rectangle should be properly drawn?
How should I manage mouse events that conflict with each other?
You can use a checkable button/action(that's a QPushButton/QAction with a checkable property set to 'true) to switch between Edit & Insert mode. Then you check the state in your mouse event and insert a new item only if you're in Insertion mode.
You can also distinct between mouse buttons - insert item when dragged with the right button for example
Or use QKeyboardModifiers - for example: on drag + Ctrl - insert item.
Hope this helps.
In case of the overlapping mouse events, you should have a single place (like QGraphicsView to handle the mouse clicking/moving events) and create a state machine and then handle the events according to the state you are in. You need to plan your architecture well and that can be really complex task.
set your state enum/constants
refer to the current machine state in your events in your if conditions
keep your "business logic" on a single place
Like it's shown in these two NodeEditor tutorials #11 and #12: https://www.youtube.com/watch?v=pk4v2xuXlm4 and https://www.youtube.com/watch?v=-VYcQojkloE)
If you still want more in depth explanation of the functionality and events of Qt, here is a full list of tutorials with implementing all possible features like dragging edges to nodes, selecting them and deleting them, cutting edges, serialization, etc., you can have a look on the whole list of 50 tutorials I've recorded here: https://www.blenderfreak.com/tutorials/node-editor-tutorial-series/.
I'm putting a link to the whole list, since it's not possible to write all the code on this page...
I am a beginner so please take it easy. First some history, I am trying to modify a flash movie (not created by me) that has 4 images in it.
I have to now add 2 more images (pic5.png and pic6.jpg) to the "slideshow" as shown in the attachment, I have added the 2 images to the library. The problem I am having (as I understand, I may be incorrect) is that _root.count = 4 causes the movie to jump back to the first image after it displays the 4th one which does not display the 5th & 6th image.
My question, how do I edit the value of _root.count to 6, so that it will show all the 6 images. Additionally how do I create a hyperlink on each image.
Please can someone guide me.
Many thanks.
Looking at your screen shot, Layer 2 (which contains the slideshow movieclip) is locked. If you unlock the layer by clicking on the padlock icon you should then be able to edit the script.
To edit the script double-click on the script in the Movie Explorer panel and the Actions panel should open. You can edit the script here.
The second part of your question - how to create a hyperlink - is very broad and there are many different ways to approach it. The most elegant approach would depend on how your project was structured.
The simplest way might be to define a variable to hold the path to the current image and add another onClipEvent handler.
So in the existing onLoad you would add…
this.path_to_image = http://your-domain.com/images/your-first-big-image.jpg;
Then add the new event handler
onClipEvent(mouseUp){
getURL (this.path_to_image);
}
You would then have to update the path_to_image variable whenever the image changed.
slideshow.path_to_image = http://your-domain.com/images/your-next-big-image.jpg;