FluTableView怎么使用啊，显示不出来

13477001653 commented 9 months ago

，页面显示不来，怎么用，我是新手

suterberg commented 9 months ago

看看qmlbook 学习一下基础的qml语言结构吧，tableview要设置columnsource 和 datasource，示例是在下边 function loadData里边随机生成数据，最后赋值给datasource

suterberg commented 9 months ago

，页面显示不来，怎么用，我是新手

anchors{ left: parent.left right: parent.right top: parent.top bottom: gagination.top } 这一段不能少啊，有些组件要设定锚点确定大小才会显示

13477001653 commented 9 months ago

，页面显示不来，怎么用，我是新手

锚点{ left：parent.left right：parent.right top：parent.top Bottom：gagination.top } 这段时间不能少啊，有些组件要设定某个点确定大小才会显示

谢谢你，设置了锚点显示表头出来了，但是我给dataSource赋值了还是没有数据

13477001653 commented 9 months ago

suterberg commented 9 months ago

把用cunstomitem的那几列先注释掉，看看效果，customitem 应该不是这样用的

13477001653 commented 9 months ago

把用cunstomitem的那几列先注释掉，看看效果，customitem应该不是这样用的还是显示不了

suterberg commented 9 months ago

import QtQuick import QtQuick.Controls import QtQuick.Layouts import QtQuick.Window import FluentUI import "qrc:///example/qml/component"

FluContentPage{

id:root
title:"TableView"
signal checkBoxChanged

property var dataSource : []
property int sortType: 0

Component.onCompleted: {
    loadData(1,1000)
}

onSortTypeChanged: {
    table_view.closeEditor()
    if(sortType === 0){
        table_view.sort()
    }else if(sortType === 1){
        table_view.sort((a, b) => a.age - b.age);
    }else if(sortType === 2){
        table_view.sort((a, b) => b.age - a.age);
    }
}

Component{
    id:com_checbox
    Item{
        FluCheckBox{
            anchors.centerIn: parent
            checked: true === options.checked
            enableAnimation: false
            clickListener: function(){
                var obj = tableModel.getRow(row)
                obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
                tableModel.setRow(row,obj)
                checkBoxChanged()
            }
        }
    }
}

Component{
    id:com_action
    Item{
        RowLayout{
            anchors.centerIn: parent
            FluButton{
                text:"删除"
                onClicked: {
                    table_view.closeEditor()
                    tableModel.removeRow(row)
                    checkBoxChanged()
                }
            }
            FluFilledButton{
                text:"编辑"
                onClicked: {
                    var obj = tableModel.getRow(row)
                    obj.name = "12345"
                    tableModel.setRow(row,obj)
                    showSuccess(JSON.stringify(tableModel.getRow(row)))
                }
            }
        }
    }
}

Component{
    id:com_column_checbox
    Item{
        RowLayout{
            anchors.centerIn: parent
            FluText{
                text:"全选"
                Layout.alignment: Qt.AlignVCenter
            }
            FluCheckBox{
                checked: true === options.checked
                enableAnimation: false
                Layout.alignment: Qt.AlignVCenter
                clickListener: function(){
                    var checked = !options.checked
                    itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
                    for(var i =0;i< tableModel.rowCount ;i++){
                        var rowData = tableModel.getRow(i)
                        rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
                        tableModel.setRow(i,rowData)
                    }
                }
            }
            Connections{
                target: root
                function onCheckBoxChanged(){
                    for(var i =0;i< tableModel.rowCount ;i++){
                        if(false === tableModel.getRow(i).checkbox.options.checked){
                            itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
                            return
                        }
                    }
                    itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
                }
            }
        }
    }
}

Component{
    id:com_combobox
    FluComboBox {
        anchors.fill: parent
        focus: true
        currentIndex: display
        editable: true
        model: ListModel {
            ListElement { text: 100 }
            ListElement { text: 300 }
            ListElement { text: 500 }
            ListElement { text: 1000 }
        }
        Component.onCompleted: {
            currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
            selectAll()
        }
        onCommit: {
            display = editText
            tableView.closeEditor()
        }
    }
}

Component{
    id:com_avatar
    Item{
        FluClip{
            anchors.centerIn: parent
            width: 40
            height: 40
            radius: [20,20,20,20]
            Image{
                anchors.fill: parent
                source: {
                    if(options && options.avatar){
                        return options.avatar
                    }
                    return ""
                }
                sourceSize: Qt.size(80,80)
            }
        }
    }
}

Component{
    id:com_column_sort_age
    Item{
        FluText{
            text:"年龄"
            anchors.centerIn: parent
        }
        ColumnLayout{
            spacing: 0
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
                rightMargin: 4
            }
            FluIconButton{
                Layout.preferredWidth: 20
                Layout.preferredHeight: 15
                iconSize: 12
                verticalPadding:0
                horizontalPadding:0
                iconSource: FluentIcons.ChevronUp
                iconColor: {
                    if(1 === root.sortType){
                        return FluTheme.primaryColor
                    }
                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                }
                onClicked: {
                    if(root.sortType === 1){
                        root.sortType = 0
                        return
                    }
                    root.sortType = 1
                }
            }
            FluIconButton{
                Layout.preferredWidth: 20
                Layout.preferredHeight: 15
                iconSize: 12
                verticalPadding:0
                horizontalPadding:0
                iconSource: FluentIcons.ChevronDown
                iconColor: {
                    if(2 === root.sortType){
                        return FluTheme.primaryColor
                    }
                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                }
                onClicked: {
                    if(root.sortType === 2){
                        root.sortType = 0
                        return
                    }
                    root.sortType = 2
                }
            }
        }
    }
}

