update

example/qml/global/ItemsOriginal.qml

@@ -252,6 +252,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_TableView.qml")
             }
         }
+        FluPaneItem{
+            title:"TableView2"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
+            }
+        }
         FluPaneItem{
             title:"MultiWindow"
             onTap:{

example/qml/page/T_ComboBox.qml

@@ -28,10 +28,6 @@ FluScrollablePage{
                     ListElement { text: "Apple" }
                     ListElement { text: "Coconut" }
                 }
-                onAccepted: {
-                    if (find(editText) === -1)
-                        model_1.append({text: editText})
-                }
             }
         }
     }

example/qml/page/T_TableView.qml

@@ -14,12 +14,14 @@ FluScrollablePage{
                           {
                               title: '姓名',
                               dataIndex: 'name',
-                              width:100
+                              width:100,
+
                           },
                           {
                               title: '年龄',
-                              dataIndex: 'age',
+                              dataIndex: 'item_age',
-                              width:100
+                              width:100,
+                              minimumWidth:100
                           },
                           {
                               title: '住址',
@@ -41,16 +43,29 @@ FluScrollablePage{
         loadData(1,10)
     }
 
-    FluTableView{
+    Component{
-        id:table_view
+        id:com_age
-        Layout.fillWidth: true
+        Item{
-        Layout.topMargin: 20
+            id:item_age
-        pageCurrent:1
+            property var ageArr: [100,300,500,1000]
-        pageCount:10
+            height: 60
-        itemCount: 1000
+            FluComboBox{
-        onRequestPage:
+                width: 80
-            (page,count)=> {
+                anchors{
-                loadData(page,count)
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                    leftMargin: 10
+                }
+                model: ListModel {
+                    ListElement { text: 100 }
+                    ListElement { text: 300 }
+                    ListElement { text: 500 }
+                    ListElement { text: 1000 }
+                }
+                Component.onCompleted: {
+                    currentIndex=ageArr.findIndex((element) => element === dataModel.age)
+                }
+            }
         }
     }
 
@@ -65,7 +80,7 @@ FluScrollablePage{
                     text:"编辑"
                     horizontalPadding: 6
                     onClicked:{
-                        showSuccess(JSON.stringify(dataObject))
+                        showError(JSON.stringify(dataObject))
                     }
                 }
                 FluFilledButton{
@@ -79,6 +94,20 @@ FluScrollablePage{
         }
     }
 
+
+    FluTableView{
+        id:table_view
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        pageCurrent:1
+        pageCount:10
+        itemCount: 1000
+        onRequestPage:
+            (page,count)=> {
+                loadData(page,count)
+            }
+    }
+
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: 10
@@ -131,13 +160,34 @@ FluScrollablePage{
     }
 
     function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
         const dataSource = []
         for(var i=0;i<count;i++){
             dataSource.push({
-                                name: "孙悟空%1".arg(((page-1)*count+i)),
+                                name: getRandomName(),
-                                age: 500,
+                                item_age: com_age,
-                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
+                                age:getRandomAge(),
-                                nickname: "齐天大圣",
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
                                 action:com_action
                             })
         }

example/qml/page/T_TableView2.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluContentPage{
+
+    title:"TableView"
+
+    Component.onCompleted: {
+        loadData(1,10)
+    }
+
+    function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname()
+                            })
+        }
+        table_view.dataSource = dataSource
+    }
+
+    FluTableView2{
+        id:table_view
+        anchors.fill: parent
+        anchors.topMargin: 20
+        columnSource:[
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                width:100,
+
+            },
+            {
+                title: '年龄',
+                dataIndex: 'age',
+                width:100,
+                minimumWidth:100
+            },
+            {
+                title: '住址',
+                dataIndex: 'address',
+                width:200
+            },
+            {
+                title: '别名',
+                dataIndex: 'nickname',
+                width:100
+            }
+        ]
+    }
+
+
+}

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -17,6 +17,9 @@ TextEdit {
     bottomPadding: 0
     selectionColor: FluTheme.primaryColor.lightest
     font:FluTextStyle.Body
+    onSelectedTextChanged: {
+        control.forceActiveFocus()
+    }
     TapHandler {
         acceptedButtons: Qt.RightButton
         onTapped: control.echoMode !== TextInput.Password && menu.popup()

src/imports/FluentUI/Controls/FluScrollIndicator.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ScrollIndicator {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 2
+
+    contentItem: Rectangle {
+        implicitWidth: 2
+        implicitHeight: 2
+
+        color: control.palette.mid
+        visible: control.size < 1.0
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges {
+                target: control
+                contentItem.opacity: 0.75
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 450
+                    }
+                    NumberAnimation {
+                        target: control.contentItem
+                        duration: 200
+                        property: "opacity"
+                        to: 0.0
+                    }
+                }
+            }
+        ]
+    }
+}

