Add an Android TimePickerDialog how-to

This is a highly requested control, yet its implementation varies
greatly between devices and platforms. Rather than try to implement
an API and UI that fits every use case (and implement whatever
infrastructure may be required for offering separate mobile and
desktop controls), offer a specialized example: an Android time picker.

The goal is to provide a set of QML files that users can simply copy
into their projects.

The screenshots were taken of the whole window on a MacBook whose
display DPR is 2, and then adapted with the following commands:

    convert uncropped-light.png -crop 870x1030+280+220 how-to-time-picker-light.png
    convert uncropped-dark.png -crop 870x1030+280+220 how-to-time-picker-dark.png
    mogrify -resize 50% how-to-time-picker-*.png
    find . -name "how-to-time-picker-*.png" -exec optipng -o 7 -strip all {} \;

Task-number: QTBUG-51167
Task-number: QTBUG-109634
Pick-to: 6.5
Change-Id: Ie11913ba4a83673d7c2467066d9cfef772055c1d
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

1 files changed, 29 insertions, 0 deletions

diff --git a/tests/auto/quick/doc/how-tos/how-to-qml/time-picker/TimeComponentLabel.qml b/tests/auto/quick/doc/how-tos/how-to-qml/time-picker/TimeComponentLabel.qml
new file mode 100644
index 0000000000..ba2c019706
--- /dev/null
+++ b/tests/auto/quick/doc/how-tos/how-to-qml/time-picker/TimeComponentLabel.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls.Material
+
+Label {
+    id: root
+    fontSizeMode: Label.Fit
+    horizontalAlignment: Label.AlignHCenter
+    verticalAlignment: Label.AlignVCenter
+
+    Material.foreground: Material.theme === Material.Light
+        ? Material.color(Material.Indigo, !dim ? Material.Shade500 : Material.Shade100)
+        : Material.color(Material.Indigo, dim ? Material.Shade300 : Material.Shade100)
+
+    Layout.fillHeight: true
+
+    property bool dim: false
+    property alias interactive: tapHandler.enabled
+
+    signal tapped
+
+    TapHandler {
+        id: tapHandler
+        onTapped: root.tapped()
+    }
+}