FluTableView{
    id:table_view
    anchors{
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: gagination.top
    }
    anchors.topMargin: 20
    columnSource:[
        // {
        //     title: table_view.customItem(com_column_checbox,{checked:true}),
        //     dataIndex: 'checkbox',
        //     width:80,
        //     minimumWidth:80,
        //     maximumWidth:80,
        // },
        // {
        //     title: '头像',
        //     dataIndex: 'avatar',
        //     width:100,
        //     minimumWidth:100,
        //     maximumWidth:100
        // },
        {
            title: '姓名',
            dataIndex: 'name',
            readOnly:true,
        },
        {
            title: table_view.customItem(com_column_sort_age,{sort:0}),
            dataIndex: 'age',
            editDelegate:com_combobox,
            width:100,
            minimumWidth:100,
            maximumWidth:100
        },
        {
            title: '住址',
            dataIndex: 'address',
            width:200,
            minimumWidth:100,
            maximumWidth:250
        },
        {
            title: '别名',
            dataIndex: 'nickname',
            width:100,
            minimumWidth:80,
            maximumWidth:200
        },
        {
            title: '长字符串',
            dataIndex: 'longstring',
            width:200,
            minimumWidth:100,
            maximumWidth:300
        }//,
        // {
        //     title: '操作',
        //     dataIndex: 'action',
        //     width:160,
        //     minimumWidth:160,
        //     maximumWidth:160
        // }
    ]
}

FluPagination{
    id:gagination
    anchors{
        bottom: parent.bottom
        left: parent.left
    }
    pageCurrent: 1
    itemCount: 100000
    pageButtonCount: 7
    __itemPerPage: 1000
    onRequestPage:
        (page,count)=> {
            table_view.closeEditor()
            loadData(page,count)
            table_view.resetPosition()
        }
}

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];
    }

    var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
    function getAvatar(){
        var randomIndex = Math.floor(Math.random() * avatars.length);
        return avatars[randomIndex];
    }

    const dataSource = []
    for(var i=0;i<count;i++){
        dataSource.push({
                            // checkbox: table_view.customItem(com_checbox,{checked:true}),
                            //avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
                            name: getRandomName(),
                            age:getRandomAge(),
                            address: getRandomAddresses(),
                            nickname: getRandomNickname(),
                            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
                            //action: table_view.customItem(com_action),
                            minimumHeight:50
                        })
    }
    root.dataSource = dataSource
    table_view.dataSource = root.dataSource
}

}

suterberg commented 9 months ago

这个我试了没问题，最好是学一下qml，这个还是要花点时间去学习的

13477001653 commented 9 months ago

导入QtQuick 导入QtQuick.Controls 导入QtQuick.Layouts 导入QtQuick.Window 导入FluentUI 导入“qrc:///example/qml/component”

