QML自定义TableView [复制链接]

由于项目需要，我使用QML的TableView控件定制了一个符合需求设计的列表控件。

描述:程序截图

图片:1.png

代码很简单，在这里分享给大家。

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test Custom TableView")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    ListModel
    {
        id: tableModel

        ListElement
        {
            checked: false
            color: "blue"
        }

        ListElement
        {
            checked: true
            color: "green"
        }

        ListElement
        {
            checked: false
            color: "red"
        }
    }

    TableView
    {
        id: tableView
        anchors.fill: parent
        model: tableModel

        TableViewColumn
        {
            id: checkedColumn
            role: "checked"
            title: qsTr( "Checked" )
        }

        TableViewColumn
        {
            role: "color"
            title: qsTr( "Color" )
        }

        itemDelegate: Item
        {
            CheckBox
            {
                anchors.centerIn: parent
                checked: styleData.value
                visible: isCheckColumn( styleData.column )
            }

            Text
            {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                text: styleData.value
                color: isCheckColumn( styleData.column )? "black": styleData.value
                visible: !isCheckColumn( styleData.column )
            }

            function isCheckColumn( columnIndex )
            {
                return tableView.getColumn( columnIndex ) === checkedColumn
            }
        }
    }

    Text
    {
        text: qsTr( "Made by jiangcaiyang" )
        color: "white"
        style: Text.Outline
        styleColor: "black"
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}
如果大家需要的话，可以下载我这个项目。
自定义TableView TestCustomTableView.7z (2 K) 下载次数:252

彩阳，是不是现在Qt开发手机都是以QML为主呢？？我看新建项目中也可以用widget做界面。你经验丰富介绍一下。

uidab:彩阳，是不是现在Qt开发手机都是以QML为主呢？？我看新建项目中也可以用widget做界面。你经验丰富介绍一下。 (2014-09-09 09:53) 

Widgets也可以使用，但是似乎运行效率比较低，界面卡顿现象有点儿严重，但是控件非常丰富，适合制作一般企业应用。
QML界面流畅，控件也丰富起来了。适合做消费应用以及游戏。

    

  赞一个彩阳～

每个item都有 checkbox 和 text.  

只是根据列来进行不同的显示..right?

优秀文章，支持！n神马都是浮云

能不能把 标题上的  checked  换成一个全选按钮啊

fghfghfgh:能不能把 标题上的  checked  换成一个全选按钮啊 (2014-09-18 15:31) 

可以实现，需要定义headerDelegate，并且添加checkBox。最后逻辑上做一点小技巧就好了。

彩阳:可以实现，需要定义headerDelegate，并且添加checkBox。最后逻辑上做一点小技巧就好了。 (2014-09-18 18:27)

你好，我用了你这个例子里的代码。在这个基础上写了一个软件，代码几乎全是 qml+javascript， 在qt里面 可以运行，我现在进行了发布，但是到别的电脑上运行后，看不到界面，请问你知道是什么原因吗。我重新建立了一个空白项目，到别的电脑 可以看到界面的

我直接下载了你的这个demo，编译后，也无法看到界面

fghfghfgh:你好，我用了你这个例子里的代码。在这个基础上写了一个软件，代码几乎全是 qml+javascript， 在qt里面 可以运行，我现在进行了发布，但是到别的电脑上运行后，看不到界面，请问你知道是什么原因吗。我重新建立了一个空白项目，到别的电脑 可以看到界面的
我直接下载了你的这个d .. (2014-10-12 09:40) 

有什么错误显示吗？
如果不显示什么错误的话，请在构建的时候添加QT += console，很有可能是这个问题。
http://www.qtcn.org/bbs/read-htm-tid-57329.html

彩阳:有什么错误显示吗？
如果不显示什么错误的话，请在构建的时候添加QT += console，很有可能是这个问题。
http://www.qtcn.org/bbs/read-htm-tid-57329.html (2014-10-12 15:39) 

直接运行你的demo，没有提示任何错误，我在qt create里 运行，没有任何问题，所有代码都可以正常运行，  就是把 Release里的exe 和需要的dll复制到别的电脑，运行后，不显示任何界面，进程管理器里可以看到进程，

我按照你刚才说的，加了QT += console
构建的时候提示：
Project ERROR: Unknown module(s) in QT: console

------------------------------------------------------------------

为了测试这个问题，我新建了一个空白 Qt Quick Application， 把 Release里的exe 和需要的dll复制到别的电脑，运行后，不显示任何界面，进程管理器里可以看到进程 【我猜测这不是代码问题】


然后我新建了一个  Qt Widgets Application。把 Release里的exe 和需要的dll复制到别的电脑，运行后，就正常了，  可以显示界面了


由于我的程序代码里比较多，等会儿我把我的程序移植到  新建的  Qt Widgets Application，再试试看


目前可能的结论是，Qt Quick Application在别的电脑不显示界面， Qt Widgets Application可以，我另外的电脑是win7 ，自身是win8

彩阳:有什么错误显示吗？
如果不显示什么错误的话，请在构建的时候添加QT += console，很有可能是这个问题。
http://www.qtcn.org/bbs/read-htm-tid-57329.html (2014-10-12 15:39) 

我已经解决，原因是我自己把dll文件路径弄错了，   我用到了很多qml，我目录结构如下：

myapp:
---app.exe
---qml/QtQuick/*
---qml/QtQuick.2/*

当我修改为如下 就可以正常工作了：
myapp:
---app.exe
---QtQuick/*
---QtQuick.2/*

我现在的项目就是使用Ｑｕｉｃｋ开发的，没有什么问题。

彩阳:
我现在的项目就是使用Ｑｕｉｃｋ开发的，没有什么问题。

你好 caiyang，  很感谢你分享的这个例子，我把你的例子用在了我的项目中，

我想实现  【全选/反选】  【复制选中】 【删除选中】 的功能，

我大概想到了 这3个功能的实现方式：

全选/反选：轮询tableview里的数据，设置每个item的check为真 /假
【复制选中】 【删除选中】  同样利用轮询，得到选中数据的id  和内容，然后进行操作




但是 我目前遇到了一个困难，我无法 获取/设置  checkbox的值， 请问你是如何实现的呢，我尝试了下面的方法 但是不行

console.log(tableModel.get(tableView1.currentRow).checked) //无法输出，

fghfghfgh:你好 caiyang，  很感谢你分享的这个例子，我把你的例子用在了我的项目中，
我想实现  【全选/反选】  【复制选中】 【删除选中】 的功能，
....... (2014-10-24 11:22) 

你需要这么做，
onCheckedChanged:
{
    tableModel.setProperty( theRowInWhichCheckBoxSituates, "checked", checked );
}

然后再读取。

请问在tableview中如何设置一列的委托

emiya:
请问在tableview中如何设置一列的委托

忽视我吧 看手册tableviewcolumn可以直接设置委托