update

给FluPaneItemSeparator增加spacing和size属性

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "framelesshelper"]
 	path = framelesshelper
-	url = https://github.com/zhuzichu520/framelesshelper.git
+	url = https://github.com/zhuzichu520/framelesshelper.git
+[submodule "zxing-cpp"]
+	path = zxing-cpp
+	url = https://github.com/zhuzichu520/zxing-cpp.git

CMakeLists.txt

@@ -13,6 +13,7 @@ if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
 endif()
 
 add_subdirectory(src)
+add_subdirectory(zxing-cpp)
 
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)

example/CMakeLists.txt

@@ -27,7 +27,7 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,4,0,0)
+add_definitions(-DVERSION=1,5,0,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick Svg Network)
 

example/qml/component/CodeExpander.qml

@@ -132,7 +132,9 @@ FluExpander{
                     "FluImage",
                     "FluSpinBox",
                     "FluHttp",
-                    "FluWatermark"
+                    "FluWatermark",
+                    "FluTour",
+                    "FluQRCode"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/global/ItemsOriginal.qml

@@ -323,9 +323,26 @@ FluObject{
         }
     }
 
+    FluPaneItemSeparator{
+        spacing:20
+        size:1
+    }
+
     FluPaneItemExpander{
         title:lang.other
         icon:FluentIcons.Shop
+        FluPaneItem{
+            title:"QRCode"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Tour"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
+            }
+        }
         FluPaneItem{
             title:"Http"
             onTap:{

example/qml/page/T_Carousel.qml

@@ -9,6 +9,19 @@ FluScrollablePage{
 
     title:"Carousel"
 
+    ListModel{
+        id:data_model
+        ListElement{
+            url:"qrc:/example/res/image/banner_1.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_2.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_3.jpg"
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         height: 370
@@ -24,23 +37,95 @@ FluScrollablePage{
                 text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
             }
             FluCarousel{
-                id:carousel
+                radius:[5,5,5,5]
+                delegate: Component{
+                    Image {
+                        anchors.fill: parent
+                        source: model.url
+                        asynchronous: true
+                        fillMode:Image.PreserveAspectCrop
+                    }
+                }
                 Layout.topMargin: 20
                 Layout.leftMargin: 5
                 Component.onCompleted: {
-                    carousel.setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
+                    model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
                 }
             }
         }
     }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 340
+        paddings: 10
+        Layout.topMargin: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluCarousel{
+                radius:[15,15,15,15]
+                loopTime:1500
+                indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                indicatorMarginTop:15
+                delegate: Component{
+                    Item{
+                        anchors.fill: parent
+                        Image {
+                            anchors.fill: parent
+                            source: model.url
+                            asynchronous: true
+                            fillMode:Image.PreserveAspectCrop
+                        }
+                        Rectangle{
+                            height: 40
+                            width: parent.width
+                            anchors.bottom: parent.bottom
+                            color: "#33000000"
+                            FluText{
+                                anchors.fill: parent
+                                verticalAlignment: Qt.AlignVCenter
+                                horizontalAlignment: Qt.AlignHCenter
+                                text:model.title
+                                color: FluColors.Grey10
+                                font.pixelSize: 15
+                            }
+                        }
+                    }
+                }
+                Layout.topMargin: 20
+                Layout.leftMargin: 5
+                Component.onCompleted: {
+                    var arr = []
+                    arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                    arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                    arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                    model = arr
+                }
+            }
+        }
+    }
+
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluCarousel{
+    id:carousel
     width: 400
     height: 300
+    delegate: Component{
+        Image {
+            anchors.fill: parent
+            source: model.url
+            asynchronous: true
+            fillMode:Image.PreserveAspectCrop
+        }
+    }
     Component.onCompleted: {
-        setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
+        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
     }
 }'
     }

example/qml/page/T_Http.qml

