update

.github/workflows/macos.yml

@@ -17,7 +17,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-11.0]
-        qt_ver: [5.15.2]
+        qt_ver: [6.4.3]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -30,10 +30,12 @@ jobs:
           sudo xcode-select --print-path
           sudo xcode-select --switch /Library/Developer/CommandLineTools       
       - name: Install Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           cached: 'false'
+          arch: ${{ matrix.qt_arch }}
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       - uses: actions/checkout@v2
         with:
           fetch-depth: 1

.github/workflows/ubuntu.yml

@@ -19,16 +19,18 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        qt_ver: [5.15.2]
+        qt_ver: [6.4.3]
         qt_arch: [gcc_64]
     env:
       targetName: example
     steps:
       - name: Install Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           cached: 'false'
+          arch: ${{ matrix.qt_arch }}
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       - name: ubuntu install GL library
         run: sudo apt-get install -y libglew-dev libglfw3-dev qml-module-qtquick-controls qml-module-qtquick-controls2
       - uses: actions/checkout@v2

.github/workflows/windows.yml

@@ -21,12 +21,7 @@ jobs:
       # 矩阵配置
       matrix:
         include:
-          # 5.15.2 参考 https://mirrors.cloud.tencent.com/qt/online/qtsdkrepository/windows_x86/desktop/qt5_5152/
+          - qt_ver: 6.4.3          
-          - qt_ver: 5.15.2
-            qt_arch: win32_msvc2019
-            msvc_arch: x86
-            qt_arch_install: msvc2019
-          - qt_ver: 5.15.2          
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
             qt_arch_install: msvc2019_64          
@@ -38,15 +33,12 @@ jobs:
       # 安装Qt
       - name: Install Qt
         # 使用外部action。这个action专门用来安装Qt
-        uses: jurplel/install-qt-action@v2
+        uses: jurplel/install-qt-action@v3
         with:
-          # Version of Qt to install
           version: ${{ matrix.qt_ver }}
-          # Target platform for build
-          # target: ${{ matrix.qt_target }}
           arch: ${{ matrix.qt_arch }}
           cached: 'false'
-          aqtversion: '==2.0.5'          
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
       # 拉取代码
       - uses: actions/checkout@v2
         with:

README.md

@@ -65,9 +65,9 @@
 
 # 部分效果预览
 
-## 一个聊天Demo，调用了ChatGPT的接口
+## 首页
 
-![](doc/preview/chatgpt.png)
+![](doc/preview/home.png)
 
 ## 各种Button按钮
 

