update

example/CMakeLists.txt

@@ -43,15 +43,15 @@ qt_add_resources(QT_RESOURCES ${RESOURCES})
 add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS} ${QT_RESOURCES} ${RC_ICONS})
 
 if(WIN32)
-    if(platform EQUAL 32)
-        file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/Win_x86/*.dll)
+    if(CMAKE_C_COMPILER_ID STREQUAL "MSVC")
+        file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/msvc/*.dll)
         add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
             COMMAND ${CMAKE_COMMAND} -E copy
             ${DLL_FILES}
             ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
         )
     else()
-        file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/Win_x64/*.dll)
+        file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/mingw/*.dll)
         add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
             COMMAND ${CMAKE_COMMAND} -E copy
             ${DLL_FILES}

example/T_Buttons.qml

@@ -141,6 +141,47 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluToggleButton{
+            disabled:toggle_button_switch.selected
+            text:"Toggle Button"
+            onClicked: {
+               selected = !selected
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:toggle_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluToggleButton{
+    text:"Toggle Button"
+    onClicked: {
+        selected = !selected
+    }
+}'
+    }
+
 
     FluArea{
         Layout.fillWidth: true

example/T_TableView.qml

@@ -0,0 +1,110 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"TableView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    Component.onCompleted: {
+        const columns = [
+                          {
+                              title: '姓名',
+                              dataIndex: 'name',
+                              width:100
+                          },
+                          {
+                              title: '年龄',
+                              dataIndex: 'age',
+                              width:100
+                          },
+                          {
+                              title: '住址',
+                              dataIndex: 'address',
+                              width:200
+                          },
+                          {
+                              title: '别名',
+                              dataIndex: 'nickname',
+                              width:100
+                          },
+                          {
+                              title: '操作',
+                              dataIndex: 'action',
+                              width:100
+                          },
+                      ];
+        table_view.columns = columns
+        loadData(1,10)
+    }
+
+
+    FluTableView{
+        id:table_view
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        width:parent.width
+        pageCurrent:1
+        pageCount:10
+        itemCount: 1000
+        onRequestPage:
+            (page,count)=> {
+                loadData(page,count)
+            }
+    }
+
+    Component{
+        id:com_action
+        Item{
+            Row{
+                anchors.centerIn: parent
+                spacing: 10
+                FluFilledButton{
+                    text:"编辑"
+                    topPadding:3
+                    bottomPadding:3
+                    leftPadding:3
+                    rightPadding:3
+                    onClicked:{
+                        console.debug(dataModel.index)
+                        showSuccess(JSON.stringify(dataObject))
+                    }
+                }
+                FluFilledButton{
+                    text:"删除"
+                    topPadding:3
+                    bottomPadding:3
+                    leftPadding:3
+                    rightPadding:3
+                    onClicked:{
+                        showError(JSON.stringify(dataObject))
+                    }
+                }
+            }
+        }
+    }
+
+    function loadData(page,count){
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                name: "孙悟空%1".arg(((page-1)*count+i)),
+                                age: 500,
+                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
+                                nickname: "齐天大圣",
+                                action:com_action
+                            })
+        }
+
+        table_view.dataSource = dataSource
+    }
+
+
+}

example/component/CodeExpander.qml

@@ -15,8 +15,9 @@ FluExpander{
         id:content
         width:parent.width
         readOnly:true
-        text:code
+        text:highlightQmlCode(code)
         focus:false
+        textFormat: FluMultilineTextBox.RichText
         KeyNavigation.priority: KeyNavigation.BeforeItem
         background:Rectangle{
             radius: 4
@@ -40,4 +41,85 @@ FluExpander{
         }
     }
 
+    function htmlEncode(e){
+      var i,s;
+      for(i in s={
+        "&":/&/g,//""//":/"/g,"'":/'/g,
+        "<":/</g,">":/>/g,"<br/>":/\n/g,
+        " ":/ /g,"  ":/\t/g
+      })e=e.replace(s[i],i);
+      return e;
+    }
+
+    function highlightQmlCode(code) {
+      // 定义 QML 关键字列表
+      var qmlKeywords = [
+        "FluTextButton",
+        "FluAppBar",
+          "FluAutoSuggestBox",
+          "FluBadge",
+          "FluButton",
+          "FluCalendarPicker",
+          "FluCalendarView",
+          "FluCarousel",
+          "FluCheckBox",
+          "FluColorPicker",
+          "FluColorView",
+          "FluComboBox",
+          "FluContentDialog",
+          "FluContentPage",
+          "FluControl",
+          "FluDatePicker",
+          "FluDivider",
+          "FluDropDownButton",
+          "FluExpander",
+          "FluFilledButton",
+          "FluFlipView",
+          "FluFocusRectangle",
+          "FluIcon",
+          "FluIconButton",
+          "FluInfoBar",
+          "FluItem",
+          "FluMediaPlayer",
+          "FluMenu",
+          "FluMenuItem",
+          "FluMultilineTextBox",
+          "FluNavigationView",
+          "FluObject",
+          "FluPaneItem",
+          "FluPaneItemExpander",
+          "FluPaneItemHeader",
+          "FluPaneItemSeparator",
+          "FluPivot",
+          "FluPivotItem",
+          "FluProgressBar",
+          "FluProgressRing",
+          "FluRadioButton",
+          "FluRectangle",
+          "FluScrollablePage",
+          "FluScrollBar",
+          "FluShadow",
+          "FluSlider",
+          "FluTabView",
+          "FluText",
+          "FluTextArea",
+          "FluTextBox",
+          "FluTextBoxBackground",
+          "FluTextBoxMenu",
+          "FluTextButton",
+          "FluTextFiled",
+          "FluTimePicker",
+          "FluToggleSwitch",
+          "FluTooltip",
+          "FluTreeView",
+          "FluWindow",
+          "FluWindowResize"
+      ];
+      code = code.replace(/\n/g, "<br>");
+      code = code.replace(/ /g, "&nbsp;");
+      return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
+    }
+
+
+
 }

example/example.pro

@@ -23,13 +23,15 @@ CONFIG(debug,debug|release) {
 }
 
 win32 {
-contains(QT_ARCH, i386) {
-    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/Win_x86/*.dll) $$DESTDIR
+
+contains(QMAKE_CC, cl) {
+    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/msvc/*.dll) $$DESTDIR
     QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
 } else {
-    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/Win_x64/*.dll) $$DESTDIR
+    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/mingw/*.dll) $$DESTDIR
     QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
 }
+
 }
 
 qnx: target.path = /tmp/$${TARGET}/bin

example/global/ItemsOriginal.qml

@@ -184,6 +184,16 @@ FluObject{
                 navigationView.push("qrc:/T_TreeView.qml")
             }
         }
+        FluPaneItem{
+            title:"TableView"
+            image:"qrc:/res/image/control/DataGrid.png"
+            recentlyAdded:true
+            order:4
+            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
+            onTap:{
+                navigationView.push("qrc:/T_TableView.qml")
+            }
+        }
         FluPaneItem{
             title:"MultiWindow"
             onTap:{

example/page/AboutPage.qml

@@ -36,7 +36,7 @@ FluWindow {
                 fontStyle: FluText.Title
             }
             FluText{
-                text:"v1.2.0"
+                text:"v1.2.1"
                 fontStyle: FluText.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/qml.qrc

@@ -156,5 +156,6 @@
         <file>T_FlipView.qml</file>
         <file>T_Pivot.qml</file>
         <file>component/CodeExpander.qml</file>
+        <file>T_TableView.qml</file>
     </qresource>
 </RCC>

src/Fluent.cpp

@@ -33,6 +33,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/FluToggleButton.qml"),uri,major,minor,"FluToggleButton");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTableView.qml"),uri,major,minor,"FluTableView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivotItem.qml"),uri,major,minor,"FluPivotItem");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivot.qml"),uri,major,minor,"FluPivot");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView");

src/controls/FluButton.qml

@@ -43,11 +43,17 @@ FluControl {
                 if(disabled){
                     return Qt.rgba(131/255,131/255,131/255,1)
                 }
+                if(pressed){
+                    return Qt.rgba(162/255,162/255,162/255,1)
+                }
                 return Qt.rgba(1,1,1,1)
             }else{
                 if(disabled){
                     return Qt.rgba(160/255,160/255,160/255,1)
                 }
+                if(pressed){
+                    return Qt.rgba(96/255,96/255,96/255,1)
+                }
                 return Qt.rgba(0,0,0,1)
             }
         }

src/controls/FluCheckBox.qml

@@ -12,10 +12,13 @@ FluControl {
     property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
     property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
+
     property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
     property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
-    property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
+    property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.15) : Qt.lighter(selectedColor,1.15)
+    property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3)
     property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
 
@@ -52,6 +55,9 @@ FluControl {
                 if(selected){
                     return borderSelectedColor
                 }
+                if(pressed){
+                    return borderPressedColor
+                }
                 if(hovered){
                     return borderHoverColor
                 }
@@ -63,6 +69,9 @@ FluControl {
                     if(disabled){
                         return selectedDisableColor
                     }
+                    if(pressed){
+                        return selectedPreesedColor
+                    }
                     if(hovered){
                         return selectedHoverColor
                     }

src/controls/FluDropDownButton.qml

@@ -58,11 +58,17 @@ FluControl {
                 if(disabled){
                     return Qt.rgba(131/255,131/255,131/255,1)
                 }
+                if(pressed){
+                    return Qt.rgba(162/255,162/255,162/255,1)
+                }
                 return Qt.rgba(1,1,1,1)
             }else{
                 if(disabled){
                     return Qt.rgba(160/255,160/255,160/255,1)
                 }
+                if(pressed){
+                    return Qt.rgba(96/255,96/255,96/255,1)
+                }
                 return Qt.rgba(0,0,0,1)
             }
         }

src/controls/FluFilledButton.qml

@@ -8,6 +8,7 @@ FluControl {
     property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
     property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
 
     id: control
     enabled: !disabled
@@ -27,6 +28,9 @@ FluControl {
             if(disabled){
                 return disableColor
             }
+            if(pressed){
+                return pressedColor
+            }
             return hovered ? hoverColor :normalColor
         }
     }

src/controls/FluIconButton.qml

@@ -9,12 +9,16 @@ FluControl {
     property bool disabled: false
     property int radius:4
     property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
+    property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
     property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property color color: {
         if(disabled){
             return disableColor
         }
+        if(pressed){
+            return pressedColor
+        }
         return hovered ? hoverColor : normalColor
     }
     property color iconColor: {

src/controls/FluNavigationView.qml

@@ -150,20 +150,20 @@ Item {
                 }
                 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)
                         }
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(1,1,1,0.03)
+                        }
                         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)
                         }
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(0,0,0,0.03)
+                        }
                         return Qt.rgba(0,0,0,0)
                     }
                 }
@@ -193,6 +193,12 @@ Item {
                         verticalCenter: parent.verticalCenter
                         left:item_icon.right
                     }
+                    color:{
+                        if(item_mouse.pressed){
+                            return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                        }
+                        return FluTheme.dark ? FluColors.White : FluColors.Grey220
+                    }
                 }
             }
         }
@@ -249,20 +255,20 @@ Item {
                 }
                 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)
                         }
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(1,1,1,0.03)
+                        }
                         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)
                         }
+                        if(item_mouse.containsMouse){
+                            return Qt.rgba(0,0,0,0.03)
+                        }
                         return Qt.rgba(0,0,0,0)
                     }
                 }
@@ -288,6 +294,12 @@ Item {
                 FluText{
                     id:item_title
                     text:model.title
+                    color:{
+                        if(item_mouse.pressed){
+                            return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                        }
+                        return FluTheme.dark ? FluColors.White : FluColors.Grey220
+                    }
                     anchors{
                         verticalCenter: parent.verticalCenter
                         left:item_icon.right

src/controls/FluPagination.qml

@@ -0,0 +1,110 @@
+import QtQuick
+import FluentUI
+import QtQuick.Layouts
+
+Item {
+    id: control
+
+
+    signal requestPage(int page,int count)
+    property int pageCurrent: 0
+    property int itemCount: 0
+    property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
+    property int __itemPerPage: 10
+    property int pageButtonCount: 5
+    property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
+
+
+    implicitHeight: 40
+    implicitWidth: content.width
+
+    Row{
+        id: content
+        height: control.height
+        spacing: 25
+        padding: 10
+
+
+        FluToggleButton{
+            visible: control.pageCount>1
+            disabled: control.pageCurrent<=1
+            text:"<上一页"
+            onClicked: {
+                control.calcNewPage(control.pageCurrent-1);
+            }
+        }
+
+        Row{
+            spacing: 5
+            FluToggleButton{
+                property int pageNumber:1
+                visible: control.pageCount>0
+                enabled: control.pageCurrent>1
+                selected: pageNumber === control.pageCurrent
+                text:String(pageNumber)
+                onClicked: {
+                    control.calcNewPage(pageNumber);
+                }
+            }
+            FluText{
+                visible: (control.pageCount>control.pageButtonCount&&
+                          control.pageCurrent>control.__pageButtonHalf)
+                text: "..."
+            }
+            Repeater{
+                id: button_repeator
+                model: (control.pageCount<2)?0:(control.pageCount>=control.pageButtonCount)?(control.pageButtonCount-2):(control.pageCount-2)
+                delegate:FluToggleButton{
+                    property int  pageNumber: {
+                        return (control.pageCurrent<=control.__pageButtonHalf)
+                                ?(2+index)
+                                :(control.pageCount-control.pageCurrent<=control.pageButtonCount-control.__pageButtonHalf)
+                                  ?(control.pageCount-button_repeator.count+index)
+                                  :(control.pageCurrent+2+index-control.__pageButtonHalf)
+                    }
+                    text:String(pageNumber)
+                    selected: pageNumber === control.pageCurrent
+                    onClicked: {
+                        control.calcNewPage(pageNumber);
+                    }
+                }
+            }
+            FluText{
+                visible: (control.pageCount>control.pageButtonCount&&
+                          control.pageCount-control.pageCurrent>control.pageButtonCount-control.__pageButtonHalf)
+                text: "..."
+            }
+            FluToggleButton{
+                property int pageNumber:control.pageCount
+                visible: control.pageCount>0
+                enabled: control.pageCurrent>1
+                selected: pageNumber === control.pageCurrent
+                text:String(pageNumber)
+                onClicked: {
+                    control.calcNewPage(pageNumber);
+                }
+            }
+        }
+        FluToggleButton{
+            visible: control.pageCount>1
+            disabled: control.pageCurrent>=control.pageCount
+            text:"下一页>"
+            onClicked: {
+                control.calcNewPage(control.pageCurrent+1);
+            }
+        }
+    }
+
+    function calcNewPage(page)
+    {
+        if(!page)
+            return
+        let page_num=Number(page)
+        if(page_num<1||page_num>control.pageCount||page_num===control.pageCurrent)
+            return
+        control.pageCurrent=page_num
+        control.requestPage(page_num,control.__itemPerPage)
+    }
+
+
+}

src/controls/FluTableView.qml

@@ -0,0 +1,193 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+Item {
+
+    id:control
+    property var columns : []
+    property var dataSource : []
+    property int pageCurrent: 1
+    property int itemCount: 1000
+    property int pageCount: 10
+    property int itemHeight: 56
+    signal requestPage(int page,int count)
+
+    implicitHeight: layout_coumns.height + layout_table.height
+
+    MouseArea{
+        anchors.fill: parent
+        preventStealing: true
+    }
+
+    ListModel{
+        id:model_coumns
+    }
+
+    ListModel{
+        id:model_data_source
+    }
+
+    onColumnsChanged: {
+        model_coumns.clear()
+        model_coumns.append(columns)
+    }
+
+    onDataSourceChanged: {
+        model_data_source.clear()
+        model_data_source.append(dataSource)
+    }
+
+    FluRectangle{
+        id:layout_coumns
+        height: control.itemHeight
+        width: parent.width
+        color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+        radius: [12,12,0,0]
+
+        Row{
+            id:list_coumns
+            spacing: 0
+            anchors.fill: parent
+            Repeater{
+                model: model_coumns
+                delegate: Item{
+                    height: list_coumns.height
+                    width: model.width
+                    FluText{
+                        text:model.title
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left: parent.left
+                            leftMargin: 14
+                        }
+                        fontStyle: FluText.BodyStrong
+                    }
+                    FluDivider{
+                        width: 1
+                        height: 40
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        visible: index !== list_coumns.count-1
+                    }
+                }
+            }
+        }
+    }
+
+    Rectangle{
+        anchors.fill: layout_table
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+    }
+
+    ListView{
+        id:layout_table
+        anchors{
+            top: layout_coumns.bottom
+            left: parent.left
+            right: parent.right
+        }
+        height: contentHeight
+        clip:true
+        footer: Item{
+            height: 50
+            width:  layout_table.width
+            FluPagination{
+                id:pagination
+                height: 40
+                pageCurrent: control.pageCurrent
+                itemCount: control.itemCount
+                pageCount: control.pageCount
+                onRequestPage:
+                    (page,count)=> {
+                        control.requestPage(page,count)
+                    }
+                anchors{
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                }
+            }
+        }
+        model:model_data_source
+        delegate: Item{
+            height: list_coumns.height
+            width: layout_table.width
+            property var model_values : getObjectValues(index)
+            property var itemObject: getObject(index)
+            property var listModel: model
+            Row{
+                spacing: 0
+                anchors.fill: parent
+                Repeater{
+                    model: model_values
+                    delegate:Item{
+                        height: list_coumns.height
+                        width: modelData.width
+                        Loader{
+                            property var model : modelData
+                            property var dataModel : listModel
+                            property var dataObject : itemObject
+                            anchors.fill: parent
+                            sourceComponent: {
+                                if(model.itemData instanceof Component){
+                                    return model.itemData
+                                }
+                                return com_text
+                            }
+                        }
+                    }
+                }
+            }
+            FluDivider{
+                width: parent.width
+                height: 1
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+            }
+        }
+    }
+
+    Component{
+        id:com_text
+        Item{
+            MouseArea{
+                id:item_mouse
+                hoverEnabled: true
+                anchors.fill: parent
+            }
+            FluText{
+                text:String(model.itemData)
+                width: parent.width - 14
+                elide: Text.ElideRight
+                anchors{
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                    leftMargin: 14
+                }
+                FluTooltip{
+                    visible: item_mouse.containsMouse
+                    text:parent.text
+                    delay: 1000
+                }
+            }
+        }
+    }
+
+    function getObject(index){
+        return model_data_source.get(index)
+    }
+
+    function getObjectValues(index) {
+        var obj = model_data_source.get(index)
+        if(!obj)
+            return
+        var data = []
+        for(var i=0;i<model_coumns.count;i++){
+            var item = model_coumns.get(i)
+            data.push({itemData:obj[item.dataIndex],width:item.width})
+        }
+        return data;
+    }
+
+}

src/controls/FluText.qml

@@ -4,7 +4,7 @@ import FluentUI
 Text {
 
     property int fontStyle: FluText.Body
-    property color textColor: FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
+    property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
     property int pixelSize : FluTheme.textSize
 
     enum FontStyle {

src/controls/FluToggleButton.qml

@@ -0,0 +1,101 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+FluControl {
+
+    property bool disabled: false
+    property bool selected: false
+    property color normalColor: {
+        if(selected){
+           return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+        }else{
+           return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+        }
+    }
+    property color hoverColor: {
+        if(selected){
+            return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
+        }else{
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+        }
+    }
+    property color disableColor: {
+        if(selected){
+            return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+        }else{
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+        }
+    }
+
+    property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
+
+    id: control
+    enabled: !disabled
+    topPadding:5
+    bottomPadding:5
+    leftPadding:15
+    rightPadding:15
+    Keys.onSpacePressed: control.visualFocus&&clicked()
+    focusPolicy:Qt.TabFocus
+    background: Rectangle{
+        radius: 4
+        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
+        border.width: selected ? 0 : 1
+        FluFocusRectangle{
+            visible: control.visualFocus
+            radius:8
+        }
+        color:{
+            if(disabled){
+                return disableColor
+            }
+            if(selected){
+                if(pressed){
+                    return pressedColor
+                }
+            }
+            return hovered ? hoverColor :normalColor
+        }
+    }
+    contentItem: FluText {
+        text: control.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        color: {
+            if(selected){
+                if(FluTheme.dark){
+                    if(disabled){
+                        return Qt.rgba(173/255,173/255,173/255,1)
+                    }
+                    return Qt.rgba(0,0,0,1)
+                }else{
+                    return Qt.rgba(1,1,1,1)
+                }
+            }else{
+                if(FluTheme.dark){
+                    if(disabled){
+                        return Qt.rgba(131/255,131/255,131/255,1)
+                    }
+                    if(!selected){
+                        if(pressed){
+                            return Qt.rgba(162/255,162/255,162/255,1)
+                        }
+                    }
+                    return Qt.rgba(1,1,1,1)
+                }else{
+                    if(disabled){
+                        return Qt.rgba(160/255,160/255,160/255,1)
+                    }
+                    if(!selected){
+                        if(pressed){
+                            return Qt.rgba(96/255,96/255,96/255,1)
+                        }
+                    }
+                    return Qt.rgba(0,0,0,1)
+                }
+            }
+        }
+        font.pixelSize: 14
+    }
+}

src/res.qrc

@@ -67,5 +67,8 @@
         <file>controls/FluControl.qml</file>
         <file>controls/FluTextFiled.qml</file>
         <file>controls/FluTextArea.qml</file>
+        <file>controls/FluTableView.qml</file>
+        <file>controls/FluPagination.qml</file>
+        <file>controls/FluToggleButton.qml</file>
     </qresource>
 </RCC>