@@ -102,7 +102,7 @@ FluContentPage{
                     param.custname = "朱子楚"
                     param.custtel = "1234567890"
                     param.custemail = "zhuzichu520@gmail.com"
-                    http.postJson("https://httpbingo.org/post",callable,param)
+//                    http.postJson("https://httpbingo.org/post",callable,param)
                 }
             }
             FluButton{
@@ -125,7 +125,7 @@ FluContentPage{
                         console.debug(status+";"+errorString)
                     }
                     var param = "我命由我不由天"
-                    http.postString("https://httpbingo.org/post",callable,param)
+//                    http.postString("https://httpbingo.org/post",callable,param)
                 }
             }
             FluButton{

example/qml/page/T_QRCode.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import Qt5Compat.GraphicalEffects
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"QRCode"
+
+    FluQRCode{
+        id:qrcode
+        Layout.topMargin: 20
+        size:slider_size.value
+        text:text_box.text
+        color:color_picker.colorValue
+        Layout.preferredWidth: size
+        Layout.preferredHeight: size
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 20
+        FluText{
+            text:"text:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluTextBox{
+            id:text_box
+            text:"会磨刀的小猪"
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text:"color:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+            Component.onCompleted: {
+                setColor(Qt.rgba(0,0,0,1))
+            }
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        FluText{
+            text:"size:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_size
+            from:60
+            to:260
+            value: 120
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        code:'FluQRCode{
+    color:"red"
+    text:"会磨刀的小猪"
+    size:100
+}'
+    }
+
+}