example/App.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 Window {
     id:app
@@ -17,6 +16,7 @@ Window {
             "/about":"qrc:/page/AboutPage.qml",
             "/login":"qrc:/page/LoginPage.qml",
             "/chat":"qrc:/page/ChatPage.qml",
+            "/media":"qrc:/page/MediaPage.qml",
         }
         FluApp.initialRoute = "/"
         FluApp.run()

example/T_Awesome.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluContentPage {
 

example/T_Badge.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_Buttons.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
     title:"Buttons"
@@ -27,7 +27,6 @@ FluScrollablePage{
             disabled:text_button_switch.selected
             text:"Text Button"
             onClicked: {
-                console.debug(Screen.devicePixelRatio)
                 showInfo("点击Text Button")
             }
             anchors{

example/T_CalendarPicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_Carousel.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_CheckBox.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 
@@ -13,7 +13,11 @@ FluScrollablePage{
 
     FluCheckBox{
         Layout.topMargin: 20
-        Layout.leftMargin: 10
-        Layout.bottomMargin: 20
     }
+
+    FluCheckBox{
+        Layout.topMargin: 20
+        text:"Text"
+    }
+
 }

example/T_ColorPicker.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_DatePicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_Dialog.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_Expander.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -46,13 +45,15 @@ FluScrollablePage{
         headerText:"打开一个滑动文本框"
         Item{
             anchors.fill: parent
-            ScrollView{
+            Flickable{
                 id:scrollview
                 width: parent.width
                 height: parent.height
-                contentWidth: parent.width
+                contentWidth: width
+                contentHeight: text_info.height
+                ScrollBar.vertical: FluScrollBar {}
                 FluText{
-                    id:test
+                    id:text_info
                     width: scrollview.width
                     wrapMode: Text.WrapAnywhere
                     padding: 14

example/T_Home.qml

@@ -1,8 +1,9 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import "qrc:///global/"
+import FluentUI
 
 FluScrollablePage{
 
@@ -56,7 +57,6 @@ FluScrollablePage{
                 bottom: parent.bottom
             }
             orientation: ListView.Horizontal
-            boundsBehavior: ListView.StopAtBounds
             height: 240
             model: model_header
             header: Item{height: 10;width: 10}
@@ -101,7 +101,7 @@ FluScrollablePage{
                         }
                         FluText{
                             text: model.title
-                            fontStyle: FluText.BodyLarge
+                            fontStyle: FluText.Body
                             Layout.topMargin: 20
                             Layout.leftMargin: 20
                         }
@@ -110,7 +110,7 @@ FluScrollablePage{
                             Layout.topMargin: 5
                             Layout.preferredWidth: 160
                             Layout.leftMargin: 20
-                            color: FluColors.Grey100
+                            color: FluColors.Grey120
                             font.pixelSize: 12
                             wrapMode: Text.WrapAnywhere
                         }
@@ -142,44 +142,6 @@ FluScrollablePage{
         }
     }
 
-    ListModel{
-        id:model_added
-        ListElement{
-            title:"TabView"
-            icon:"qrc:/res/image/control/TabView.png"
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-        }
-        ListElement{
-            title:"MediaPlayer"
-            icon:"qrc:/res/image/control/MediaPlayerElement.png"
-            desc:"A control to display video and image content"
-        }
-    }
-
-    ListModel{
-        id:model_update
-        ListElement{
-            title:"Buttons"
-            icon:"qrc:/res/image/control/Button.png"
-             desc:"A control that responds to user input and raisesa Click event."
-        }
-        ListElement{
-            title:"InfoBar"
-            icon:"qrc:/res/image/control/InfoBar.png"
-             desc:"An inline message to display app-wide statuschange information."
-        }
-        ListElement{
-            title:"Slider"
-            icon:"qrc:/res/image/control/Slider.png"
-             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-        }
-        ListElement{
-            title:"CheckBox"
-            icon:"qrc:/res/image/control/Checkbox.png"
-             desc:"A control that a user can select or clear."
-        }
-    }
-
     Component{
         id:com_item
         Item{
@@ -211,7 +173,7 @@ FluScrollablePage{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: model.icon
+                    source: modelData.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
@@ -221,8 +183,8 @@ FluScrollablePage{
 
                 FluText{
                     id:item_title
-                    text:model.title
+                    text:modelData.title
-                    fontStyle: FluText.Subtitle
+                    fontStyle: FluText.BodyStrong
                     anchors{
                         left: item_icon.right
                         leftMargin: 20
@@ -232,10 +194,11 @@ FluScrollablePage{
 
                 FluText{
                     id:item_desc
-                    text:model.desc
+                    text:modelData.desc
-                    color:FluColors.Grey100
+                    color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
+                    fontStyle: FluText.Caption
                     maximumLineCount: 2
                     anchors{
                         left: item_title.left
@@ -246,12 +209,25 @@ FluScrollablePage{
                     }
                 }
 
+                Rectangle{
+                    height: 12
+                    width: 12
+                    radius:  6
+                    color: FluTheme.primaryColor.dark
+                    anchors{
+                        right: parent.right
+                        top: parent.top
+                        rightMargin: 14
+                        topMargin: 14
+                    }
+                }
+
                 MouseArea{
                     id:item_mouse
                     anchors.fill: parent
                     hoverEnabled: true
                     onClicked: {
-                        rootwindow.startPageByTitle(model.title)
+                        ItemsOriginal.startPageByItem(modelData)
                     }
                 }
             }
@@ -260,7 +236,7 @@ FluScrollablePage{
 
     FluText{
         text: "Recently added samples"
-        fontStyle: FluText.TitleLarge
+        fontStyle: FluText.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
@@ -270,14 +246,14 @@ FluScrollablePage{
         implicitHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
-        boundsBehavior: GridView.StopAtBounds
+        model:ItemsOriginal.getRecentlyAddedData()
-        model:model_added
+        interactive: false
         delegate: com_item
     }
 
     FluText{
         text: "Recently updated samples"
-        fontStyle: FluText.TitleLarge
+        fontStyle: FluText.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
@@ -287,8 +263,8 @@ FluScrollablePage{
         implicitHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
-        boundsBehavior: GridView.StopAtBounds
+        interactive: false
-        model: model_update
+        model: ItemsOriginal.getRecentlyUpdatedData()
         delegate: com_item
     }
 

example/T_InfoBar.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_MediaPlayer.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -30,17 +29,13 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left:parent.left
             }
-
             FluMediaPlayer{
                 id:player
 //                source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
                 source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
 //                source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
             }
-
+        }
     }
 }
 
-
-}
-

example/T_Menu.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_MultiWindow.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_Progress.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_Rectangle.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -53,7 +52,7 @@ FluScrollablePage{
     }
     FluText{
         text:"配合图片使用"
-        fontStyle: FluText.Subtitle
+        fontStyle: FluText.SubTitle
         Layout.topMargin: 20
     }
     RowLayout{

example/T_Slider.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 
@@ -17,7 +17,7 @@ FluScrollablePage{
         Layout.leftMargin: 10
     }
     FluSlider{
-        orientation:FluSlider.Vertical
+        vertical:true
         Layout.topMargin: 20
         Layout.leftMargin: 10
         Layout.bottomMargin: 20

example/T_TabView.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 
@@ -11,6 +11,8 @@ FluScrollablePage{
     rightPadding:10
     bottomPadding:20
 
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
     Component{
         id:com_page
         Rectangle{
@@ -19,26 +21,93 @@ FluScrollablePage{
         }
     }
 
-    Component.onCompleted: {
+    function newTab(){
-        var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
-        for(var i =0;i<colors.length;i++){
-            tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
     }
+
+    Component.onCompleted: {
+        newTab()
+        newTab()
+        newTab()
     }
 
     FluArea{
         width: parent.width
         Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        RowLayout{
+            spacing: 14
+            FluDropDownButton{
+                id:btn_tab_width_behavior
+                Layout.preferredWidth: 140
+                text:"Equal"
+                items:[
+                    FluMenuItem{
+                        text:"Equal"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Equal
+                        }
+                    },
+                    FluMenuItem{
+                        text:"SizeToContent"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Compact"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Compact
+                        }
+                    }
+                ]
+            }
+            FluDropDownButton{
+                id:btn_close_button_visibility
+                text:"Always"
+                 Layout.preferredWidth: 120
+                items:[
+                    FluMenuItem{
+                        text:"Nerver"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Nerver
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Always"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Always
+                        }
+                    },
+                    FluMenuItem{
+                        text:"OnHover"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.OnHover
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 5
         height: 400
         paddings: 10
-
-
         FluTabView{
             id:tab_view
+            onNewPressed:{
+                newTab()
+            }
+        }
     }
 
-
-    }
-
-
 }

example/T_TextBox.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -26,7 +25,7 @@ FluScrollablePage{
     }
     FluAutoSuggestBox{
         Layout.topMargin: 20
-        values:generateRandomNames(100)
+        items:generateRandomNames(100)
         placeholderText: "AutoSuggestBox"
         Layout.preferredWidth: 300
         disabled:toggle_switch.selected
@@ -52,7 +51,7 @@ FluScrollablePage{
         }
         for (let i = 0; i < numNames; i++) {
             const name = generateRandomName();
-            names.push(name);
+            names.push({title:name});
         }
         return names;
     }

example/T_Theme.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_TimePicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 FluScrollablePage{
 

example/T_ToggleSwitch.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 
@@ -17,6 +16,6 @@ FluScrollablePage{
     }
     FluToggleSwitch{
         Layout.topMargin: 20
-        text:"Disabled"
+        text:"Text"
     }
 }

example/T_Tooltip.qml

@@ -1,9 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtGraphicalEffects 1.15
+import FluentUI
-import FluentUI 1.0
 
 FluScrollablePage{
 

example/T_TreeView.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluContentPage {
 

example/T_Typography.qml

@@ -1,18 +1,18 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 FluContentPage {
 
     title: "Typography"
-    property int textSize: 13
+    property int textSize: FluTheme.textSize
     leftPadding:10
     rightPadding:10
     bottomPadding:20
 
     Component.onCompleted: {
-        slider.seek(31)
+        slider.seek(0)
     }
 
     ScrollView{
@@ -44,13 +44,7 @@ FluContentPage {
                 text:"Subtitle"
                 padding: 0
                 pixelSize: textSize
-                fontStyle: FluText.Subtitle
+                fontStyle: FluText.SubTitle
-            }
-            FluText{
-                text:"Body Large"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.BodyLarge
             }
             FluText{
                 text:"Body Strong"
@@ -76,7 +70,7 @@ FluContentPage {
 
     FluSlider{
         id:slider
-        orientation:FluSlider.Vertical
+        vertical:true
         anchors{
             right: parent.right
             rightMargin: 45
@@ -84,7 +78,7 @@ FluContentPage {
             topMargin: 30
         }
         onValueChanged:{
-            textSize = value/100*16+8
+            textSize = value/100*6+FluTheme.textSize
         }
     }
 

example/example.pro

@@ -1,5 +1,5 @@
-QT += quick concurrent network multimedia
+QT += quick quickcontrols2 concurrent network multimedia
-CONFIG += c++11
+CONFIG += c++17
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
 
 HEADERS += \

example/global/ItemsFooter.qml

@@ -0,0 +1,21 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+FluObject{
+    id:footer_items
+    FluPaneItemSeparator{}
+    FluPaneItem{
+        title:"意见反馈"
+        onTap:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
+        }
+    }
+    FluPaneItem{
+        title:"关于"
+        onTap:{
+            FluApp.navigate("/about")
+        }
+    }
+}

example/global/ItemsOriginal.qml

@@ -0,0 +1,299 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+
+FluObject{
+
+    property var navigationView
+
+    FluPaneItem{
+        title:"Home"
+        icon:FluentIcons.Home
+        onTap:{
+            navigationView.push("qrc:/T_Home.qml")
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Basic input"
+        icon:FluentIcons.CheckboxComposite
+
+        FluPaneItem{
+            title:"Buttons"
+            image:"qrc:/res/image/control/Button.png"
+            recentlyUpdated:true
+            desc:"A control that responds to user input and raisesa Click event."
+            onTap:{
+                navigationView.push("qrc:/T_Buttons.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Slider"
+            image:"qrc:/res/image/control/Slider.png"
+            recentlyUpdated:true
+            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            onTap:{
+                navigationView.push("qrc:/T_Slider.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"CheckBox"
+            image:"qrc:/res/image/control/Checkbox.png"
+            recentlyUpdated:true
+            desc:"A control that a user can select or clear."
+            onTap:{
+                navigationView.push("qrc:/T_CheckBox.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"ToggleSwitch"
+            onTap:{
+                navigationView.push("qrc:/T_ToggleSwitch.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Form"
+        icon:FluentIcons.GridView
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                navigationView.push("qrc:/T_TextBox.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                navigationView.push("qrc:/T_TimePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"DatePicker"
+            onTap:{
+                navigationView.push("qrc:/T_DatePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"CalendarPicker"
+            onTap:{
+                navigationView.push("qrc:/T_CalendarPicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"ColorPicker"
+            onTap:{
+                navigationView.push("qrc:/T_ColorPicker.qml")
+            }
+        }
+    }
+
+
+    FluPaneItemExpander{
+        title:"Surface"
+        icon:FluentIcons.SurfaceHub
+
+        FluPaneItem{
+            title:"InfoBar"
+            image:"qrc:/res/image/control/InfoBar.png"
+            recentlyUpdated:true
+            desc:"An inline message to display app-wide statuschange information."
+            onTap:{
+                navigationView.push("qrc:/T_InfoBar.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                navigationView.push("qrc:/T_Progress.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                navigationView.push("qrc:/T_Badge.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                navigationView.push("qrc:/T_Rectangle.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Carousel"
+            onTap:{
+                navigationView.push("qrc:/T_Carousel.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                navigationView.push("qrc:/T_Expander.qml")
+            }
+        }
+
+    }
+
+    FluPaneItemExpander{
+        title:"Popus"
+        icon:FluentIcons.ButtonMenu
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                navigationView.push("qrc:/T_Dialog.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Tooltip"
+            onTap:{
+                navigationView.push("qrc:/T_Tooltip.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                navigationView.push("qrc:/T_Menu.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Navigation"
+        icon:FluentIcons.AllApps
+        FluPaneItem{
+            title:"TabView"
+            image:"qrc:/res/image/control/TabView.png"
+            recentlyAdded:true
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            onTap:{
+                navigationView.push("qrc:/T_TabView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                navigationView.push("qrc:/T_TreeView.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"MultiWindow"
+            onTap:{
+                navigationView.push("qrc:/T_MultiWindow.qml")
+            }
+        }
+    }
+
+
+    FluPaneItemExpander{
+        title:"Theming"
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                navigationView.push("qrc:/T_Theme.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                navigationView.push("qrc:/T_Awesome.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                navigationView.push("qrc:/T_Typography.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Media"
+        icon:FluentIcons.Media
+        FluPaneItem{
+            title:"MediaPlayer"
+            image:"qrc:/res/image/control/MediaPlayerElement.png"
+            recentlyAdded:true
+            desc:"A control to display video and image content."
+            onTap:{
+                navigationView.push("qrc:/T_MediaPlayer.qml")
+            }
+        }
+    }
+
+    function getRecentlyAddedData(){
+        var arr = []
+        for(var i=0;i<children.length;i++){
+            var item = children[i]
+            if(item instanceof FluPaneItem && item.recentlyAdded){
+                arr.push(item)
+            }
+            if(item instanceof FluPaneItemExpander){
+                for(var j=0;j<item.children.length;j++){
+                    var itemChild = item.children[j]
+                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
+                        arr.push(itemChild)
+                    }
+                }
+            }
+        }
+        return arr
+    }
+
+    function getRecentlyUpdatedData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem){
+                arr.push({title:item.title,key:item.key})
+            }
+        }
+        return arr
+    }
+
+    function startPageByItem(data){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item =  items[i]
+            if(item.key === data.key){
+                if(navigationView.getCurrentIndex() === i){
+                    return
+                }
+                item.tap()
+                navigationView.setCurrentIndex(i)
+                if(item.parent){
+                item.parent.isExpand = true
+                }
+                return
+            }
+        }
+    }
+
+}

example/global/qmldir

@@ -0,0 +1,2 @@
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsFooter 1.0 ItemsFooter.qml

example/main.cpp

@@ -3,6 +3,7 @@
 #include <QQmlContext>
 #include <QDir>
 #include <QQuickWindow>
+#include <QQuickStyle>
 #include <QProcess>
 #include "ChatController.h"
 
@@ -17,8 +18,7 @@ int main(int argc, char *argv[])
     QCoreApplication::setOrganizationName("ZhuZiChu");
     QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QCoreApplication::setApplicationName("FluentUI");
-    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QQuickStyle::setStyle("Basic");
-//    QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
     QGuiApplication app(argc, argv);
     QQmlApplicationEngine engine;
 

example/page/AboutPage.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 FluWindow {
 
@@ -17,6 +17,7 @@ FluWindow {
     FluAppBar{
         id:appbar
         title:"关于"
+        width:parent.width
     }
 
     ColumnLayout{
@@ -35,7 +36,7 @@ FluWindow {
                 fontStyle: FluText.Title
             }
             FluText{
-                text:"v1.1.5"
+                text:"v1.1.7"
                 fontStyle: FluText.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/page/ChatPage.qml

@@ -1,9 +1,9 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import Controller 1.0
+import Controller
-import QtQuick.Dialogs 1.3
+import QtQuick.Dialogs
 
 FluWindow {
 
@@ -43,6 +43,7 @@ FluWindow {
     FluAppBar{
         id:appbar
         title:"ChatGPT"
+        width:parent.width
     }
 
     Component{

example/page/LoginPage.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 FluWindow {
 
@@ -17,13 +17,14 @@ FluWindow {
 
     onInitArgument:
         (argument)=>{
-            textbox_uesrname.text = argument.username
+            textbox_uesrname.updateText(argument.username)
             textbox_password.focus =  true
         }
 
     FluAppBar{
         id:appbar
         title:"登录"
+        width:parent.width
     }
 
     ColumnLayout{
@@ -33,10 +34,9 @@ FluWindow {
             verticalCenter: parent.verticalCenter
         }
 
-
         FluAutoSuggestBox{
             id:textbox_uesrname
-            values:["Admin","User"]
+            items:[{title:"Admin"},{title:"User"}]
             placeholderText: "请输入账号"
             Layout.preferredWidth: 260
             Layout.alignment: Qt.AlignHCenter

example/page/MainPage.qml

@@ -1,10 +1,9 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtGraphicalEffects 1.15
+import "qrc:///global/"
-
+import FluentUI
-import FluentUI 1.0
 
 FluWindow {
     id:rootwindow
@@ -12,263 +11,40 @@ FluWindow {
     height: 640
     title: "FluentUI"
     minimumWidth: 520
-    minimumHeight: 400
+    minimumHeight: 460
 
     FluAppBar{
         id:appbar
         z:10
         showDark: true
+        width:parent.width
     }
 
-    FluObject{
-        id:original_items
-
-        FluPaneItem{
-            title:"Home"
-            icon:FluentIcons.Home
-            onTap:{
-                nav_view.push("qrc:/T_Home.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Inputs"
-        }
-
-        FluPaneItem{
-            title:"Buttons"
-            onTap:{
-                nav_view.push("qrc:/T_Buttons.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Slider"
-            onTap:{
-                nav_view.push("qrc:/T_Slider.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"CheckBox"
-            onTap:{
-                nav_view.push("qrc:/T_CheckBox.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"ToggleSwitch"
-            onTap:{
-                nav_view.push("qrc:/T_ToggleSwitch.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Form"
-        }
-
-        FluPaneItem{
-            title:"TextBox"
-            onTap:{
-                nav_view.push("qrc:/T_TextBox.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"TimePicker"
-            onTap:{
-                nav_view.push("qrc:/T_TimePicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"DatePicker"
-            onTap:{
-                nav_view.push("qrc:/T_DatePicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"CalendarPicker"
-            onTap:{
-                nav_view.push("qrc:/T_CalendarPicker.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"ColorPicker"
-            onTap:{
-                nav_view.push("qrc:/T_ColorPicker.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Surface"
-        }
-
-        FluPaneItem{
-            title:"InfoBar"
-            onTap:{
-                nav_view.push("qrc:/T_InfoBar.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Progress"
-            onTap:{
-                nav_view.push("qrc:/T_Progress.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Badge"
-            onTap:{
-                nav_view.push("qrc:/T_Badge.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Rectangle"
-            onTap:{
-                nav_view.push("qrc:/T_Rectangle.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Carousel"
-            onTap:{
-                nav_view.push("qrc:/T_Carousel.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Expander"
-            onTap:{
-                nav_view.push("qrc:/T_Expander.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Popus"
-        }
-
-        FluPaneItem{
-            title:"Dialog"
-            onTap:{
-                nav_view.push("qrc:/T_Dialog.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Tooltip"
-            onTap:{
-                nav_view.push("qrc:/T_Tooltip.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Menu"
-            onTap:{
-                nav_view.push("qrc:/T_Menu.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Navigation"
-        }
-
-        FluPaneItem{
-            title:"TabView"
-            onTap:{
-                nav_view.push("qrc:/T_TabView.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"TreeView"
-            onTap:{
-                nav_view.push("qrc:/T_TreeView.qml")
-            }
-        }
-
-
-        FluPaneItem{
-            title:"MultiWindow"
-            onTap:{
-                nav_view.push("qrc:/T_MultiWindow.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Theming"
-        }
-
-        FluPaneItem{
-            title:"Theme"
-            onTap:{
-                nav_view.push("qrc:/T_Theme.qml")
-            }
-        }
-
-        FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                nav_view.push("qrc:/T_Awesome.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Typography"
-            onTap:{
-                nav_view.push("qrc:/T_Typography.qml")
-            }
-        }
-
-        FluPaneItemHeader{
-            title:"Media"
-        }
-
-        FluPaneItem{
-            title:"MediaPlayer"
-            onTap:{
-                nav_view.push("qrc:/T_MediaPlayer.qml")
-            }
-        }
-
-    }
-
-    FluObject{
-        id:footer_items
-        FluPaneItemSeparator{}
-        FluPaneItem{
-            title:"意见反馈"
-            onTap:{
-                Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
-            }
-        }
-        FluPaneItem{
-            title:"关于"
-            onTap:{
-                FluApp.navigate("/about")
-            }
-        }
-    }
 
     FluNavigationView{
         id:nav_view
         anchors.fill: parent
-        items: original_items
+        items: ItemsOriginal
-        footerItems:footer_items
+        footerItems:ItemsFooter
         logo: "qrc:/res/image/favicon.ico"
         z: 11
+        title:"FluentUI"
+        autoSuggestBox:FluAutoSuggestBox{
+            width: 280
+            anchors.centerIn: parent
+            iconSource: FluentIcons.Zoom
+            items: ItemsOriginal.getSearchData()
+            placeholderText: "查找"
+            onItemClicked:
+                (data)=>{
+                    ItemsOriginal.startPageByItem(data)
+                }
+        }
         Component.onCompleted: {
+            ItemsOriginal.navigationView = nav_view
             nav_view.setCurrentIndex(0)
             nav_view.push("qrc:/T_Home.qml")
         }
     }
 
-    function startPageByTitle(title){
-        console.debug(title)
-        nav_view.startPageByTitle(title)
-    }
-
 }

example/page/MediaPage.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+FluWindow {
+
+    width: 640
+    height: 480
+    minimumWidth: 640
+    minimumHeight: 480
+
+    title:"视频播放器"
+
+
+    FluAppBar{
+        id:appbar
+        title:"视频播放器"
+        width:parent.width
+    }
+
+
+    FluMediaPlayer{
+        id:player
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: appbar.bottom
+            bottom: parent.bottom
+        }
+        //                source:"http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
+        source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+        //                source:"http://video.chinanews.com/flv/2019/04/23/400/111773_web.mp4"
+    }
+
+
+}

example/qml.qrc

@@ -149,5 +149,9 @@
         <file>res/image/control/WebView.png</file>
         <file>res/image/control/XamlUICommand.png</file>
         <file>T_CheckBox.qml</file>
+        <file>global/ItemsOriginal.qml</file>
+        <file>global/qmldir</file>
+        <file>global/ItemsFooter.qml</file>
+        <file>page/MediaPage.qml</file>
     </qresource>
 </RCC>

src/FluApp.cpp

@@ -5,6 +5,7 @@
 #include <QQmlContext>
 #include <QQuickItem>
 #include <QTimer>
+#include <QUuid>
 #include <QClipboard>
 #include "Def.h"
 
@@ -99,3 +100,7 @@ QJsonArray FluApp::awesomelist(const QString& keyword)
 void FluApp::clipText(const QString& text){
     QGuiApplication::clipboard()->setText(text);
 }
+
+QString FluApp::uuid(){
+    return QUuid::createUuid().toString();
+}

src/FluApp.h

@@ -37,6 +37,8 @@ public:
 
     Q_INVOKABLE void clipText(const QString& text);
 
+    Q_INVOKABLE QString uuid();
+
 private:
     QMap<QString, QVariant> properties;
     static FluApp* m_instance;

src/FluTheme.cpp

@@ -17,7 +17,7 @@ FluTheme::FluTheme(QObject *parent)
 {
     primaryColor(FluColors::getInstance()->Blue());
     textSize(13);
-    nativeText(false);
+    nativeText(true);
     frameless(true);
     dark(false);
 }

src/Fluent.cpp

@@ -32,6 +32,8 @@ void Fluent::registerTypes(const char *uri){
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
     qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
+
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge");

src/FluentUI.pro

@@ -1,5 +1,5 @@
 QT          += qml quick svg
-CONFIG      += plugin c++11
+CONFIG      += plugin c++17
 TEMPLATE    = lib
 TARGET      = FluentUI
 TARGET      = $$qtLibraryTarget($$TARGET)

src/colorpicker/ColorPicker.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 import "content"
 
 Rectangle {

src/colorpicker/content/Checkerboard.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 Grid {
     id: root
     property int cellSide: 5

src/colorpicker/content/ColorSlider.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Item {
     property int cursorHeight: 7

src/colorpicker/content/NumberBox.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Row {
     property alias  caption: captionBox.text

src/colorpicker/content/PanelBorder.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Rectangle {
     width : 40; height : 15; radius: 2

src/colorpicker/content/SBPicker.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Item {
     id: root
@@ -48,22 +48,15 @@ Item {
         anchors.fill: parent
         x: r
         y: r
+        preventStealing: true
         function handleMouse(mouse) {
             if (mouse.buttons & Qt.LeftButton) {
-
                 pickerCursor.x = Math.max(0,Math.min(mouse.x - r,width-2*r));
                 pickerCursor.y = Math.max(0,Math.min(mouse.y - r,height-2*r));
-
-
-//                pickerCursor.x = Math.max(-r,Math.min(mouse.x - r,width+r));
-//                pickerCursor.y = Math.max(-r,Math.min(mouse.y - r,height+r));
-
-//                pickerCursor.x = Math.max(0, Math.min(width,  mouse.x) - 2 * r);
-//                pickerCursor.y = Math.max(0, Math.min(height, mouse.y) - 2 * r);
             }
         }
-        onPositionChanged: handleMouse(mouse)
+        onPositionChanged:(mouse)=> handleMouse(mouse)
-        onPressed: handleMouse(mouse)
+        onPressed:(mouse)=> handleMouse(mouse)
     }
 }
 

src/controls/FluAppBar.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 Rectangle{
 
@@ -23,11 +23,7 @@ Rectangle{
     color: Qt.rgba(0,0,0,0)
     visible: FluTheme.frameless
     height: visible ? 30 : 0
-    width: {
+    clip: true
-        if(parent==null)
-            return 200
-        return parent.width
-    }
     z: 65535
 
     TapHandler {
@@ -59,13 +55,6 @@ Rectangle{
         height: root.height
         spacing: 0
 
-        TFpsMonitor{
-            Layout.alignment: Qt.AlignVCenter
-            Layout.rightMargin: 20
-            Layout.topMargin: 5
-            color:root.textColor
-            visible: showFps
-        }
 
         RowLayout{
             Layout.alignment: Qt.AlignVCenter
@@ -75,7 +64,6 @@ Rectangle{
             FluText{
                 text:"夜间模式"
                 color:root.textColor
-                fontStyle: FluText.Caption
             }
             FluToggleSwitch{
                 selected: FluTheme.dark

src/controls/FluArea.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 

src/controls/FluAutoSuggestBox.qml

@@ -1,16 +1,20 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 TextField{
 
-    property var values:[]
+    property var items:[]
     property int fontStyle: FluText.Body
     property int pixelSize : FluTheme.textSize
     property int iconSource: 0
     property bool disabled: false
-    signal itemClicked(string data)
+    signal itemClicked(var data)
-
+    signal handleClicked
+    QtObject{
+        id:d
+        property bool flagVisible: true
+    }
     id:input
     width: 300
     enabled: !disabled
@@ -20,13 +24,7 @@ TextField{
         }
         return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     }
-    selectionColor: {
+    selectionColor: FluTheme.primaryColor.lightest
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     placeholderTextColor: {
         if(disabled){
@@ -39,20 +37,14 @@ TextField{
     }
     rightPadding: icon_right.visible ? 50 : 30
     selectByMouse: true
-
     Keys.onUpPressed: {
         list_view.currentIndex = Math.max(list_view.currentIndex-1,0)
     }
-
     Keys.onDownPressed: {
         list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1)
     }
-
-    signal handleClicked
     Keys.onEnterPressed:handleClicked()
     Keys.onReturnPressed:handleClicked()
-
-
     font.bold: {
         switch (fontStyle) {
         case FluText.Display:
@@ -61,10 +53,8 @@ TextField{
             return true
         case FluText.Title:
             return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
             return true
-        case FluText.BodyLarge:
-            return false
         case FluText.BodyStrong:
             return true
         case FluText.Body:
@@ -78,27 +68,23 @@ TextField{
     font.pixelSize: {
         switch (fontStyle) {
         case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
         case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
         case FluText.Title:
-            return input.pixelSize * 1.5
+            return text.pixelSize * 2
-        case FluText.Subtitle:
+        case FluText.SubTitle:
-            return input.pixelSize * 0.9
+            return text.pixelSize * 1.428
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
         case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
         case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
         default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
         }
     }
-    background: FluTextBoxBackground{
-        inputItem: input
 
     FluIconButton{
         iconSource:FluentIcons.ChromeClose
@@ -117,6 +103,10 @@ TextField{
         }
     }
 
+    background: FluTextBoxBackground{
+        inputItem: input
+
+
         FluIcon{
             id:icon_right
             iconSource: input.iconSource
@@ -137,10 +127,8 @@ TextField{
 
     Popup{
         id:input_popup
-        visible: input.focus
         y:input.height
-        modal: true
+        focus: false
-        dim:false
         enter: Transition {
             NumberAnimation {
                 property: "y"
@@ -155,9 +143,6 @@ TextField{
                 duration: 150
             }
         }
-        onClosed: {
-            input.focus = false
-        }
         onVisibleChanged: {
             if(visible){
                 list_view.currentIndex = -1
@@ -173,9 +158,7 @@ TextField{
             height: 38*Math.min(Math.max(list_view.count,1),8)
             ListView{
                 id:list_view
-                signal closePopup
                 anchors.fill: parent
-                boundsBehavior: ListView.StopAtBounds
                 clip: true
                 currentIndex: -1
                 ScrollBar.vertical: FluScrollBar {}
@@ -212,16 +195,11 @@ TextField{
                                 target: input
                                 function onHandleClicked(){
                                     if((list_view.currentIndex === index)){
-                                        mouse_area.handleClick()
+                                        handleClick(modelData)
                                     }
                                 }
                             }
-                            onClicked: handleClick()
+                            onClicked: handleClick(modelData)
-                            function handleClick(){
-                                input_popup.close()
-                                input.itemClicked(modelData)
-                                input.text = modelData
-                            }
                         }
                         Rectangle{
                             width: 3
@@ -236,53 +214,81 @@ TextField{
                         }
                     }
                     contentItem: FluText{
-                        text:modelData
+                        text:modelData.title
                         anchors{
                             verticalCenter: parent.verticalCenter
                         }
                     }
-
-                }
-                //                Item{
-                //                    height: 38
-                //                    width: input.width
-                //                    Rectangle{
-                //                        anchors.fill: parent
-                //                        anchors.topMargin: 2
-                //                        anchors.bottomMargin: 2
-                //                        anchors.leftMargin: 5
-                //                        anchors.rightMargin: 5
-
-                //                        radius: 3
-                //                        MouseArea{
-                //                            id:item_mouse
-                //                            anchors.fill: parent
-                //                            hoverEnabled: true
-                //                            onClicked: {
-                //                                input_popup.close()
-                //                                input.itemClicked(modelData)
-                //                                input.text = modelData
-                //                            }
-                //                        }
-
-                //                    }
-                //                }
                 }
             }
         }
+    }
+
+    function handleClick(modelData){
+        input_popup.visible = false
+        input.itemClicked(modelData)
+        updateText(modelData.title)
+    }
+
+    function updateText(text){
+        d.flagVisible = false
+        input.text = text
+        d.flagVisible = true
+    }
 
     onTextChanged: {
         searchData()
+        if(d.flagVisible){
+            input_popup.visible = true
+        }
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: input.echoMode !== TextInput.Password && menu.popup()
+    }
+
+    FluMenu{
+        id:menu
+        focus: false
+        FluMenuItem{
+            text: "剪切"
+            visible: input.text !== ""
+            onClicked: {
+                input.cut()
+            }
+        }
+        FluMenuItem{
+            text: "复制"
+            visible: input.selectedText !== ""
+            onClicked: {
+                input.copy()
+            }
+        }
+        FluMenuItem{
+            text: "粘贴"
+            visible: input.canPaste
+            onClicked: {
+                input.paste()
+            }
+        }
+        FluMenuItem{
+            text: "全选"
+            visible: input.text !== ""
+            onClicked: {
+                input.selectAll()
+            }
+        }
     }
 
     function searchData(){
         var result = []
-        if(values==null){
+        if(items==null){
             list_view.model = result
             return
         }
-        values.map(function(item){
+        items.map(function(item){
-            if(item.indexOf(input.text)!==-1){
+            if(item.title.indexOf(input.text)!==-1){
                 result.push(item)
             }
         })

src/controls/FluBadge.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Rectangle{
 

src/controls/FluButton.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Button {
 

src/controls/FluCalendarPicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 
@@ -50,7 +50,7 @@ Rectangle {
     FluIcon{
         iconSource: FluentIcons.Calendar
         iconSize: 14
-        color: text_date.color
+        iconColor: text_date.color
         anchors{
             verticalCenter: parent.verticalCenter
             right: parent.right
@@ -59,7 +59,7 @@ Rectangle {
     }
 
 
-    Popup{
+    Menu{
         id:popup
         height: container.height
         width: container.width
@@ -79,7 +79,9 @@ Rectangle {
                 duration: 150
             }
         }
-        background: FluCalendarView{
+        contentItem: Item{
+            anchors.fill: parent
+            FluCalendarView{
                 id:container
                 onDateClicked:
                     (date)=>{
@@ -90,7 +92,8 @@ Rectangle {
                         text_date.text = year+"-"+(month+1)+"-"+day
                     }
             }
-        contentItem: Item{}
+        }
+        background: Item{}
         function showPopup() {
             var pos = root.mapToItem(null, 0, 0)
             if(window.height>pos.y+root.height+popup.height){

src/controls/FluCalendarView.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluCarousel.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluCheckBox.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 Button {
 
@@ -73,16 +73,28 @@ Button {
                 }
                 return normalColor
             }
+            Behavior on color {
+                ColorAnimation{
+                    duration: 150
+                }
+            }
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
                 iconSize: 15
                 visible: selected
-                color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                Behavior on visible {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
             }
         }
         FluText{
             text: control.text
+            Layout.leftMargin: 5
+            visible: text !== ""
         }
     }
 }

src/controls/FluColorPicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 
 Button{
@@ -27,15 +27,19 @@ Button{
     onClicked: {
         popup.showPopup()
     }
-    Popup{
+    Menu{
         id:popup
         modal: true
         dim:false
         height: container.height
         width: container.width
-        background: FluColorView{
+        contentItem: Item{
+            anchors.fill: parent
+            FluColorView{
                 id:container
             }
+        }
+        background:Item{}
         enter: Transition {
             NumberAnimation {
                 property: "y"
@@ -50,7 +54,6 @@ Button{
                 duration: 150
             }
         }
-        contentItem: Item{}
         function showPopup() {
             var pos = control.mapToItem(null, 0, 0)
             if(window.height>pos.y+control.height+popup.height){

src/controls/FluColorView.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 import "../colorpicker"
 
 Item {

src/controls/FluComboBox.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluContentDialog.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
 
 Popup {
     id: popup
@@ -17,11 +17,11 @@ Popup {
             return 400
         return  Math.min(Window.window.width,400)
     }
-
     modal:true
     anchors.centerIn: Overlay.overlay
     closePolicy: Popup.CloseOnEscape
-    background: Rectangle {
+    background:Item{}
+    contentItem: Rectangle {
         id:layout_content
         implicitWidth:minWidth
         implicitHeight: text_title.height + text_message.height + layout_actions.height

src/controls/FluContentPage.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluDatePicker.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 
@@ -97,12 +97,11 @@ Rectangle {
         text:"日"
     }
 
-    Popup{
+    Menu{
         id:popup
-        width: container.width
-        height: container.height
-        contentItem: Item{}
         modal: true
+        width: 300
+        height: 340
         dim:false
         enter: Transition {
             NumberAnimation {
@@ -118,12 +117,12 @@ Rectangle {
                 duration: 150
             }
         }
-        background: Rectangle{
+        background:Item{}
+        contentItem: Rectangle{
             id:container
-            width: 300
             radius: 4
+            anchors.fill: parent
             color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-            height: 340
             MouseArea{
                 anchors.fill: parent
             }
@@ -337,9 +336,7 @@ Rectangle {
                         popup.close()
                     }
                 }
-
             }
-
         }
         y:35
         function showPopup() {

src/controls/FluDivider.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 

src/controls/FluDropDownButton.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
 
 Button {
 
@@ -44,7 +44,7 @@ Button {
                 rightMargin: 10
                 verticalCenter: parent.verticalCenter
             }
-            color:title.color
+            iconColor:title.color
         }
 
     }

src/controls/FluExpander.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 
@@ -51,15 +51,22 @@ Item {
                 if(root_mouse.containsMouse){
                     return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
                 }
-                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+                return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
             }
-            iconSize: 15
-            iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
             onClicked: {
                 expand = !expand
             }
+            contentItem: FluIcon{
+                rotation: expand?0:180
+                iconSource:FluentIcons.ChevronUp
+                iconSize: 15
+                Behavior on rotation {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
+            }
         }
-
     }
 
 

src/controls/FluFilledButton.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Button {
 

src/controls/FluFocusRectangle.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Item {
 

src/controls/FluIcon.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Text {
 

src/controls/FluIconButton.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Button {
 

src/controls/FluInfoBar.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 FluObject {
     id:infoBar
@@ -178,7 +178,7 @@ FluObject {
                         return FluentIcons.FA_info_circle
                     }
                     iconSize:20
-                    color: {
+                    iconColor: {
                         if(FluTheme.dark){
                             switch(_super.type){
                             case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
@@ -208,23 +208,23 @@ FluObject {
         }
     }
 
-    function showSuccess(text,duration,moremsg){
+    function showSuccess(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
     }
 
-    function showInfo(text,duration,moremsg){
+    function showInfo(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
     }
 
-    function showWarning(text,duration,moremsg){
+    function showWarning(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
     }
 
-    function showError(text,duration,moremsg){
+    function showError(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
     }
 
-    function showCustom(itemcomponent,duration){
+    function showCustom(itemcomponent,duration=1000){
         mcontrol.createCustom(itemcomponent,duration);
     }
 

src/controls/FluItem.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import Qt5Compat.GraphicalEffects
 
 Item{
     id:control
@@ -14,6 +14,18 @@ Item{
         opacity: 0
     }
 
+    onWidthChanged: {
+        canvas.requestPaint()
+    }
+
+    onHeightChanged: {
+        canvas.requestPaint()
+    }
+
+    onRadiusChanged: {
+        canvas.requestPaint()
+    }
+
     Canvas {
         id: canvas
         anchors.fill: parent

src/controls/FluMediaPlayer.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtMultimedia 5.15
+import QtMultimedia
-import FluentUI 1.0
+import FluentUI
 
 Rectangle {
 
@@ -17,6 +17,7 @@ Rectangle {
 
     MouseArea{
         anchors.fill: parent
+        preventStealing: true
         onClicked: {
             showControl = !showControl
         }
@@ -25,9 +26,13 @@ Rectangle {
     MediaPlayer {
         id: mediaplayer
         property bool autoSeek:true
-        autoPlay: true
         source: control.source
-        onError: {
+        videoOutput: video_output
+        audioOutput: AudioOutput{
+            id:audio_output
+        }
+        onErrorChanged:
+            (error)=> {
                 console.debug(error)
             }
         onPositionChanged: {
@@ -35,10 +40,12 @@ Rectangle {
                 slider.seek(mediaplayer.position*slider.maxValue/mediaplayer.duration)
             }
         }
-        onStatusChanged: {
+        onMediaStatusChanged:
-            if(status===6){
+            (status)=> {
+                if(status===2){
                     slider.maxValue = mediaplayer.duration
                     showControl = true
+                    mediaplayer.play()
                 }
             }
     }
@@ -48,29 +55,31 @@ Rectangle {
     }
 
     VideoOutput {
+        id:video_output
         anchors.fill: parent
-        source: mediaplayer
     }
 
     Item{
         height: 100
         y:showControl ? control.height - 110 : control.height
         anchors{
-            left: parent.left
+            horizontalCenter: parent.horizontalCenter
-            right: parent.right
-            leftMargin: 10
-            rightMargin: 10
         }
+        width: 460
+        opacity: showControl
         MouseArea{
             anchors.fill: parent
         }
-
+        Behavior on opacity{
+            NumberAnimation{
+                duration: 150
+            }
+        }
         Behavior on y{
             NumberAnimation{
                 duration: 150
             }
         }
-
         Rectangle{
             anchors.fill: parent
             color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
@@ -82,25 +91,23 @@ Rectangle {
             size:parent.width-20
             y:20
             anchors.horizontalCenter: parent.horizontalCenter
-            enableTip:false
+            tipEnabled:false
             onPressed: {
                 mediaplayer.autoSeek = false
                 mediaplayer.pause()
             }
-            value:0
+            value:mediaplayer.position
             onReleased: {
                 mediaplayer.autoSeek = true
                 mediaplayer.play()
             }
-
             onValueChanged: {
                 if(mediaplayer.autoSeek == false){
-                    mediaplayer.seek(value*mediaplayer.duration/slider.maxValue)
+                    mediaplayer.position = value*mediaplayer.duration/slider.maxValue
                 }
             }
-
             onLineClickFunc:function(val){
-                mediaplayer.seek(val*mediaplayer.duration/slider.maxValue)
+                mediaplayer.position = val*mediaplayer.duration/slider.maxValue
             }
         }
 
@@ -137,14 +144,14 @@ Rectangle {
                 iconSize: 17
                 iconSource:  FluentIcons.SkipBack10
                 onClicked: {
-                    mediaplayer.seek(Math.max(mediaplayer.position-10*1000,0))
+                    mediaplayer.position = Math.max(mediaplayer.position-10*1000,0)
                 }
             }
             FluIconButton{
                 iconSize: 15
-                iconSource: mediaplayer.playbackState === Audio.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
+                iconSource: mediaplayer.playbackState === MediaPlayer.PlayingState ?   FluentIcons.Pause  : FluentIcons.Play
                 onClicked: {
-                    if(mediaplayer.playbackState === Audio.PlayingState){
+                    if(mediaplayer.playbackState === MediaPlayer.PlayingState){
                         mediaplayer.pause()
                     }else{
                         mediaplayer.play()
@@ -155,16 +162,15 @@ Rectangle {
                 iconSize: 17
                 iconSource:  FluentIcons.SkipForward30
                 onClicked: {
-                    mediaplayer.seek(Math.min(mediaplayer.position+30*1000,mediaplayer.duration))
+                    mediaplayer.position = Math.min(mediaplayer.position+30*1000,mediaplayer.duration)
                 }
             }
         }
 
-
         FluIconButton{
             id:btn_volume
             iconSize: 17
-            iconSource:  mediaplayer.volume ?  FluentIcons.Volume :  FluentIcons.Mute
+            iconSource:  audio_output.muted ? FluentIcons.Mute  :  FluentIcons.Volume
             anchors{
                 left: parent.left
                 leftMargin: 5
@@ -172,7 +178,7 @@ Rectangle {
                 bottomMargin: 10
             }
             onClicked: {
-                mediaplayer.volume = !mediaplayer.volume
+                audio_output.muted = !audio_output.muted
             }
         }
 
@@ -187,10 +193,9 @@ Rectangle {
                 leftMargin: 10
             }
             onValueChanged:{
-                mediaplayer.volume = value/100
+                audio_output.volume = value/100
             }
         }
-
     }
 
     function formatDuration(duration) {

src/controls/FluMenu.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 
 Menu {
 
@@ -11,8 +11,6 @@ Menu {
     height: container.height
     modal:true
     dim:false
-    contentItem: Item{}
-
     enter: Transition {
         NumberAnimation {
             property: "y"
@@ -27,8 +25,8 @@ Menu {
             duration: animEnabled ? 150 : 0
         }
     }
-
+    background:Item{}
-    background: Item {
+    contentItem: Item {
         Rectangle{
             anchors.fill: parent
             color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)

src/controls/FluMenuItem.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 
 Item {
 

src/controls/FluMultiLineTextBox.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 TextArea{
 
@@ -20,13 +20,7 @@ TextArea{
     wrapMode: Text.WrapAnywhere
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectByMouse: true
-    selectionColor: {
+    selectionColor: FluTheme.primaryColor.lightest
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
     background: FluTextBoxBackground{
         inputItem: input
     }
@@ -47,10 +41,8 @@ TextArea{
             return true
         case FluText.Title:
             return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
             return true
-        case FluText.BodyLarge:
-            return false
         case FluText.BodyStrong:
             return true
         case FluText.Body:
@@ -61,29 +53,60 @@ TextArea{
             return false
         }
     }
-
     font.pixelSize: {
         switch (fontStyle) {
         case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
         case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
         case FluText.Title:
-            return input.pixelSize * 1.5
+            return text.pixelSize * 2
-        case FluText.Subtitle:
+        case FluText.SubTitle:
-            return input.pixelSize * 0.9
+            return text.pixelSize * 1.428
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
         case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
         case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
         default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        }
+    }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+       onTapped: input.echoMode !== TextInput.Password && menu.popup()
+    }
+    FluMenu{
+        id:menu
+        focus: false
+        FluMenuItem{
+            text: "剪切"
+            visible: input.text !== ""
+            onClicked: {
+                input.cut()
+            }
+        }
+        FluMenuItem{
+            text: "复制"
+            visible: input.selectedText !== ""
+            onClicked: {
+                input.copy()
+            }
+        }
+        FluMenuItem{
+            text: "粘贴"
+            visible: input.canPaste
+            onClicked: {
+                input.paste()
+            }
+        }
+        FluMenuItem{
+            text: "全选"
+            visible: input.text !== ""
+            onClicked: {
+                input.selectAll()
+            }
         }
     }
-
-
 }

src/controls/FluNavigationView.qml

@@ -1,16 +1,18 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 Item {
 
     property alias logo : image_logo.source
+    property string title: ""
     property FluObject items
     property FluObject footerItems
     property int displayMode: width<=700 ? FluNavigationView.Minimal : FluNavigationView.Open
     property bool displaMinimalMenu : false
+    property Component  autoSuggestBox
 
     id:root
 
@@ -46,14 +48,34 @@ Item {
         id:com_panel_item_separatorr
         FluDivider{
             width: nav_list.width
-            height: 1
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 1 : 0
+                }
+                return 1
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
         }
     }
 
     Component{
         id:com_panel_item_header
         Item{
-            height: 30
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 30 : 0
+                }
+                return 30
+            }
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
             width: nav_list.width
             FluText{
                 text:model.title
@@ -68,11 +90,131 @@ Item {
     }
 
     Component{
-        id:com_panel_item
+        id:com_panel_item_expander
         Item{
             height: 38
             width: nav_list.width
 
+            Rectangle{
+                radius: 4
+                anchors{
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    topMargin: 2
+                    bottomMargin: 2
+                    leftMargin: 6
+                    rightMargin: 6
+                }
+                Rectangle{
+                    width: 3
+                    height: 18
+                    radius: 1.5
+                    color: FluTheme.primaryColor.dark
+                    visible: {
+                        for(var i=0;i<model.children.length;i++){
+                            var item = model.children[i]
+                            if(item.idx === nav_list.currentIndex && !model.isExpand){
+                                return true
+                            }
+                        }
+                        return false
+                    }
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                    }
+                }
+                FluIcon{
+                    rotation: model.isExpand?0:180
+                    iconSource:FluentIcons.ChevronUp
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: 12
+                    }
+                    Behavior on rotation {
+                        NumberAnimation{
+                            duration: 150
+                        }
+                    }
+                }
+                MouseArea{
+                    id:item_mouse
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        model.isExpand = !model.isExpand
+                    }
+                }
+                color: {
+                    if(FluTheme.dark){
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(1,1,1,0.03)
+                        }
+                        if((nav_list.currentIndex === position)&&type===0){
+                            return Qt.rgba(1,1,1,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }else{
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(0,0,0,0.03)
+                        }
+                        if(nav_list.currentIndex === position&&type===0){
+                            return Qt.rgba(0,0,0,0.06)
+                        }
+                        return Qt.rgba(0,0,0,0)
+                    }
+                }
+
+                FluIcon{
+                    id:item_icon
+                    iconSource: {
+                        if(model.icon){
+                            return model.icon
+                        }
+                        return 0
+                    }
+                    width: 30
+                    height: 30
+                    iconSize: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:parent.left
+                        leftMargin: 3
+                    }
+                }
+
+                FluText{
+                    id:item_title
+                    text:model.title
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:item_icon.right
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_panel_item
+        Item{
+            Behavior on height {
+                NumberAnimation{
+                    duration: 150
+                }
+            }
+            clip: true
+            height: {
+                if(model.parent){
+                    return model.parent.isExpand ? 38 : 0
+                }
+                return 38
+            }
+            width: nav_list.width
+
             Rectangle{
                 radius: 4
                 anchors{
@@ -214,7 +356,7 @@ Item {
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
-                text:"FluentUI"
+                text:root.title
                 Layout.leftMargin: 12
                 fontStyle: FluText.Body
             }
@@ -257,6 +399,17 @@ Item {
     Rectangle{
         id:layout_list
         width: 300
+        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+        border.width:  displayMode === FluNavigationView.Minimal ? 1 : 0
+        color: {
+            if(displayMode === FluNavigationView.Minimal){
+                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            }
+            if(window && window.active){
+                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+            }
+            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+        }
         anchors{
             top: parent.top
             bottom: parent.bottom
@@ -273,70 +426,29 @@ Item {
             }
         }
 
-        color: {
-            if(displayMode === FluNavigationView.Minimal){
-                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-            }
-            if(window && window.active){
-                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-        }
         Behavior on color{
             ColorAnimation {
                 duration: 300
             }
         }
 
-        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
-        border.width:  displayMode === FluNavigationView.Minimal ? 1 : 0
-
         Item{
             id:layout_header
             width: layout_list.width
             y:nav_app_bar.height
-            height: textbox_search.height
+            height: {
+                if(loader_auto_suggest_box.item){
+                    return loader_auto_suggest_box.item.height
+                }
+                return 0
+            }
+            Loader{
+                id:loader_auto_suggest_box
+                anchors.horizontalCenter: parent.horizontalCenter
+                sourceComponent: autoSuggestBox
+            }
+        }
 
-            FluAutoSuggestBox{
-                id:textbox_search
-                width: 280
-                anchors.centerIn: parent
-                iconSource: FluentIcons.Zoom
-                values: {
-                    var arr = []
-                    if(items==null)
-                        return arr
-                    if(items.children==null)
-                        return arr
-                    for(var i=0;i<items.children.length;i++){
-                        var item = items.children[i]
-                        if(item instanceof FluPaneItem){
-                            arr.push(item.title)
-                        }
-                    }
-                    return arr
-                }
-                placeholderText: "查找"
-                onItemClicked:
-                    (data)=>{
-                        var arr = []
-                        if(items==null)
-                        return arr
-                        if(items.children==null)
-                        return arr
-                        for(var i=0;i<items.children.length;i++){
-                            if(items.children[i].title === data){
-                                if(nav_list.currentIndex === i){
-                                    return
-                                }
-                                items.children[i].tap()
-                                nav_list.currentIndex = i
-                                return
-                            }
-                        }
-                    }
-            }
-        }
         ListView{
             id:nav_list
             property bool enableStack: true
@@ -349,6 +461,7 @@ Item {
                 right: parent.right
                 bottom: layout_footer.top
             }
+            highlightMoveDuration: 150
             currentIndex: -1
             onCurrentIndexChanged: {
                 if(enableStack){
@@ -357,12 +470,7 @@ Item {
             }
             ScrollBar.vertical: FluScrollBar {}
 
-            model:{
+            model:handleItems()
-                if(items){
-                    return items.children
-                }
-            }
-            boundsBehavior: ListView.StopAtBounds
             delegate: Loader{
                 property var model: modelData
                 property var position: index
@@ -377,6 +485,9 @@ Item {
                     if(modelData instanceof FluPaneItemSeparator){
                         return com_panel_item_separatorr
                     }
+                    if(modelData instanceof FluPaneItemExpander){
+                        return com_panel_item_expander
+                    }
                 }
             }
         }
@@ -386,7 +497,6 @@ Item {
             width: layout_list.width
             height: childrenRect.height
             anchors.bottom: parent.bottom
-            boundsBehavior: ListView.StopAtBounds
             model: {
                 if(footerItems){
                     return footerItems.children
@@ -412,6 +522,33 @@ Item {
         }
     }
 
+    function handleItems(){
+        var idx = 0
+        var data = []
+        if(items){
+            for(var i=0;i<items.children.length;i++){
+                var item = items.children[i]
+                item.idx = idx
+                data.push(item)
+                idx++
+                if(item instanceof FluPaneItemExpander){
+                    for(var j=0;j<item.children.length;j++){
+                        var itemChild = item.children[j]
+                        itemChild.parent = item
+                        itemChild.idx = idx
+                        data.push(itemChild)
+                        idx++
+                    }
+                }
+            }
+        }
+        return data
+    }
+
+    function getItems(){
+        return nav_list.model
+    }
+
     function push(url){
         nav_swipe.push(url)
     }
@@ -420,17 +557,8 @@ Item {
         nav_list.currentIndex = index
     }
 
-    function startPageByTitle(title){
+    function getCurrentIndex(){
-        for(var i=0;i<items.children.length;i++){
+        return nav_list.currentIndex
-            if(items.children[i].title === title){
-                if(nav_list.currentIndex === i){
-                    return
-                }
-                items.children[i].tap()
-                nav_list.currentIndex = i
-                return
-            }
-        }
     }
 
 }

src/controls/FluObject.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
     id:flu_object;

src/controls/FluPaneItem.qml

@@ -1,8 +1,17 @@
-import QtQuick 2.15
+import QtQuick
+import FluentUI
 
 QtObject {
+    readonly property string key : FluApp.uuid()
+    readonly property int flag : 0
     property string title
-    property var icon
+    property int icon
+    property bool recentlyAdded: false
+    property bool recentlyUpdated: false
+    property string desc
+    property var image
+    property var parent
+    property int idx
     signal tap
     signal repTap
 }

src/controls/FluPaneItemExpander.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import FluentUI
+
+FluObject {
+    readonly property int flag : 3
+    readonly property string key : FluApp.uuid()
+    property string title
+    property int icon
+    property bool isExpand: false
+    property var parent
+    property int idx
+    signal tap
+    signal repTap
+}

src/controls/FluPaneItemHeader.qml

@@ -1,5 +1,9 @@
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
+    readonly property int flag : 1
+    readonly property string key : FluApp.uuid()
     property string title
+    property var parent
+    property int idx
 }

src/controls/FluPaneItemSeparator.qml

@@ -1,5 +1,8 @@
-import QtQuick 2.15
+import QtQuick
 
 QtObject {
-
+    readonly property int flag : 2
+    readonly property string key : FluApp.uuid()
+    property var parent
+    property int idx
 }

src/controls/FluProgressBar.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.12
+import QtQuick.Controls
 
 FluRectangle {
 

src/controls/FluProgressRing.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.12
+import QtQuick.Controls
 
 Rectangle {
 

src/controls/FluRadioButton.qml

@@ -1,7 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
 
 
 Button {

src/controls/FluRectangle.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import Qt5Compat.GraphicalEffects
 
 Item{
     id:control

src/controls/FluScrollBar.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
 import QtQuick.Controls.impl 2.15
 import QtQuick.Templates 2.15 as T
-import FluentUI 1.0
+import FluentUI
 
 T.ScrollBar {
     id: control

src/controls/FluScrollablePage.qml

@@ -1,8 +1,8 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 Item {
 
@@ -43,7 +43,6 @@ Item {
         }
         contentWidth: parent.width
         contentHeight: container.height
-        boundsBehavior: Flickable.StopAtBounds
         ScrollBar.vertical: FluScrollBar {
         }
         anchors{

src/controls/FluShadow.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 
 Item {
 

src/controls/FluSlider.qml

@@ -1,20 +1,15 @@
-import QtQuick 2.12
+import QtQuick
-import QtQuick.Controls 2.12
+import QtQuick.Controls
-import QtGraphicalEffects 1.15
+import Qt5Compat.GraphicalEffects
 
 Item{
 
-    enum Orientation  {
-        Horizontal,
-        Vertical
-    }
     property int size: 180
     property int dotSize: 24
     property int value: 50
     property int maxValue: 100
-    property int orientation: FluSlider.Horizontal
+    property bool vertical: false
-    property bool isHorizontal: orientation === FluSlider.Horizontal
+    property bool tipEnabled : true
-    property bool enableTip : true
     property var onLineClickFunc
     signal pressed
     signal released
@@ -22,7 +17,7 @@ Item{
     id:root
     height: control.height
     width: control.width
-    rotation: isHorizontal ? 0 : 180
+    rotation: vertical ? 180 : 0
 
     Component.onCompleted: {
         seek(value)
@@ -31,16 +26,16 @@ Item{
     MouseArea{
         id:mouse_line
         anchors.centerIn: control
-        width: isHorizontal ? control.width : 10
+        width: vertical ? 10 : control.width
-        height: isHorizontal ? 10 : control.height
+        height: vertical ? control.height : 10
         hoverEnabled: true
         onClicked:
             (mouse) => {
                 var val;
-                if(isHorizontal){
+                if(vertical){
-                    val = mouse.x*maxValue/control.width
-                }else{
                     val = mouse.y*maxValue/control.height
+                }else{
+                    val = mouse.x*maxValue/control.width
                 }
                 if(onLineClickFunc){
                     onLineClickFunc(val)
@@ -52,20 +47,18 @@ Item{
 
     Rectangle {
         id: control
-        width: isHorizontal ? size : 4
+        width: vertical ? 4 :size
-        height:  isHorizontal ? 4 : size
+        height:  vertical ? size : 4
         radius: 2
         anchors.verticalCenter: parent.verticalCenter
         color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
         Rectangle{
             id:rect
             radius: 2.5
-            width: isHorizontal ? control.width*(value/maxValue) : 5
+            width: vertical ? 5 : control.width*(value/maxValue)
-            height: isHorizontal ?  5  : control.height*(value/maxValue)
+            height: vertical ? control.height*(value/maxValue) :  5
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
-
-
     }
 
     Rectangle{
@@ -76,8 +69,8 @@ Item{
             radius: dotSize/2
         }
         radius: dotSize/2
-        anchors.verticalCenter: isHorizontal ?  parent.verticalCenter : undefined
+        anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
-        anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
+        anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         Rectangle{
             width: dotSize/2
@@ -85,7 +78,12 @@ Item{
             radius: dotSize/4
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
-            scale: control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
+            scale: {
+                if(control_mouse.pressed){
+                    return 0.9
+                }
+                return control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
+            }
             Behavior on scale {
                 NumberAnimation{
                     duration: 150
@@ -98,14 +96,14 @@ Item{
             hoverEnabled: true
             drag {
                 target: dot
-                axis: isHorizontal ? Drag.XAxis : Drag.YAxis
+                axis: vertical ? Drag.YAxis : Drag.XAxis
-                minimumX: isHorizontal ? -dotSize/2 : 0
+                minimumX: vertical ? 0 : -dotSize/2
-                maximumX: isHorizontal ?  (control.width - dotSize/2) : 0
+                maximumX: vertical ? 0 : (control.width - dotSize/2)
-                minimumY: isHorizontal ? 0 : -dotSize/2
+                minimumY: vertical ? -dotSize/2 : 0
-                maximumY: isHorizontal ? 0 : (control.height - dotSize/2)
+                maximumY: vertical ? (control.height - dotSize/2) : 0
             }
             onPressed: {
-                if(enableTip){
+                if(tipEnabled){
                     tool_tip.visible  =  true
                 }
                 root.pressed()
@@ -120,23 +118,22 @@ Item{
         FluTooltip{
             id:tool_tip
             text:String(root.value)
-            y: isHorizontal ? -40 : 32
+            y: vertical ? 32 : -40
         }
     }
 
     function seek(val){
-        if(isHorizontal){
+        if(vertical){
-            dot.x =val/maxValue*control.width - dotSize/2
-            root.value = Qt.binding(function(){
-                return (dot.x+dotSize/2)/control.width*maxValue
-            })
-        }else{
             dot.y =val/maxValue*control.height - dotSize/2
             root.value = Qt.binding(function(){
                 return (dot.y+dotSize/2)/control.height*maxValue
             })
+        }else{
+            dot.x =val/maxValue*control.width - dotSize/2
+            root.value = Qt.binding(function(){
+                return (dot.x+dotSize/2)/control.width*maxValue
+            })
+        }
     }
 }
 
-}
-

src/controls/FluTabView.qml

@@ -1,6 +1,7 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import QtQuick.Layouts
+import FluentUI
 
 Item {
 
@@ -14,6 +15,11 @@ Item {
     implicitHeight: height
     implicitWidth: width
 
+    MouseArea{
+        anchors.fill: parent
+        preventStealing: true
+    }
+
     enum TabWidthBehavior {
         Equal,
         SizeToContent,
@@ -29,25 +35,43 @@ Item {
     property int tabWidthBehavior : FluTabView.Equal
     property int closeButtonVisibility : FluTabView.Always
     property int itemWidth: 146
+    signal newPressed
 
     QtObject {
         id: d
         property int dragIndex: -1
         property bool dragBehavior: false
         property bool itemPress: false
+        property int maxEqualWidth: 240
     }
 
     ListModel{
         id:tab_model
     }
 
+    FluIconButton{
+        id:btn_new
+        width: 34
+        height: 34
+        x:Math.min(tab_nav.contentWidth,tab_nav.width)
+        anchors.top: parent.top
+        iconSource: FluentIcons.Add
+        onClicked: {
+            newPressed()
+        }
+    }
+
     ListView{
         id:tab_nav
         height: 34
         orientation: ListView.Horizontal
-        width: parent.width
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            rightMargin: 34
+        }
         interactive: false
-        boundsBehavior: ListView.StopAtBounds
         model: tab_model
         move: Transition {
             NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.OutCubic }
@@ -57,20 +81,20 @@ Item {
             NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
             NumberAnimation { properties: "y"; duration: 100;  easing.type: Easing.OutCubic }
         }
-        clip: false
+        clip: true
         ScrollBar.horizontal: ScrollBar{
             id: scroll_nav
             policy: ScrollBar.AlwaysOff
         }
         delegate:  Item{
 
-            width: itemWidth
+            width: item_layout.width
             height: item_container.height
             z: item_mouse_drag.pressed ? 1000 : 1
 
             Item{
                 id:item_layout
-                width: itemWidth
+                width: item_container.width
                 height: item_container.height
 
                 FluItem{
@@ -79,8 +103,19 @@ Item {
                     property real timestamp: new Date().getTime()
 
                     height: tab_nav.height
-                    width: itemWidth
+                    width: {
-                    radius: [5,5,0,0]
+                        if(tabWidthBehavior === FluTabView.Equal){
+                            return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                        }
+                        if(tabWidthBehavior === FluTabView.SizeToContent){
+                            return itemWidth
+                        }
+                        if(tabWidthBehavior === FluTabView.Compact){
+                            return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index  ? itemWidth : 41 + item_btn_close.width
+                        }
+                        return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                    }
+                    radius: [6,6,0,0]
                     Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
                     Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
 
@@ -166,7 +201,10 @@ Item {
                             var idx = tab_nav.indexAt(pos.x+tab_nav.contentX, pos.y)
                             var firstIdx = tab_nav.indexAt(tab_nav.contentX+1, pos.y)
                             var lastIdx = tab_nav.indexAt(tab_nav.width+tab_nav.contentX-1, pos.y)
-                            if (idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
+                            if(lastIdx === -1){
+                                lastIdx = tab_nav.count-1
+                            }
+                            if (idx!==-1 && idx >= firstIdx && idx <= lastIdx && d.dragIndex !== idx) {
                                 tab_model.move(d.dragIndex, idx, 1)
                                 d.dragIndex = idx;
                             }
@@ -196,19 +234,51 @@ Item {
                         }
                     }
 
+                    RowLayout{
+                        spacing: 0
+                        height: parent.height
+                        Image{
+                            source:model.icon
+                            Layout.leftMargin: 10
+                            Layout.preferredWidth: 14
+                            Layout.preferredHeight: 14
+                            Layout.alignment: Qt.AlignVCenter
+                        }
                         FluText{
                             id:item_text
-                        anchors.centerIn: parent
                             text: model.text
-                        rightPadding: 24
+                            Layout.leftMargin: 10
+                            visible: {
+                                if(tabWidthBehavior === FluTabView.Equal){
+                                    return true
+                                }
+                                if(tabWidthBehavior === FluTabView.SizeToContent){
+                                    return true
+                                }
+                                if(tabWidthBehavior === FluTabView.Compact){
+                                    return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index
+                                }
+                                return false
+                            }
+                            Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
+                            elide: Text.ElideRight
+                            Layout.alignment: Qt.AlignVCenter
+                        }
                     }
 
                     FluIconButton{
                         id:item_btn_close
                         iconSource: FluentIcons.ChromeClose
                         iconSize: 10
-                        width: 24
+                        width: visible ? 24 : 0
                         height: 24
+                        visible: {
+                            if(closeButtonVisibility === FluTabView.Nerver)
+                                return false
+                            if(closeButtonVisibility === FluTabView.OnHover)
+                                return item_mouse_hove.containsMouse || item_btn_close.hovered
+                            return true
+                        }
                         anchors{
                             right: parent.right
                             rightMargin: 5
@@ -218,6 +288,15 @@ Item {
                             tab_model.remove(index)
                         }
                     }
+
+                    FluDivider{
+                        width: 1
+                        height: 16
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            right: parent.right
+                        }
+                    }
                 }
             }
         }
@@ -258,4 +337,8 @@ Item {
         tab_model.append(list)
     }
 
+    function count(){
+        return tab_nav.count
+    }
+
 }

src/controls/FluText.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 
 Text {
 
@@ -11,8 +11,7 @@ Text {
         Display,
         TitleLarge,
         Title,
-        Subtitle,
+        SubTitle,
-        BodyLarge,
         BodyStrong,
         Body,
         Caption
@@ -29,10 +28,8 @@ Text {
             return true
         case FluText.Title:
             return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
             return true
-        case FluText.BodyLarge:
-            return false
         case FluText.BodyStrong:
             return true
         case FluText.Body:
@@ -46,21 +43,19 @@ Text {
     font.pixelSize: {
         switch (fontStyle) {
         case FluText.Display:
-            return text.pixelSize * 4
+            return text.pixelSize * 4.857
         case FluText.TitleLarge:
-            return text.pixelSize * 2
+            return text.pixelSize * 2.857
         case FluText.Title:
-            return text.pixelSize * 1.5
+            return text.pixelSize * 2
-        case FluText.Subtitle:
+        case FluText.SubTitle:
-            return text.pixelSize * 0.9
+            return text.pixelSize * 1.428
-        case FluText.BodyLarge:
-            return text.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
         case FluText.Body:
             return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
         case FluText.Caption:
-            return text.pixelSize * 0.8
+            return text.pixelSize * 0.857
         default:
             return text.pixelSize * 1.0
         }

src/controls/FluTextBox.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 
 TextField{
 
@@ -18,13 +18,7 @@ TextField{
         return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     }
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: {
+    selectionColor: FluTheme.primaryColor.lightest
-        if(FluTheme.dark){
-            return FluTheme.primaryColor.lighter
-        }else{
-            return FluTheme.primaryColor.dark
-        }
-    }
     placeholderTextColor: {
         if(disabled){
             return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
@@ -42,10 +36,8 @@ TextField{
             return true
         case FluText.Title:
             return true
-        case FluText.Subtitle:
+        case FluText.SubTitle:
             return true
-        case FluText.BodyLarge:
-            return false
         case FluText.BodyStrong:
             return true
         case FluText.Body:
@@ -59,29 +51,63 @@ TextField{
     font.pixelSize: {
         switch (fontStyle) {
         case FluText.Display:
-            return input.pixelSize * 4
+            return text.pixelSize * 4.857
         case FluText.TitleLarge:
-            return input.pixelSize * 2
+            return text.pixelSize * 2.857
         case FluText.Title:
-            return input.pixelSize * 1.5
+            return text.pixelSize * 2
-        case FluText.Subtitle:
+        case FluText.SubTitle:
-            return input.pixelSize * 0.9
+            return text.pixelSize * 1.428
-        case FluText.BodyLarge:
-            return input.pixelSize * 1.1
-        case FluText.BodyStrong:
-            return input.pixelSize * 1.0
         case FluText.Body:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
         case FluText.Caption:
-            return input.pixelSize * 0.8
+            return text.pixelSize * 0.857
         default:
-            return input.pixelSize * 1.0
+            return text.pixelSize * 1.0
         }
     }
     selectByMouse: true
     background: FluTextBoxBackground{
         inputItem: input
     }
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        onTapped: input.echoMode !== TextInput.Password && menu.popup()
+    }
+    FluMenu{
+        id:menu
+        focus: false
+        FluMenuItem{
+            text: "剪切"
+            visible: input.text !== ""
+            onClicked: {
+                input.cut()
+            }
+        }
+        FluMenuItem{
+            text: "复制"
+            visible: input.selectedText !== ""
+            onClicked: {
+                input.copy()
+            }
+        }
+        FluMenuItem{
+            text: "粘贴"
+            visible: input.canPaste
+            onClicked: {
+                input.paste()
+            }
+        }
+        FluMenuItem{
+            text: "全选"
+            visible: input.text !== ""
+            onClicked: {
+                input.selectAll()
+            }
+        }
+    }
 
 }
 

src/controls/FluTextBoxBackground.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.15
+import QtQuick
-import QtGraphicalEffects 1.15
+import Qt5Compat.GraphicalEffects
 
 Rectangle{
     id:content