用户登录
用户注册

QML 自定义TableView控件(在ListView基础上实现类似QTableView功能)

概述:

在Qt5.12以前的版本中,对于数据的显示控件有 QtQuick.Controls 2中的ListView, QtQuick.Controls 1中的TableView,而 QtQuick.Controls 1的控件风格和操作习惯不符合QML的整体风格,因此我在ListView的基础上制作了TableView,提供了类似于QTableView中只需要提供model,表头、表数据等等由控件自动绑定相应属性,且控件在保留ListView所有属性的同时,添加了自定义表头,表头默认宽度、表头颜色、字体颜色、表头高度、内容高度、单独设置各列宽度,横纵滚动条等功能。如图:

控件属性:

headerList:表头列表(当不设置该数组时,控件默认表头为model中列名称)

columnsWidth默认列宽度

headerHeight表头高度

rowsHeight内容行高度

headerTextColor表头字体颜色

headerBackgroundColor表头背景颜色

headerTextSize表头字体大小

headerFontFamily表头字体

backgroundColor内容背景行颜色

alternateBackgroundColor内容交替行颜色

gridColor网格线颜色

gridPoint网格线粗细

textColor内容字体颜色

textSize内容字体大小

textFontFamily内容字体

功能:

setColumnWidth(index,width)设置单独列宽度

getColumnWidth(index)获得index列宽度

其他属性及功能参考ListView文档

?

使用方法:

新建或将DataTableView.qml添加到项目中,设置好model数据后将model赋予DataTabelView,设置相关需要属性

ListModel{
    id:listModel
    ListElement{
        PARTNO:"20201130"
        PLACE:"小山村"
        ADDRESS:"265454"
        JD:"105.0265"
        WD:"26.3265"
        BACKUP:" 2020-11-30 09:59:19"
    }
    ListElement{
        PARTNO:"20201130"
        PLACE:"大山村"
        ADDRESS:"265454"
        JD:"105.0265"
        WD:"26.3265"
        BACKUP:" 2020-11-30 09:59:19"
    }
}

DataTableView {
    id: dataListView
    anchors.fill: parent
    columnsWidth: 110
//    headerList: ["日期","地点","地址","经度","纬度","备注"]//不自己设置时,表头使用model数据列名
    model:listModel
}

设置单独列列宽:

DataTableView {
    id: dataListView
    anchors.fill: parent
    columnsWidth: 110
    headerList: ["日期","地点","地址","经度","纬度","备注"]//不自己设置时,表头使用model数据列名
    model:listModel
    Component.onCompleted: {
        var c2 = dataListView.getColumnWidth(2)
        var c5 = dataListView.getColumnWidth(5)
        dataListView.setColumnWidth(2,c2-50)
        dataListView.setColumnWidth(5,c5+100)
    }
}

DataTableView.qml下载链接:点击下载DataTableView.qml

DataTableView例子:点击下载DataTableView例子

源码:

import QtQuick 2.11
import QtQuick.Controls 2.4

ListView {
    id: listView
    clip: true
    header: headerView
    headerPositioning: ListView.OverlayHeader
    flickableDirection: Flickable.AutoFlickDirection
    boundsBehavior: Flickable.StopAtBounds
    contentWidth: headerList.length*columnsWidth
    ScrollBar.horizontal: ScrollBar {}
    ScrollBar.vertical: ScrollBar { }
    property var headerList: Object.keys(listView.model.get(0)).reverse()
    property int columnsWidth: 100
    property int headerHeight: 40
    property int rowsHeight: 30
    property color headerTextColor:"#1c262b"
    property color headerBackgroundColor: "turquoise"
    property int headerTextSize: 13
    property string headerFontFamily: "微软雅黑"
    property color backgroundColor: "#cc7fc7df"
    property color alternateBackgroundColor: "#cc17719b"
    property color gridColor: "#99999999"
    property int gridPoint: 1
    property color textColor: "ghostwhite"
    property int textSize: 11
    property string textFontFamily: "微软雅黑"
    delegate:listDelegate

    Component{
        id:headerView
        Rectangle{
            width: contentWidth
            height: headerHeight
            color: headerBackgroundColor
            property var headerRepeater: headerRepeater
            Row{
                Repeater{
                    id:headerRepeater
                    model:headerList
                    Label{
                        width: columnsWidth
                        height: headerHeight
                        color: headerTextColor
                        text:headerList[index]
                        font.bold: true
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.family: headerFontFamily
                        font.pointSize: headerTextSize
                        background: Rectangle{
                            color: "#00000000"
                            border.color: gridColor
                            border.width: gridPoint
                        }
                    }
                }
            }
        }
    }
    Component{
        id:listDelegate
        Rectangle{
            width: contentWidth
            height: rowsHeight
            color: index%2 ==0 ? backgroundColor:alternateBackgroundColor
            property var myModel: model
            property var modelColumnsList: Object.keys(listView.model.get(0)).reverse()

            Row{
                Repeater{
                    id:delegateRepeater
                    model:headerList
                    Label{
                        width: listView.headerItem.headerRepeater.itemAt(index).width
                        height: rowsHeight
                        color: textColor
                        text:myModel[modelColumnsList[index]]
                        font.bold: true
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.family: textFontFamily
                        font.pointSize: textSize
                        elide:Text.ElideRight
                        background: Rectangle{
                            color: "#00000000"
                            border.color: gridColor
                            border.width: gridPoint
                        }
                    }
                }
            }
        }

    }

    function setColumnWidth(index,width){
        var headerItem = listView.headerItem.headerRepeater.itemAt(index)
        contentWidth = contentWidth-headerItem.width+width
        headerItem.width = width
    }

    function getColumnWidth(index){
        var headerItem = listView.headerItem.headerRepeater.itemAt(index)
        return headerItem.width
    }
}

?


热门评论
暂无评论,快去抢占沙发吧~

分享至

长按复制下方链接,去粘贴给好友吧:
请使用当前手机浏览器底部中间的“添加书签”功能进行收藏。
我知道了
软件
前端设计
程序设计
Java相关