QML自定义TableView

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

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

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
    }
}
如果大家需要的话，可以下载我这个项目。
[attachment=12574]

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

彩阳

2014-09-09 10:42

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

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

xiuxianshen	2014-09-09 22:06

pangpangpang	2014-09-12 17:53
赞一个彩阳～

woniu600	2014-09-14 17:35
每个item都有 checkbox 和 text. 只是根据列来进行不同的显示..right?

fghfghfgh	2014-09-17 16:38
优秀文章，支持！n神马都是浮云

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

彩阳	2014-09-18 18:27
fghfghfgh:能不能把标题上的 checked 换成一个全选按钮啊 (2014-09-18 15:31) 可以实现，需要定义headerDelegate，并且添加checkBox。最后逻辑上做一点小技巧就好了。

fghfghfgh

2014-10-12 09:40

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

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

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

彩阳

2014-10-12 15:39

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

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

fghfghfgh

2014-10-12 18:39

彩阳:有什么错误显示吗？
如果不显示什么错误的话，请在构建的时候添加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

fghfghfgh

2014-10-12 19:23

彩阳:有什么错误显示吗？
如果不显示什么错误的话，请在构建的时候添加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/*

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

fghfghfgh

2014-10-24 11:22

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

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

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

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

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

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

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

彩阳	2014-10-25 23:42
fghfghfgh:你好 caiyang，很感谢你分享的这个例子，我把你的例子用在了我的项目中，我想实现【全选/反选】【复制选中】【删除选中】的功能， ....... (2014-10-24 11:22) 你需要这么做， onCheckedChanged: { tableModel.setProperty( theRowInWhichCheckBoxSituates, "checked", checked ); } 然后再读取。

emiya	2015-11-12 21:28
请问在tableview中如何设置一列的委托

emiya	2015-11-12 21:44
emiya: 请问在tableview中如何设置一列的委托忽视我吧看手册tableviewcolumn可以直接设置委托

查看完整版本: [-- QML自定义TableView --] [-- top --]

Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled