Qt Quick - Rapid User Interface Prototyping
summary
Shows how to prototype a phone UI in QML/Qt Quick by building a Flickr search app: slicing assets in Inkscape/Photoshop, using BorderImage and TextInput for a reusable line edit, a ListView with delegates, and an XMLListModel pointing at Flickr RSS to populate title and thumbnail; replaces “_s” with “_em” for higher-res images, adds a spinner and 600ms eased transitions, copies the QML file to a Nokia N8 and it runs at 60 fps with no compile and becomes a working prototype in about an hour.
AI-written summary · about
chapters (39)
- 0:00Introduction
- 1:05Sales Pitch
- 6:33Concept
- 9:03Qt Creator
- 11:33Line Edits
- 12:44Text Input
- 13:19Line Editing
- 15:03encapsulated widgets
- 15:54creating the toolbar
- 18:52creating the list view
- 19:48creating the delegate
- 21:15preserving the border
- 21:52creating a list element
- 22:47naming the list model
- 23:18creating an image element
- 25:21setting up states
- 27:06creating an image view
- 28:30mouse area
- 30:22easing curve
- 31:10Back button
- 32:06Back button position
- 32:44Back button opacity
- 33:48Back button line
- 34:50View image
- 36:08Phone demo
- 38:43XML List Model
- 41:47XQuery
- 42:15Query
- 43:16XML Role
- 43:56namespace
- 44:39Live edits
- 45:23Image source
- 46:56Aspect ratio
- 47:39Spinner animation
- 48:19Spinner image
- 49:20Running the application
- 50:15Connecting to the Internet
- 51:55Exporting from Qt
- 56:55Creating a Qt Quick application
related talks
56mUsing Qt Quick for Rapid UI Prototyping and Development
58mQt Quick Components for Designers
59mBetter UI/HMI development workflows with Qt/QML
22mCatalyzing success of Qt apps with UX and design
55mEffective QML
46mQt Quick Designer
27mQML Rapid Prototyping
30mHow FELGO enhances application development with Qt