example/qml/page/T_Tour.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Tour"
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
+            {title:"Save",description: "Save your changes.",target:()=>btn_save},
+            {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+        ]
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 130
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluFilledButton{
+            anchors{
+                top: parent.top
+                topMargin: 14
+            }
+            text:"Begin Tour"
+            onClicked: {
+                tour.open()
+            }
+        }
+
+        Row{
+            spacing: 20
+            anchors{
+                top: parent.top
+                topMargin: 60
+            }
+            FluButton{
+                id:btn_upload
+                text:"Upload"
+                onClicked: {
+                    showInfo("Upload")
+                }
+            }
+            FluFilledButton{
+                id:btn_save
+                text:"Save"
+                onClicked: {
+                    showInfo("Save")
+                }
+            }
+            FluIconButton{
+                id:btn_more
+                iconSource: FluentIcons.More
+                onClicked: {
+                    showInfo("More")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluTour{
+    id:tour
+    steps:[
+        {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
+        {title:"Save",description: "Save your changes.",target:()=>btn_save},
+        {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+    ]
+}'
+    }
+
+}

example/qml/window/MainWindow.qml

@@ -27,6 +27,7 @@ CustomWindow {
 
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
+        tour.open()
     }
 
     SystemTrayIcon {
@@ -146,6 +147,7 @@ CustomWindow {
             visible: flipable.flipAngle !== 180
             anchors.fill: flipable
             FluAppBar {
+                id:app_bar_front
                 anchors {
                     top: parent.top
                     left: parent.left
@@ -174,7 +176,8 @@ CustomWindow {
                 title:"FluentUI"
                 onLogoClicked:{
                     clickCount += 1
-                    if(clickCount === 1){
+                    showSuccess("点击%1次".arg(clickCount))
+                    if(clickCount === 5){
                         loader.reload()
                         flipable.flipped = true
                         clickCount = 0
@@ -258,4 +261,20 @@ CustomWindow {
         }
     }
 
+    Shortcut {
+        sequence: "F6"
+        context: Qt.WindowShortcut
+        onActivated: {
+            tour.open()
+        }
+    }
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
+            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
+        ]
+    }
+
 }

src/CMakeLists.txt

@@ -12,7 +12,7 @@ if(APPLE)
 endif()
 
 #设置版本号
-add_definitions(-DVERSION=1,4,0,0)
+add_definitions(-DVERSION=1,5,0,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
 
@@ -83,6 +83,7 @@ target_link_libraries(${PROJECT_NAME} PUBLIC
     Qt::CorePrivate
     Qt::QuickPrivate
     Qt::QmlPrivate
+    ZXing
 )
 
 #安装

src/FluHttp.cpp

@@ -32,8 +32,8 @@ void FluHttp::handleReply(QNetworkReply* reply){
     _cache.append(reply);
 }
 
-void FluHttp::post(QString url,QJSValue callable,QVariantMap params,QVariantMap headers){
-    QVariantMap data = invokeIntercept(params,headers,"post").toMap();
+void FluHttp::post(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"post").toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
         for (int i = 0; i < retry(); ++i) {
@@ -82,8 +82,8 @@ void FluHttp::post(QString url,QJSValue callable,QVariantMap params,QVariantMap
     });
 }
 
-void FluHttp::postString(QString url,QJSValue callable,QString params,QVariantMap headers){
-    QVariantMap data = invokeIntercept(params,headers,"postString").toMap();
+void FluHttp::postString(QString url,QJSValue callable,QString params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"postString").toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
         for (int i = 0; i < retry(); ++i) {
@@ -121,8 +121,8 @@ void FluHttp::postString(QString url,QJSValue callable,QString params,QVariantMa
     });
 }
 
-void FluHttp::postJson(QString url,QJSValue callable,QVariantMap params,QVariantMap headers){
-    QVariantMap data = invokeIntercept(params,headers,"postJson").toMap();
+void FluHttp::postJson(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"postJson").toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
         for (int i = 0; i < retry(); ++i) {
@@ -160,8 +160,8 @@ void FluHttp::postJson(QString url,QJSValue callable,QVariantMap params,QVariant
     });
 }
 
-void FluHttp::get(QString url,QJSValue callable,QVariantMap params,QVariantMap headers){
-    QVariantMap data = invokeIntercept(params,headers,"get").toMap();
+void FluHttp::get(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"get").toMap();
     QThreadPool::globalInstance()->start([=](){
         for (int i = 0; i < retry(); ++i) {
             onStart(callable);
@@ -198,8 +198,8 @@ void FluHttp::get(QString url,QJSValue callable,QVariantMap params,QVariantMap h
     });
 }
 
-void FluHttp::download(QString url,QJSValue callable,QString filePath,QVariantMap params,QVariantMap headers){
-    QVariantMap data = invokeIntercept(params,headers,"download").toMap();
+void FluHttp::download(QString url,QJSValue callable,QString filePath,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
+    QMap<QString, QVariant> data = invokeIntercept(params,headers,"download").toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
         QNetworkAccessManager manager;
@@ -239,7 +239,7 @@ void FluHttp::download(QString url,QJSValue callable,QString filePath,QVariantMa
 }
 
 QVariant FluHttp::invokeIntercept(const QVariant& params,const QVariant& headers,const QString& method){
-    QVariantMap requet = {
+    QMap<QString, QVariant> requet = {
         {"params",params},
         {"headers",headers},
         {"method",method}

src/FluHttp.h

@@ -26,11 +26,12 @@ private:
 public:
     explicit FluHttp(QObject *parent = nullptr);
     ~FluHttp();
-    Q_INVOKABLE void get(QString url,QJSValue callable,QVariantMap params = {},QVariantMap headers = {});
-    Q_INVOKABLE void post(QString url,QJSValue callable,QVariantMap params = {},QVariantMap headers = {});
-    Q_INVOKABLE void postString(QString url,QJSValue callable,QString params = "",QVariantMap headers = {});
-    Q_INVOKABLE void postJson(QString url,QJSValue callable,QVariantMap params = {},QVariantMap headers = {});
-    Q_INVOKABLE void download(QString url,QJSValue callable,QString filePath,QVariantMap params = {},QVariantMap headers = {});
+    //神坑！！！ 如果参数使用QVariantMap会有问题，在6.4.3版本中QML一调用就会编译失败。所以改用QMap<QString, QVariant>
+    Q_INVOKABLE void get(QString url,QJSValue callable,QMap<QString, QVariant> = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void post(QString url,QJSValue callable,QMap<QString, QVariant> = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void postString(QString url,QJSValue callable,QString params = "",QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void postJson(QString url,QJSValue callable,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE void download(QString url,QJSValue callable,QString filePath,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
     Q_INVOKABLE void cancel();
 private:
     QList<QPointer<QNetworkReply>> _cache;

src/FluQRCode.cpp

@@ -0,0 +1,53 @@
+#include "FluQRCode.h"
+
+#include "BarcodeFormat.h"
+#include "BitMatrix.h"
+#include "MultiFormatWriter.h"
+
+using namespace ZXing;
+
+FluQRCode::FluQRCode(QQuickItem* parent) : QQuickPaintedItem(parent)
+{
+    color(QColor(0,0,0,255));
+    size(100);
+    setWidth(_size);
+    setHeight(_size);
+    connect(this,&FluQRCode::textChanged,this,[=]{update();});
+    connect(this,&FluQRCode::colorChanged,this,[=]{update();});
+    connect(this,&FluQRCode::sizeChanged,this,[=]{
+        setWidth(_size);
+        setHeight(_size);
+        update();
+    });
+}
+
+
+void FluQRCode::paint(QPainter* painter)
+{
+    if(_text.isEmpty()){
+        return;
+    }
+    if(_text.length()>1108){
+        return;
+    }
+    painter->save();
+    painter->eraseRect(boundingRect());
+    auto format = ZXing::BarcodeFormatFromString("QRCode");
+    auto writer = MultiFormatWriter(format);
+    writer.setMargin(0);
+    writer.setEncoding(ZXing::CharacterSet::UTF8);
+    auto matrix = writer.encode(_text.toUtf8().constData(), 0, 0);
+    auto bitmap = ToMatrix<uint8_t>(matrix);
+    auto image = QImage(bitmap.data(), bitmap.width(), bitmap.height(), bitmap.width(), QImage::Format::Format_Grayscale8).copy();
+    QImage rgbImage = image.convertToFormat(QImage::Format_ARGB32);
+    for (int y = 0; y < rgbImage.height(); ++y) {
+        for (int x = 0; x < rgbImage.width(); ++x) {
+            QRgb pixel = rgbImage.pixel(x, y);
+            if (qRed(pixel) == 0 && qGreen(pixel) == 0 && qBlue(pixel) == 0) {
+                rgbImage.setPixelColor(x, y, _color);
+            }
+        }
+    }
+    painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), rgbImage);
+    painter->restore();
+}

src/FluQRCode.h

@@ -0,0 +1,22 @@
+#ifndef FLUQRCODE_H
+#define FLUQRCODE_H
+
+#include <QQuickItem>
+#include <QQuickPaintedItem>
+#include <QPainter>
+#include "stdafx.h"
+
+class FluQRCode : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,text)
+    Q_PROPERTY_AUTO(QColor,color)
+    Q_PROPERTY_AUTO(int,size);
+    QML_NAMED_ELEMENT(FluQRCode)
+public:
+    explicit FluQRCode(QQuickItem *parent = nullptr);
+    void paint(QPainter* painter) override;
+
+};
+
+#endif // FLUQRCODE_H

src/imports/FluentUI/Controls/FluCarousel.qml

@@ -2,102 +2,170 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-Item {
-    property bool flagXChanged: true
-    property int radius : 5
+FluItem {
     property int loopTime: 2000
+    property var model
+    property Component delegate
     property bool showIndicator: true
+    property int indicatorGravity : Qt.AlignBottom | Qt.AlignHCenter
+    property int indicatorMarginLeft: 0
+    property int indicatorMarginRight: 0
+    property int indicatorMarginTop: 0
+    property int indicatorMarginBottom: 20
+    property int indicatorSpacing: 10
+    property alias indicatorAnchors: layout_indicator.anchors
+    property Component indicatorDelegate : com_indicator
     id:control
     width: 400
     height: 300
     ListModel{
         id:content_model
     }
-    FluRectangle{
-        anchors.fill: parent
-        radius: [control.radius,control.radius,control.radius,control.radius]
-        FluShadow{
-            radius:control.radius
+    QtObject{
+        id:d
+        property bool flagXChanged: true
+        function setData(data){
+            if(!data){
+                return
+            }
+            content_model.clear()
+            content_model.append(data[data.length-1])
+            content_model.append(data)
+            content_model.append(data[0])
+            list_view.highlightMoveDuration = 0
+            list_view.currentIndex = 1
+            list_view.highlightMoveDuration = 250
+            timer_run.restart()
         }
-        ListView{
-            id:list_view
-            anchors.fill: parent
-            snapMode: ListView.SnapOneItem
-            clip: true
-            boundsBehavior: ListView.StopAtBounds
-            model:content_model
-            maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
-            preferredHighlightBegin: 0
-            preferredHighlightEnd: 0
-            highlightMoveDuration: 0
-            orientation : ListView.Horizontal
-            delegate: Item{
-                width: ListView.view.width
-                height: ListView.view.height
-                property int displayIndex: {
-                    if(index === 0)
-                        return content_model.count-3
-                    if(index === content_model.count-1)
-                        return 0
-                    return index-1
-                }
-                Image {
-                    anchors.fill: parent
-                    source: model.url
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
+    }
+    ListView{
+        id:list_view
+        anchors.fill: parent
+        snapMode: ListView.SnapOneItem
+        clip: true
+        boundsBehavior: ListView.StopAtBounds
+        model:content_model
+        maximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: 0
+        highlightMoveDuration: 0
+        Component.onCompleted: {
+            d.setData(control.model)
+        }
+        Connections{
+            target: control
+            function onModelChanged(){
+                d.setData(control.model)
             }
-            onMovementEnded:{
-                currentIndex = list_view.contentX/list_view.width
-                if(currentIndex === 0){
-                    currentIndex = list_view.count-2
-                }else if(currentIndex === list_view.count-1){
-                    currentIndex = 1
-                }
-                flagXChanged = false
-                timer_run.start()
+        }
+        orientation : ListView.Horizontal
+        delegate: Item{
+            id:item_control
+            width: ListView.view.width
+            height: ListView.view.height
+            property int displayIndex: {
+                if(index === 0)
+                    return content_model.count-3
+                if(index === content_model.count-1)
+                    return 0
+                return index-1
             }
-            onMovementStarted: {
-                flagXChanged = true
-                timer_run.stop()
-            }
-            onContentXChanged: {
-                if(flagXChanged){
-                    var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
-                    var minY = Math.max(0,(list_view.width*(currentIndex-1)))
-                    if(contentX>=maxX){
-                        contentX = maxX
-                    }
-                    if(contentX<=minY){
-                        contentX = minY
+            Loader{
+                property int displayIndex : item_control.displayIndex
+                property var model: list_view.model.get(index)
+                anchors.fill: parent
+                sourceComponent: {
+                    if(model){
+                        return control.delegate
                     }
+                    return undefined
+                }
+            }
+        }
+        onMovementEnded:{
+            currentIndex = list_view.contentX/list_view.width
+            if(currentIndex === 0){
+                currentIndex = list_view.count-2
+            }else if(currentIndex === list_view.count-1){
+                currentIndex = 1
+            }
+            d.flagXChanged = false
+            timer_run.restart()
+        }
+        onMovementStarted: {
+            d.flagXChanged = true
+            timer_run.stop()
+        }
+        onContentXChanged: {
+            if(d.flagXChanged){
+                var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
+                var minY = Math.max(0,(list_view.width*(currentIndex-1)))
+                if(contentX>=maxX){
+                    contentX = maxX
+                }
+                if(contentX<=minY){
+                    contentX = minY
+                }
+            }
+        }
+    }
+    Component{
+        id:com_indicator
+        Rectangle{
+            width:  8
+            height: 8
+            radius: 4
+            FluShadow{
+                radius: 4
+            }
+            scale: checked ? 1.2 : 1
+            color: checked ?  FluTheme.primaryColor.dark : Qt.rgba(1,1,1,0.7)
+            border.width: mouse_item.containsMouse ? 1 : 0
+            border.color: FluTheme.primaryColor.dark
+            MouseArea{
+                id:mouse_item
+                hoverEnabled: true
+                anchors.fill: parent
+                onClicked: {
+                    changedIndex(realIndex)
                 }
             }
         }
     }
     Row{
-        spacing: 10
+        id:layout_indicator
+        spacing: control.indicatorSpacing
         anchors{
-            horizontalCenter: parent.horizontalCenter
-            bottom: parent.bottom
-            bottomMargin: 20
+            horizontalCenter:(indicatorGravity & Qt.AlignHCenter) ? parent.horizontalCenter : undefined
+            verticalCenter: (indicatorGravity & Qt.AlignVCenter) ? parent.verticalCenter : undefined
+            bottom: (indicatorGravity & Qt.AlignBottom) ? parent.bottom : undefined
+            top: (indicatorGravity & Qt.AlignTop) ? parent.top : undefined
+            left: (indicatorGravity & Qt.AlignLeft) ? parent.left : undefined
+            right: (indicatorGravity & Qt.AlignRight) ? parent.right : undefined
+            bottomMargin: control.indicatorMarginBottom
+            leftMargin: control.indicatorMarginBottom
+            rightMargin: control.indicatorMarginBottom
+            topMargin: control.indicatorMarginBottom
         }
         visible: showIndicator
         Repeater{
+            id:repeater_indicator
             model: list_view.count
-            Rectangle{
-                width: 8
-                height: 8
-                radius: 4
-                visible: {
-                    if(index===0 || index===list_view.count-1)
-                        return false
-                    return true
+            Loader{
+                property int displayIndex: {
+                    if(index === 0)
+                        return list_view.count-3
+                    if(index === list_view.count-1)
+                        return 0
+                    return index-1
+                }
+                property int realIndex: index
+                property bool checked: list_view.currentIndex === index
+                sourceComponent: {
+                    if(index===0 || index===list_view.count-1)
+                        return undefined
+                    return control.indicatorDelegate
                 }
-                border.width: 1
-                border.color: FluColors.Grey100
-                color:   list_view.currentIndex === index ?  FluTheme.primaryColor.dark : Qt.rgba(1,1,1,0.5)
             }
         }
     }
@@ -121,12 +189,13 @@ Item {
             timer_anim.start()
         }
     }
-    function setData(data){
-        content_model.clear()
-        content_model.append(data[data.length-1])
-        content_model.append(data)
-        content_model.append(data[0])
-        list_view.currentIndex = 1
+
+    function changedIndex(index){
+        d.flagXChanged = true
+        timer_run.stop()
+         list_view.currentIndex = index
+        d.flagXChanged = false
         timer_run.restart()
     }
+
 }

src/imports/FluentUI/Controls/FluDivider.qml

@@ -3,5 +3,16 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-   color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
+    property real spacing
+    property alias separatorHeight:separator.height
+
+    id:root
+    color:Qt.rgba(0,0,0,0)
+    height: spacing*2+separator.height
+    Rectangle{
+        id:separator
+         color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
+         width:parent.width
+         anchors.centerIn: parent
+    }
 }

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -18,7 +18,7 @@ Item {
     property int pageMode: FluNavigationViewType.Stack
     signal logoClicked
     id:control
-    QtObject{
+    Item{
         id:d
         property bool animDisabled:false
         property var stackItems: []
@@ -66,6 +66,10 @@ Item {
             }
             return data
         }
+        function refreshWindow(){
+            Window.window.width = Window.window.width-1
+            Window.window.width = Window.window.width+1
+        }
     }
     Component.onCompleted: {
         d.displayMode = Qt.binding(function(){
@@ -110,11 +114,12 @@ Item {
         id:com_panel_item_separatorr
         FluDivider{
             width: layout_list.width
-            height: {
+            spacing: model.spacing
+            separatorHeight: {
                 if(model.parent){
-                    return model.parent.isExpand ? 1 : 0
+                    return model.parent.isExpand ? model.size : 0
                 }
-                return 1
+                return model.size
             }
         }
     }
@@ -708,6 +713,11 @@ Item {
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
+                onRunningChanged: {
+                    if(!running){
+                        d.refreshWindow()
+                    }
+                }
             }
         }
         Behavior on x {
@@ -715,6 +725,11 @@ Item {
             NumberAnimation{
                 duration: 167
                 easing.type: Easing.OutCubic
+                onRunningChanged: {
+                    if(!running){
+                        d.refreshWindow()
+                    }
+                }
             }
         }
         visible: {
@@ -1109,4 +1124,7 @@ Item {
     function navButton(){
         return btn_nav
     }
+    function logoButton(){
+        return image_logo
+    }
 }

src/imports/FluentUI/Controls/FluPaneItemSeparator.qml

@@ -6,4 +6,6 @@ QtObject {
     readonly property string key : FluTools.uuid()
     property int _idx
     property var parent
+    property real spacing
+    property int size:1
 }

src/imports/FluentUI/Controls/FluRectangle.qml

@@ -40,27 +40,27 @@ Item{
         anchors.fill: parent
         visible: false
         onPaint: {
-            var ctx = getContext("2d");
-            var x = 0;
-            var y = 0;
-            var w = control.width;
-            var h = control.height;
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.save();
+            var ctx = getContext("2d")
+            var x = 0
+            var y = 0
+            var w = control.width
+            var h = control.height
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            ctx.save()
             ctx.beginPath();
-            ctx.moveTo(x + radius[0], y);
-            ctx.lineTo(x + w - radius[1], y);
-            ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
-            ctx.lineTo(x + w, y + h - radius[2]);
-            ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
-            ctx.lineTo(x + radius[3], y + h);
-            ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
-            ctx.lineTo(x, y + radius[0]);
-            ctx.arcTo(x, y, x + radius[0], y, radius[0]);
-            ctx.closePath();
-            ctx.fillStyle = control.color;
-            ctx.fill();
-            ctx.restore();
+            ctx.moveTo(x + radius[0], y)
+            ctx.lineTo(x + w - radius[1], y)
+            ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1])
+            ctx.lineTo(x + w, y + h - radius[2])
+            ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2])
+            ctx.lineTo(x + radius[3], y + h)
+            ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3])
+            ctx.lineTo(x, y + radius[0])
+            ctx.arcTo(x, y, x + radius[0], y, radius[0])
+            ctx.closePath()
+            ctx.fillStyle = "#000000"
+            ctx.fill()
+            ctx.restore()
         }
     }
     OpacityMask {

src/imports/FluentUI/Controls/FluTour.qml

@@ -0,0 +1,178 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Shapes
+import QtQuick.Window
+import FluentUI
+
+Popup{
+    property var steps : []
+    property int targetMargins: 5
+    property Component nextButton: com_next_button
+    property Component prevButton: com_prev_button
+    property int index : 0
+    id:control
+    padding: 0
+    anchors.centerIn: Overlay.overlay
+    width: d.window?.width
+    height: d.window?.height
+    background: Item{}
+    contentItem: Item{}
+    onVisibleChanged: {
+        if(visible){
+            control.index = 0
+        }
+    }
+    onIndexChanged: {
+        canvas.requestPaint()
+    }
+    Component{
+        id:com_next_button
+        FluFilledButton{
+            text: isEnd ? "结束导览" :"下一步"
+            onClicked: {
+                if(isEnd){
+                    control.close()
+                }else{
+                    control.index = control.index + 1
+                }
+            }
+        }
+    }
+    Component{
+        id:com_prev_button
+        FluButton{
+            text: "上一步"
+            onClicked: {
+                control.index = control.index - 1
+            }
+        }
+    }
+    Item{
+        id:d
+        property var window: Window.window
+        property var pos:Qt.point(0,0)
+        property var step : steps[index]
+        property var target : step.target()
+    }
+    Connections{
+        target: d.window
+        function onWidthChanged(){
+            canvas.requestPaint()
+        }
+        function onHeightChanged(){
+            canvas.requestPaint()
+        }
+    }
+    Canvas{
+        id:canvas
+        anchors.fill: parent
+        onPaint: {
+            d.pos = d.target.mapToGlobal(0,0)
+            d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
+            var ctx = canvas.getContext("2d")
+            ctx.clearRect(0, 0, canvasSize.width, canvasSize.height)
+            ctx.save()
+            ctx.fillStyle = "#88000000"
+            ctx.fillRect(0, 0, canvasSize.width, canvasSize.height)
+            ctx.globalCompositeOperation = 'destination-out'
+            ctx.fillStyle = 'black'
+            drawRoundedRect(Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2),2,ctx)
+            ctx.restore()
+        }
+        function drawRoundedRect(rect, r, ctx) {
+            var ptA = Qt.point(rect.x + r, rect.y)
+            var ptB = Qt.point(rect.x + rect.width, rect.y)
+            var ptC = Qt.point(rect.x + rect.width, rect.y + rect.height)
+            var ptD = Qt.point(rect.x, rect.y + rect.height)
+            var ptE = Qt.point(rect.x, rect.y)
+            ctx.beginPath()
+            ctx.moveTo(ptA.x, ptA.y)
+            ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r)
+            ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r)
+            ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r)
+            ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r)
+            ctx.fill()
+            ctx.closePath()
+        }
+    }
+    FluArea{
+        id:layout_panne
+        radius: 5
+        width: 500
+        height: 88 + text_desc.height
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        x: Math.min(Math.max(0,d.pos.x+d.target.width/2-width/2),d.window?.width-width)
+        y: d.pos.y+d.target.height+control.targetMargins + 15
+        border.width: 0
+        FluText{
+            text: d.step.title
+            font: FluTextStyle.BodyStrong
+            elide: Text.ElideRight
+            anchors{
+                top: parent.top
+                left: parent.left
+                topMargin: 15
+                leftMargin: 15
+                right: parent.right
+                rightMargin: 32
+            }
+        }
+        FluText{
+            id:text_desc
+            font: FluTextStyle.Body
+            wrapMode: Text.WrapAnywhere
+            maximumLineCount: 4
+            elide: Text.ElideRight
+            text: d.step.description
+            anchors{
+                top: parent.top
+                left: parent.left
+                right: parent.right
+                rightMargin: 15
+                topMargin: 42
+                leftMargin: 15
+            }
+        }
+        Loader{
+            id:loader_next
+            property bool isEnd: control.index === steps.length-1
+            sourceComponent: com_next_button
+            anchors{
+                top:text_desc.bottom
+                topMargin: 10
+                right: parent.right
+                rightMargin: 15
+            }
+        }
+        Loader{
+            id:loader_prev
+            visible: control.index !== 0
+            sourceComponent: com_prev_button
+            anchors{
+                right:loader_next.left
+                top: loader_next.top
+                rightMargin: 14
+            }
+        }
+        FluIconButton{
+            anchors{
+                right: parent.right
+                top: parent.top
+                margins: 10
+            }
+            width: 26
+            height: 26
+            iconSize: 12
+            iconSource : FluentIcons.ChromeClose
+            onClicked: {
+                control.close()
+            }
+        }
+    }
+    FluIcon{
+        iconSource: FluentIcons.FlickDown
+        color: layout_panne.color
+        x: d.pos.x+d.target.width/2-10
+        y: d.pos.y+d.target.height
+    }
+}

src/imports/FluentUI/qmldir

@@ -1,11 +1,10 @@
-module FluentUI
+module FluentUI
 classname FluentUIPlugin
-designersupported
 typeinfo plugins.qmltypes
 
+FluAcrylic 1.0 Controls/FluAcrylic.qml
 FluAppBar 1.0 Controls/FluAppBar.qml
 FluArea 1.0 Controls/FluArea.qml
-FluAcrylic 1.0 Controls/FluAcrylic.qml
 FluAutoSuggestBox 1.0 Controls/FluAutoSuggestBox.qml
 FluBadge 1.0 Controls/FluBadge.qml
 FluBreadcrumbBar 1.0 Controls/FluBreadcrumbBar.qml
@@ -17,9 +16,9 @@ FluCheckBox 1.0 Controls/FluCheckBox.qml
 FluColorPicker 1.0 Controls/FluColorPicker.qml
 FluColorView 1.0 Controls/FluColorView.qml
 FluComboBox 1.0 Controls/FluComboBox.qml
-FluControl 1.0 Controls/FluControl.qml
 FluContentDialog 1.0 Controls/FluContentDialog.qml
 FluContentPage 1.0 Controls/FluContentPage.qml
+FluControl 1.0 Controls/FluControl.qml
 FluCopyableText 1.0 Controls/FluCopyableText.qml
 FluDatePicker 1.0 Controls/FluDatePicker.qml
 FluDivider 1.0 Controls/FluDivider.qml
@@ -30,15 +29,15 @@ FluFlipView 1.0 Controls/FluFlipView.qml
 FluFocusRectangle 1.0 Controls/FluFocusRectangle.qml
 FluIcon 1.0 Controls/FluIcon.qml
 FluIconButton 1.0 Controls/FluIconButton.qml
+FluImage 1.0 Controls/FluImage.qml
 FluInfoBar 1.0 Controls/FluInfoBar.qml
 FluItem 1.0 Controls/FluItem.qml
-FluImage 1.0 Controls/FluImage.qml
-FluMediaPlayer 1.0 Controls/FluMediaPlayer.qml
+FluItemDelegate 1.0 Controls/FluItemDelegate.qml
 FluMenu 1.0 Controls/FluMenu.qml
-FluMenuItem 1.0 Controls/FluMenuItem.qml
-FluMenuSeparator 1.0 Controls/FluMenuSeparator.qml
 FluMenuBar 1.0 Controls/FluMenuBar.qml
 FluMenuBarItem 1.0 Controls/FluMenuBarItem.qml
+FluMenuItem 1.0 Controls/FluMenuItem.qml
+FluMenuSeparator 1.0 Controls/FluMenuSeparator.qml
 FluMultilineTextBox 1.0 Controls/FluMultilineTextBox.qml
 FluNavigationView 1.0 Controls/FluNavigationView.qml
 FluObject 1.0 Controls/FluObject.qml
@@ -60,14 +59,16 @@ FluRadioButtons 1.0 Controls/FluRadioButtons.qml
 FluRatingControl 1.0 Controls/FluRatingControl.qml
 FluRectangle 1.0 Controls/FluRectangle.qml
 FluRemoteLoader 1.0 Controls/FluRemoteLoader.qml
-FluScrollablePage 1.0 Controls/FluScrollablePage.qml
 FluScrollBar 1.0 Controls/FluScrollBar.qml
+FluScrollIndicator 1.0 Controls/FluScrollIndicator.qml
+FluScrollablePage 1.0 Controls/FluScrollablePage.qml
 FluShadow 1.0 Controls/FluShadow.qml
 FluSlider 1.0 Controls/FluSlider.qml
 FluSpinBox 1.0 Controls/FluSpinBox.qml
 FluStatusView 1.0 Controls/FluStatusView.qml
-FluTableView 1.0 Controls/FluTableView.qml
 FluTabView 1.0 Controls/FluTabView.qml
+FluTableModelColumn 1.0 Controls/FluTableModelColumn.qml
+FluTableView 1.0 Controls/FluTableView.qml
 FluText 1.0 Controls/FluText.qml
 FluTextBox 1.0 Controls/FluTextBox.qml
 FluTextBoxBackground 1.0 Controls/FluTextBoxBackground.qml
@@ -77,7 +78,7 @@ FluTimePicker 1.0 Controls/FluTimePicker.qml
 FluToggleButton 1.0 Controls/FluToggleButton.qml
 FluToggleSwitch 1.0 Controls/FluToggleSwitch.qml
 FluTooltip 1.0 Controls/FluTooltip.qml
+FluTour 1.0 Controls/FluTour.qml
 FluTreeView 1.0 Controls/FluTreeView.qml
 FluWindow 1.0 Controls/FluWindow.qml
-FluSingleton 1.0 Controls/FluSingleton.qml
 plugin fluentuiplugin