QML listView中的item中的属性height和visible的简单探究

通过一段简单测试代码来验证height和visible对Item的影响

测试代码如下:

import QtQuick 2.12 import QtQml 2.12 import QtQuick.Window 2.12 Window {
    width: 640
    height: 480
    visible: true
    title: "testListView"
    ListView {
        anchors.fill: parent
        model: testmodel
        delegate: testDelegate
    }
    ListModel {
        id: testmodel
        ListElement {
            name: "Apple"
            cost: 2.45
            mycolor: "#00B000"
            visible: true
            height: 10
        }
        ListElement {
            name: "Orange"
            cost: 3.25
            mycolor: "steelblue"
            visible: false
            height: 20
        }
        ListElement {
            name: "Banana"
            cost: 1.95
            mycolor: "red"
            visible: true
            height:30
        }
        ListElement {
            name: "Orange"
            cost: 3.25
            mycolor: "yellow"
            visible: false
            height: 5
        }
        ListElement {
            name: "Banana"
            cost: 1.95
            mycolor: "green"
            visible: true
            height: 20
        }
    }
    Component {
        id: testDelegate
        Item {
            id: name
            height: {
                console.log(index, model.height)
                return model.height
            }
            width: 100
            visible: model.visible
            Rectangle{
                color:{
                    console.log(index,model.mycolor)
                    return model.mycolor
                }
                anchors.fill: parent
                visible: parent
                Text { text: model.name }
            }
        }
    } }

第一种情况

多个item,当中某个item设置属性visible为false,然后的所造成的结果,就是listview中该item确实不可见,但是,它却占了位置,属于它的那块位置只是透明了。
效果如下图:
test1

可以很明显的看出当中index为1和3位置的item虽然不可见了,但是位置还在。

第二种情况

多个item,我们把某个item高度设置为0,该item在视觉上不可见,达到隐藏的效果,但是实际该item还存在。(将测试代码中listModel第二个 ListElement 的 height值修改为0,visible修改为true),效果如下图:
test2
以下是console.log(index,height)打印出的值
qml: 0 10
qml: 1 0
qml: 2 30
qml: 3 5
qml: 4 20

第三种情况

item中的子控件可以超出item的大小(多个item,我们将代理中的item的height属性修改为固定值20,把测试代码ListElement 所有item的height属性都设置为20,visible属性都修改为true,将测试代码中listModel第一个 ListElement 的 height值修改为40,第二个ListElement的height值修改为0),效果如下图:

test3

总结结论,如果想设置当中某个item不显示,保留数据或index值不想改变的话就把该item(高度/宽度)调为零,不保留数据,index不固定就在model中remove该item,需要时候在insert。然后item中的子控件可以超出item的大小。

当然,以上的只是小土豆本人的一点浅薄的研究,希望大佬帮忙指正。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QML使用QAbstractItemModel需要通过C++代码编写自定义的QAbstractItemModel子类。下面是一个简单的示例: 1. 编写自定义的QAbstractItemModel子类 ``` // mymodel.h #ifndef MYMODEL_H #define MYMODEL_H #include <QAbstractItemModel> class MyModel : public QAbstractItemModel { Q_OBJECT public: explicit MyModel(QObject *parent = nullptr); // 获取模型数据的数量和索引 int rowCount(const QModelIndex &parent = QModelIndex()) const override; int columnCount(const QModelIndex &parent = QModelIndex()) const override; QModelIndex index(int row, int column, const QModelIndex &parent = QModelIndex()) const override; // 获取模型数据 QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override; private: QStringList m_data; }; #endif // MYMODEL_H ``` ``` // mymodel.cpp #include "mymodel.h" MyModel::MyModel(QObject *parent) : QAbstractItemModel(parent) { // 初始化模型数据 m_data << "Item 1" << "Item 2" << "Item 3"; } int MyModel::rowCount(const QModelIndex &parent) const { if (parent.isValid()) return 0; return m_data.count(); } int MyModel::columnCount(const QModelIndex &parent) const { if (parent.isValid()) return 0; return 1; } QModelIndex MyModel::index(int row, int column, const QModelIndex &parent) const { if (parent.isValid() || row < 0 || row >= m_data.count() || column < 0 || column >= 1) return QModelIndex(); return createIndex(row, column); } QVariant MyModel::data(const QModelIndex &index, int role) const { if (!index.isValid()) return QVariant(); if (role == Qt::DisplayRole || role == Qt::EditRole) return m_data.at(index.row()); return QVariant(); } ``` 2. 在QML使用自定义的QAbstractItemModel子类 ``` // main.qml import QtQuick 2.0 import QtQuick.Controls 2.0 ApplicationWindow { visible: true width: 400 height: 400 // 创建自定义模型 MyModel { id: myModel } // 使用ListView显示模型数据 ListView { anchors.fill: parent model: myModel delegate: Text { text: model.display } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值