update

example/MainPage.qml

@@ -8,8 +8,8 @@ import FluentUI 1.0
 
 FluWindow {
     id:rootwindow
-    width: 800
+    width: 860
-    height: 600
+    height: 680
     title: "FluentUI"
     minimumWidth: 500
     minimumHeight: 400
@@ -59,6 +59,13 @@ FluWindow {
             }
         }
 
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                nav_view.push("qrc:/T_TimePicker.qml")
+            }
+        }
+
         FluPaneItemHeader{
             title:"Surface"
         }

example/T_TimePicker.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"TimePicker"
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.H"
+            }
+
+            FluTimePicker{
+            }
+
+        }
+    }
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.HH"
+            }
+
+            FluTimePicker{
+                hourFormat:FluTimePicker.HH
+            }
+
+        }
+    }
+
+
+}

example/qml.qrc

@@ -30,5 +30,6 @@
         <file>T_TreeView.qml</file>
         <file>T_Expander.qml</file>
         <file>MainPage.qml</file>
+        <file>T_TimePicker.qml</file>
     </qresource>
 </RCC>