Flu内容页面{

id:root
title:"TableView"
signal checkBoxChanged

property var dataSource : []
property int sortType: 0

Component.onCompleted: {
    loadData(1,1000)
}

onSortTypeChanged: {
    table_view.closeEditor()
    if(sortType === 0){
        table_view.sort()
    }else if(sortType === 1){
        table_view.sort((a, b) => a.age - b.age);
    }else if(sortType === 2){
        table_view.sort((a, b) => b.age - a.age);
    }
}

Component{
    id:com_checbox
    Item{
        FluCheckBox{
            anchors.centerIn: parent
            checked: true === options.checked
            enableAnimation: false
            clickListener: function(){
                var obj = tableModel.getRow(row)
                obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
                tableModel.setRow(row,obj)
                checkBoxChanged()
            }
        }
    }
}

Component{
    id:com_action
    Item{
        RowLayout{
            anchors.centerIn: parent
            FluButton{
                text:"删除"
                onClicked: {
                    table_view.closeEditor()
                    tableModel.removeRow(row)
                    checkBoxChanged()
                }
            }
            FluFilledButton{
                text:"编辑"
                onClicked: {
                    var obj = tableModel.getRow(row)
                    obj.name = "12345"
                    tableModel.setRow(row,obj)
                    showSuccess(JSON.stringify(tableModel.getRow(row)))
                }
            }
        }
    }
}

Component{
    id:com_column_checbox
    Item{
        RowLayout{
            anchors.centerIn: parent
            FluText{
                text:"全选"
                Layout.alignment: Qt.AlignVCenter
            }
            FluCheckBox{
                checked: true === options.checked
                enableAnimation: false
                Layout.alignment: Qt.AlignVCenter
                clickListener: function(){
                    var checked = !options.checked
                    itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
                    for(var i =0;i< tableModel.rowCount ;i++){
                        var rowData = tableModel.getRow(i)
                        rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
                        tableModel.setRow(i,rowData)
                    }
                }
            }
            Connections{
                target: root
                function onCheckBoxChanged(){
                    for(var i =0;i< tableModel.rowCount ;i++){
                        if(false === tableModel.getRow(i).checkbox.options.checked){
                            itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
                            return
                        }
                    }
                    itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
                }
            }
        }
    }
}

Component{
    id:com_combobox
    FluComboBox {
        anchors.fill: parent
        focus: true
        currentIndex: display
        editable: true
        model: ListModel {
            ListElement { text: 100 }
            ListElement { text: 300 }
            ListElement { text: 500 }
            ListElement { text: 1000 }
        }
        Component.onCompleted: {
            currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
            selectAll()
        }
        onCommit: {
            display = editText
            tableView.closeEditor()
        }
    }
}

Component{
    id:com_avatar
    Item{
        FluClip{
            anchors.centerIn: parent
            width: 40
            height: 40
            radius: [20,20,20,20]
            Image{
                anchors.fill: parent
                source: {
                    if(options && options.avatar){
                        return options.avatar
                    }
                    return ""
                }
                sourceSize: Qt.size(80,80)
            }
        }
    }
}

Component{
    id:com_column_sort_age
    Item{
        FluText{
            text:"年龄"
            anchors.centerIn: parent
        }
        ColumnLayout{
            spacing: 0
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
                rightMargin: 4
            }
            FluIconButton{
                Layout.preferredWidth: 20
                Layout.preferredHeight: 15
                iconSize: 12
                verticalPadding:0
                horizontalPadding:0
                iconSource: FluentIcons.ChevronUp
                iconColor: {
                    if(1 === root.sortType){
                        return FluTheme.primaryColor
                    }
                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                }
                onClicked: {
                    if(root.sortType === 1){
                        root.sortType = 0
                        return
                    }
                    root.sortType = 1
                }
            }
            FluIconButton{
                Layout.preferredWidth: 20
                Layout.preferredHeight: 15
                iconSize: 12
                verticalPadding:0
                horizontalPadding:0
                iconSource: FluentIcons.ChevronDown
                iconColor: {
                    if(2 === root.sortType){
                        return FluTheme.primaryColor
                    }
                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                }
                onClicked: {
                    if(root.sortType === 2){
                        root.sortType = 0
                        return
                    }
                    root.sortType = 2
                }
            }
        }
    }
}

FluTableView{
    id:table_view
    anchors{
        left: parent.left
        right: parent.right
        top: parent.top
        bottom: gagination.top
    }
    anchors.topMargin: 20
    columnSource:[
        // {
        //     title: table_view.customItem(com_column_checbox,{checked:true}),
        //     dataIndex: 'checkbox',
        //     width:80,
        //     minimumWidth:80,
        //     maximumWidth:80,
        // },
        // {
        //     title: '头像',
        //     dataIndex: 'avatar',
        //     width:100,
        //     minimumWidth:100,
        //     maximumWidth:100
        // },
        {
            title: '姓名',
            dataIndex: 'name',
            readOnly:true,
        },
        {
            title: table_view.customItem(com_column_sort_age,{sort:0}),
            dataIndex: 'age',
            editDelegate:com_combobox,
            width:100,
            minimumWidth:100,
            maximumWidth:100
        },
        {
            title: '住址',
            dataIndex: 'address',
            width:200,
            minimumWidth:100,
            maximumWidth:250
        },
        {
            title: '别名',
            dataIndex: 'nickname',
            width:100,
            minimumWidth:80,
            maximumWidth:200
        },
        {
            title: '长字符串',
            dataIndex: 'longstring',
            width:200,
            minimumWidth:100,
            maximumWidth:300
        }//,
        // {
        //     title: '操作',
        //     dataIndex: 'action',
        //     width:160,
        //     minimumWidth:160,
        //     maximumWidth:160
        // }
    ]
}

FluPagination{
    id:gagination
    anchors{
        bottom: parent.bottom
        left: parent.left
    }
    pageCurrent: 1
    itemCount: 100000
    pageButtonCount: 7
    __itemPerPage: 1000
    onRequestPage:
        (page,count)=> {
            table_view.closeEditor()
            loadData(page,count)
            table_view.resetPosition()
        }
}

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];
    }

    var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
    function getAvatar(){
        var randomIndex = Math.floor(Math.random() * avatars.length);
        return avatars[randomIndex];
    }

    const dataSource = []
    for(var i=0;i<count;i++){
        dataSource.push({
                            // checkbox: table_view.customItem(com_checbox,{checked:true}),
                            //avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
                            name: getRandomName(),
                            age:getRandomAge(),
                            address: getRandomAddresses(),
                            nickname: getRandomNickname(),
                            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
                            //action: table_view.customItem(com_action),
                            minimumHeight:50
                        })
    }
    root.dataSource = dataSource
    table_view.dataSource = root.dataSource
}

}

弄出来弄成来了，是我没设置长宽

zhuzichu520 / FluentUI

FluTableView怎么使用啊，显示不出来 #391