src/imports/FluentUI/Controls/FluTableModelColumn.qml

@@ -0,0 +1,5 @@
+import Qt.labs.qmlmodels
+
+TableModelColumn{
+
+}

src/imports/FluentUI/Controls/FluTableView.qml

@@ -102,7 +102,11 @@ Item {
                             onPositionChanged:
                                 (mouse)=>{
                                     var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
-                                    item_column.width = Math.max(item_column.width+delta.x,item_column_text.implicitWidth+28)
+                                    var minimumWidth = item_column_text.implicitWidth+28
+                                    if(model.minimumWidth){
+                                        minimumWidth = model.minimumWidth
+                                    }
+                                    item_column.width = Math.max(item_column.width+delta.x,minimumWidth)
                                 }
                         }
                     }
@@ -136,7 +140,7 @@ Item {
             interactive: false
             header: header_columns
             footer: Item{
-                height: pageVisible ? 50 : 0
+                height: pageVisible ? 54 : 0
                 clip: true
                 width: layout_table.width
                 FluPagination{
@@ -189,19 +193,6 @@ Item {
                     anchors.right: parent.right
                     anchors.bottom: parent.bottom
                 }
-                //                Row{
-                //                    id: table_row_back
-                //                    spacing: 0
-                //                    anchors.fill: parent
-                //                    Repeater{
-                //                        model: model_values
-                //                        delegate:Rectangle{
-                //                             width: layout_table.headerItem.widthByColumnIndex(index)
-                //                             height: item_control.height
-                //                             color:"red"
-                //                        }
-                //                    }
-                //                }
                 Row{
                     id: table_row
                     spacing: 0
@@ -210,8 +201,16 @@ Item {
                         id:repeater_rows
                         model: model_values
                         delegate:FluControl{
+                            id:item_row_control
                             width: layout_table.headerItem.widthByColumnIndex(index)
                             height: item_control.height
+                            focusPolicy:Qt.TabFocus | Qt.ClickFocus
+                            background: Item{
+                                FluFocusRectangle{
+                                    visible: item_row_control.activeFocus
+                                    radius:8
+                                }
+                            }
                             Loader{
                                 id:item_column_loader
                                 property var model : modelData
@@ -243,6 +242,7 @@ Item {
             }
         }
     }
+
     Component{
         id:com_text
         Item{

src/imports/FluentUI/Controls/FluTableView2.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import Qt.labs.qmlmodels
+import FluentUI
+
+TableView {
+    property var columnSource
+    property var dataSource
+    id:control
+    ListModel{
+        id:model_columns
+    }
+    columnWidthProvider: function (column) {
+        return 100
+    }
+    rowHeightProvider: function (column) {
+        return 60
+    }
+    topMargin: columnsHeader.implicitHeight
+    model: table_model
+    ScrollBar.horizontal: FluScrollBar{}
+    ScrollBar.vertical: FluScrollBar{}
+    clip: true
+    boundsBehavior:Flickable.StopAtBounds
+    delegate: Rectangle {
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        FluText {
+            text: display
+            anchors.fill: parent
+            anchors.margins: 10
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
+    onColumnSourceChanged: {
+        if(columnSource.length!==0){
+            var com_column = Qt.createComponent("FluTableModelColumn.qml")
+            if (com_column.status === Component.Ready) {
+                var columns= []
+                columnSource.forEach(function(item){
+                    var column = com_column.createObject(table_model,{display:item.dataIndex});
+                    columns.push(column)
+                })
+                table_model.columns = columns
+            }
+        }
+    }
+
+    onDataSourceChanged: {
+        table_model.clear()
+        dataSource.forEach(function(item){
+            table_model.appendRow(item)
+        })
+    }
+
+    TableModel {
+        id:table_model
+    }
+
+    Row {
+        id: columnsHeader
+        y: control.contentY
+        z: 2
+        Repeater {
+            model: columnSource
+            Rectangle{
+                height: 35
+                width: control.columnWidthProvider(index)
+                color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+                FluText {
+                    text: modelData.title
+                    font: FluTextStyle.BodyStrong
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                        leftMargin: 10
+                    }
+                }
+            }
+        }
+    }
+}