Designing UIs with Qt Quick, 2/6, Design-Workflow Part 2
summary
Live coding builds a vertical gallery: five static images arranged inside a Qt Quick Flickable, sized with contentHeight/contentWidth and positioned either with anchors or fixed coordinates. Qt Creator + QML loads image assets exported from Photoshop/Illustrator, adds a right-hand scrollbar with a draggable knob tied by simple math to flickable.contentY, and avoids scaling artifacts by using device-sized backgrounds. The result is a working, designer-editable UI implemented in less than 100 lines of QML with live bindings and no C++.
AI-written summary · about
chapters (10)
- 0:00Introduction and lab setup
- 2:20Starting the Qt Quick project
- 5:50Designing with pixel perfection
- 7:44Creating the flickable layout
- 12:20Post-lunch recap and scroll bar basics
- 16:09Implementing the scroll bar knob
- 19:42Connecting scroll bar to flickable
- 22:57Handling binding loops and math
- 26:11Dynamic scroll bar sizing
- 28:46Summary and designer-developer collaboration
related talks
55mUI Design for Small Screen Devices
43mBridging the gap between designers and developers
24mThe Roadmap: Next Generation Qt (part 2/2)
25mBest Practices for using QML and QtQuick
23mQt Quick : Don't make these mistakes!
01h 00mQt for MCUs – A Deep Dive
46mQt Quick Controls Re engineered
49mHow to scale QML based projects an Architecture vision