Create iOS style for Qt Quick Controls

Add a new "native" style to Qt Quick Controls for iOS. The style will be pixmap based (as opposed to the native macOS and Windows style), which means that we accept that it will deviate a bit from UIKit's own controls, but still look at home on iOS. This is basically the same approach as done with the Cupertino style in Flutter The upshot is that the style will be easier to implement and maintain, and not be subject to annual visual regressions as a result of changes to iOS. The worst-case is that the style can end up looking outdated over time if not maintained, but that is easier to accept, and also easier to fix.

Controls that need styling

• therefore skipped|-|

  ToolTip		QPA	—
  Tumbler	UIPickerView	QPA	-

  Additional pixmaps / icons

  Pixmap	Usage	Notes
  Checkmark	StackView, Checkable Button	See attachement UIKit_back_and_checkmark
  Back Icon	StackView	See attachement UIKit_back_and_checkmark
  Drill-down / Expand Icon	TreeView (TreeViewDelegate)	See attachement UIKit_tree_expand
  Horizontal separator	Views (ItemDelegate)	Just a horizontal line
  Vertical separator	ToolSeparator, DialogButtonBox separator	Vertical line
  Handle for Selection rectangle	SelectionRectangle

  Controls that can be coded exclusively in QML 

  Quick Control	UIKit Control	Notes	Progress
  Label	UILabel		Done
  Button	UIButton	Just a Label	Done
  ComboBox	UIButton (Pull Down configuration)	Just a Label + popup. Reuse Menu pixmaps	Done
  Frame		Missing in UIKit. But should have the same shape as TextInput.	Done
  GroupBox		Just a Frame + Label	Done
  RangeSlider		Slider with two handles. Reuse Slider pixmaps	Done
  ScrollBar		Same as ScrollIndicator	Done
  StackView		Uses Back Icon + animations	Done
  SplitView		Thin separator line with increased hit area	Done
  TreeViewDelegate		Uses Expand Icon	Done
  CheckDelegate		Uses checkmark/checkbox icon	Done
  RadioDelegate		Uses checkmark icon	Done
  SwitchDelegate		Uses Switch	Done
  SwipeDelegate			Done
  MenuBarItem	Missing in UIKit. Should be same as UIBarButtonItem	Just a Label (with expand icon)	Done
  TextArea	UITextView		Done
  TabBar	UITabBar	Rectangle with separator line for now. Later we can implement a translucency effect which blurs the background similar to the native one.	Done
  MenuBar	-	Same as Tabbar	Done
  ToolBar	UIToolBar	Same as Tabbar	Done
  TabButton	UITabBarItem		Done
  ToolButton	UIBarButtonItem		Done

• All pixmaps will need to be a NinePatchImage
• All pixmaps must have three sizes: 1x, 2x, and 3x . E.g switch-background.9.png, switch-background@2x.9.png, switch-background@3x.9.png
• All pixmaps must have a dark and a light mode version
• All controls must provide a set of pixmaps that corresponds to the (most important) states listed in the Imagine style element reference, like disabled and pressed.

 Addition notes

We could implement this style using the Imagine style . But since we want to add animation effects here and there (like for a Switch), we should probably just create a style from scratch that uses NinePatchImages internally. This gives us more freedom when it comes to adding animations and tweaking details. But the naming of the images created by designers can preferably follow the naming convention used in the Imagine style.

As a reference application, we should be able to write an an app that looks like the Settings app on iOS, by using an ApplicationWindow with a StackView. That is, we need to implement any drill-down animations and transitions so that they appear native. The same if using it a TabBar. The items in the list on each page in the stack view should also look native. And hopefully all such styling can be available out-of-the-box. TODO: Add an example / manual test that show cases this.

Useful links

Imagine style source code - can be used to see how the 9p images look like. A sketch design file is also here.

Figma

– Buttons|https://developer.apple.com/videos/play/wwdc2021/10064/]

Action points

1. lets do one control at a time
   1. start with Slider, create all images needed, and we code that to be up'n'running - so that we know that e.g 9p works correctly, and 2x, 3x works.
   2. for the controls that need animation, we can do that from QML (coding). Just give us the pixmaps otherwise needed, like the background, rather than creating an animation consisting of static images.
2. create gerrit repo
3. create style boilerplate code
4. for each control, perhaps copy in imagine style QML code as a starting point?