QML中的tablview嵌入checkbox问题。



  • QML中tablview怎么实现选中某一行使第一列的CheckBox选中?全选怎么实现?怎么遍历出已选择的行号?



  • @我叫胡孟岳 可以找到currentIndex,然后让ListModel::get获取元素,然后设置checkbox的cheked为true。全选的话,加上for循环。遍历的话,选择行号的时候保存一下,下次遍历就方便了。也可以实现undo等功能。



  • 你说的我不是很明白,代码贴给你帮我看看吧,谢谢。

    TableView{
        id: tableView
        anchors{top: proProListTopImage.bottom; left: parent.left; right: parent.right; bottom: parent.bottom}
        backgroundVisible: false                        //背景不可见
        alternatingRowColors: false
        frameVisible:false
        model: modelProList
        verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    
    
    
        TableViewColumn
        {
            id: checkedColumn
            role: "checked"
            title: qsTr("选择");
            width: tableView.width * 0.2;
        }
    
        TableViewColumn{
            role: "name";
            title: qsTr("工厂编码");
            width: tableView.width * 0.4;
        }
    
        TableViewColumn{
            role: "value";
            title: qsTr("工厂名称");
            width: tableView.width * 0.4;
    
        }
    
        headerDelegate: Rectangle{
            color: "#414549"
            height: inventorypage.width * (60.0 / 640.0);
            Text{
                anchors.centerIn: parent
                text: styleData.value
                color: "white"
                font.pixelSize:  inventorypage.width * (45.0 / 640.0) * 0.7;
            }
        }
    
        itemDelegate: Item {
            CheckBox
            {
                id: checkbox;
                anchors.centerIn: parent
                visible: isCheckColumn( styleData.column );
                height: (93.0 / 640.0) * inventorypage.width;
                style: CheckBoxStyle {
                    indicator: Rectangle {
                        implicitWidth: inventorypage.width * (30.0 / 640.0);
                        implicitHeight: inventorypage.width * (30.0 / 640.0);
                        color:"#36393b";
                        radius: inventorypage.width * (15.0 / 640.0);
                        border.color:control.activeFocus ? "darkblue" : "lightblue";
                        border.width: 4;
    
                        Image{
                            id: checkStatus;
                            anchors.fill: parent;
                            visible: control.checked;
                            source: diffMonitorImagePath + "tick.png";
                        }
                    }
                }
            }
            Text
            {
                anchors{top: parent.top; topMargin: 0.3* height; right:parent.right}
                anchors{left: parent.left; leftMargin: 10}
                text: styleData.value;
                verticalAlignment: Text.AlignVCenter;
                horizontalAlignment: Text.AlignLeft;
                color: "white";
                anchors.centerIn: parent;
                height: (93.0 / 640.0) * inventorypage.width;
                font.pixelSize:  inventorypage.width * (32.0 / 640.0);
                elide: styleData.elideMode;
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere;
            }
            MouseArea{
                id: mouseArgag
                anchors.fill: parent;
                onClicked: {
                    checkbox.checked = !checkbox.checked;
                }
            }
        }
    
        rowDelegate: Rectangle {
            id: rowRectdelete;
            height: (93.0 / 640.0) * inventorypage.width;
            color:"#36393b";
            Rectangle{
                height: 1;
                width: parent.width;
                anchors.bottom: parent.bottom;
                color: "#6a6a6a";
            }
        }
    }
    function isCheckColumn( columnIndex )
    {
        return tableView.getColumn( columnIndex ) === checkedColumn
    }
    

    我想实现随便点击tablview的某一行,该行第一列的checkbox状态为选中。



  • @我叫胡孟岳 首先我说说 TableView 的原理吧。不然会吃亏的。

    TableView,ListView,GridView,PathView,这些 View 会对视图进行优化,也就是当可见项(数据展示项)在看不到的地方就会销毁,这也是 View 为何可以显示无限个的数据展示项(硬盘为上限,每个数据展示项不能太大,一次能显示的数据展示项个数在合理范围)。

    先看看如下代码:

    ListView {
        model: 1000000 // 这里表示有一百万个数据
        delegate: Text {text: index}    // 显示数据
    }
    

    你会发现,如果真的要渲染一百万个 Text,机身内存是吃不消的,所以在显示上会做优化,也就是看不到的数据展示项,就不创建,当数据展示项超出视图时,就会被销毁。

    在看看如下代码:

    ListView {
        model: 1000000 // 这里表示有一百万个数据
        delegate: CheckBox { }
    }
    

    这里显示了一百万个 CheckBox,每个 CheckBox 都可以保存自己的被选中的状态 checkable。但是就如上面所说的,数据展示项在超出可见范围就会被销毁。也就是数据展示项本身如果保存了数据,在销毁前没有保存的话,就会丢失。

    所以解决的办法也很简单,另外构建一个数据,安装顺序保存这些 CheckBox 的状态值。

    具体项目代码可以查看 ImageExplorer/ImageExplorerPage.qml 第 89 行,以及第 139 行 143 行。

    由于相册显示使用了 GridView,如果每个图片展示项(数据展示项)都放一个 CheckBox 那么,数据展示项超出视图时,就会被销毁。也就不能保存你选择了哪些图片。所以构建一个 ListModel 或者数组保存这些数据即可。



  • 此回复已被删除!

登录后回复
 

与 萌梦社区 的连接断开,我们正在尝试重连,请耐心等待