[Qt基础内容-10] Qt MVC的V(View)

[Qt基础内容-10] Qt MVC的V(View)

Qt有自己的MVC框架,分别是model(模型)、view(视图)、delegate(委托),这篇文章,简单的介绍以下Qt中有关view(视图)的类以及一些基本的使用。
Qt官方的文档已经很详细了,如果想要详细的去了解,不如花点精力去看官方文档。


这篇也是MVC介绍的最后一篇了,本人水平有限,所以只浅显的解释一下这些部分的基本使用,能够给到大家一点帮助最好,本意是想通过写文章的方式,来巩固自己学习的内容。所以,如果有错误,欢迎各位指正。后续如果有新的理解,或者发现自己哪里写的不太正确的,都会进行更新哒。

类的继承结构

老样子,我们先来介绍类的继承结构:

QAbstractItemView

由于View的类,有很多的属性以及基本的信号,所以先介绍一下QAbstractItemView的一些属性,以及属性呈现的效果。

属性(Properties)

  1. alternatingRowColors

    这个属性的作用是,使得表格出现交替色。
    例如:
    image.png

    ui->tableView->setAlternatingRowColors(true);
    

    通过样式表来修改交替的颜色:

    QTableView::item:!alternate{
        background-color: green;
    }
    
    QTableView::item:alternate{
        background-color: blue;
    }
    

    image.png

  2. autoScorll

    这个属性的作用是设置当拖动表格内部内容时,会不会自动滚动。
    例如:
    PluginForMyDemo_qONHBFaHRq.gif

    ui->listView->setAutoScroll(false);
    // 设置成不自动滚动
    

    PluginForMyDemo_5xEmSYu37W.gif

  3. autoScorllMargin

    This property controls the size of the area at the edge of the viewport that triggers autoscrolling.

    此属性控制viewport边缘触发自动滚动的区域的大小

  4. defaultDropAction

    当拖拽表格内的一个项的时候,松开鼠标时,所出现的默认动作。如果不进行设置,默认是一个CopyAction。
    例如:
    首先设置表格可以拖拽

    // 设置表格可拖拽
    ui->listView->setDragEnabled(true);
    ui->listView->setDragDropMode(QAbstractItemView::DragDrop);
    

    默认情况下,拖动放下是复制动作:
    PluginForMyDemo_XIoRaokLW6.gif
    这个点没太搞明白是咋回事。

  5. dragDropMode

    拖拽的模式。
    image.png

  6. dragDropOverwriteMode

    如果其值为 true,则所选数据在drop时将覆盖现有项目数据,而移动数据将清除该项目。如果其值为 false,则在drop数据时,所选数据将作为新项插入。移动数据时,也会删除该项。

  7. dragEnable

    其值为true时,则允许拖拽。

  8. editTriggers

    这个属性保存了view的编辑触发方式。
    例如:
    QListView在默认情况下,编辑触发方式为双击以及编辑按钮:QFlagsQAbstractItemView::EditTrigger(DoubleClicked|EditKeyPressed)
    PluginForMyDemo_lgyagPmIQJ.gif
    下面我们把这个属性修改一下,改成SelectedClicked

    ui->listView->setEditTriggers(QAbstractItemView::SelectedClicked);
    

    PluginForMyDemo_syLclUgv2x.gif

  9. horizontalScrollMode

    此属性控制视图如何水平滚动其内容

  10. iconSize

    此属性控制item的图标大小
    首先,我们需要给添加的item设置icon

    model->item(0, 0)->setIcon(QIcon("D:/gaobo/BrowserDownload/text.png"));
    

    image.png
    然后我们修改icon的大小

    ui->tableView->setIconSize(QSize(64, 64));
    

    image.png
    本人测试的结果是,iconSize最大也只能是图片的大小。向上图的例子,即使你把iconSize设置成QSize(128, 128),icon的大小还是64*64。

  11. selectionBehavior

    此属性保存选择的行为。
    image.png
    例如:
    正常情况下,行、列、单个项都可以选中
    PluginForMyDemo_8cIuDQXEKC.gif
    设置为只选择行后:

    ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);
    

    PluginForMyDemo_sJIRPC9EMp.gif

  12. selectionMode

    此属性保存选择的模式。
    image.png

  13. showDropIndicator

    此属性设置是否显示拖拽式的拖拽指示器。
    PluginForMyDemo_chu5qMBqQT.gif
    设置成不显示后:

    ui->tableView->setDropIndicatorShown(false);
    

    PluginForMyDemo_VpkHN3jeZ9.gif

  14. tabKeyNavigation

    此属性设置是否启动tab和backtab键

  15. textElideMode

    此属性保存省略文本中“…”的位置

QColumnView

在往QColumnView里添加数据后,呈现的效果为:

QStandardItemModel* columnModel = new QStandardItemModel;
QStandardItem* item_1 = new QStandardItem("1");
QStandardItem* item_1_1 = new QStandardItem("1-1");
QStandardItem* item_1_2 = new QStandardItem("1-2");
QStandardItem* item_1_3 = new QStandardItem("1-3");

QStandardItem* item_2 = new QStandardItem("2");
QStandardItem* item_2_1 = new QStandardItem("2-1");
QStandardItem* item_2_1_1 = new QStandardItem("2-1-1");
QStandardItem* item_2_1_2 = new QStandardItem("2-1-2");
QStandardItem* item_2_1_3 = new QStandardItem("2-1-3");
item_2_1->appendRows({item_2_1_1, item_2_1_2, item_2_1_3});

QStandardItem* item_2_2 = new QStandardItem("2-2");
QStandardItem* item_2_2_1 = new QStandardItem("2-2-1");
QStandardItem* item_2_2_2 = new QStandardItem("2-2-2");
QStandardItem* item_2_2_3 = new QStandardItem("2-2-1");
item_2_2->appendRows({item_2_2_1, item_2_2_2, item_2_2_3});

QStandardItem* item_2_3 = new QStandardItem("2-3");
QStandardItem* item_2_3_1 = new QStandardItem("2-3-1");
QStandardItem* item_2_3_2 = new QStandardItem("2-3-2");
QStandardItem* item_2_3_3 = new QStandardItem("2-3-3");
item_2_3->appendRows({item_2_3_1, item_2_3_2, item_2_3_3});

item_1->appendRows({item_1_1, item_1_2, item_1_3});
item_2->appendRows({item_2_1, item_2_2, item_2_3});

columnModel->appendRow(item_1);
columnModel->appendRow(item_2);

ui->columnView->setModel(columnModel);

PluginForMyDemo_HEWSxA8jxR.gif
QColumnView的属性以及属性对应呈现的效果为:

  1. resizeGripsVisible

    此属性用于指定列表视图是否获得调整大小的控制
    调用setResizeGripVisible来设置这个属性。

    ui->columnView->setResizeGripsVisible(false);
    

    YOojL0DRAw.png
    由图中可以看到,当我们把这个属性设置成false时,拖动调整大小的部位消失了。

QListView

最基础的QListView使用方式如下:

QStringListModel *m_listModel = new QStringListModel;
QStringList list  = {"EEEEEEEEEEEEEEE EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE",
                     "AAA", "CCC", "BBB", "DDD","111", "222", "333", "444",
					 "555", "a.jpg", "b.jpg"};

m_listModel->setStringList(list);
ui->listView->setModel(m_listModel);
ui->listView->show();

image.png
QListView的属性以及属性对应呈现的效果为:

  1. batchSize

    This property holds the number of items laid out in each batch if layoutMode is set to Batched

    如果布局Mode设置为“批处理”,则此属性保存每个批次中布局的项目数

  2. flow

    此属性设置QListView中的项排布方向。默认情况下,是TopToButtom。在view可见时设置此属性将导致item再次排列。
    qtcreator_reTDFtRKu4.png
    image.png
    修改方向之后:
    image.png

  3. gridSize

    此属性设置布局时的栅格大小。
    配合isWrapping、flow属性一起使用后:

    ui->listView->setFlow(QListView::LeftToRight);
    ui->listView->setGridSize(QSize(40, 40));
    ui->listView->setWrapping(true);
    

    image.png

  4. isWrapping

    此属性设置是否让item换行。
    image.png
    设置为true之后,

    ui->listView->setWrapping(true);
    

    image.png

  5. itemAlignment

    此属性控制item的位置。只有在当前模式为ListModel以及isWarpping这个属性为true时,才会有效果。
    image.png

    ui->listView->setWrapping(true);
    ui->listView->setItemAlignment(Qt::AlignRight);
    

    image.png

  6. layoutMode

    此属性设置布局的模式。
    image.png

    This property holds the layout mode for the items. When the mode is SinglePass (the default), the items are laid out all in one go. When the mode is Batched, the items are laid out in batches of batchSize items, while processing events. This makes it possible to instantly view and interact with the visible items while the rest are being laid out.

    此属性保存项的布局模式。当模式为 SinglePass(默认值)时,将一次性布置所有项目。当模式为“批处理”时,在处理事件时,将按批次的批次大小项目进行布局。这样就可以在布置其余项目时立即查看可见项目并与之交互。

  7. modelColumn

    此属性保存模型中可见的列。也就是说,如果有一个多列的model,设置这个modelColumn来设置显示哪一列。默认是显示第一列。

    QStandardItemModel *model = new QStandardItemModel();
    model->setItem(0, 0, new QStandardItem(""));
    model->setItem(1, 0, new QStandardItem(""));
    model->setItem(2, 0, new QStandardItem(""));
    model->item(0, 0)->setIcon(QIcon("D:/gaobo/BrowserDownload/text.png"));
    model->setItem(0, 1, new QStandardItem("11"));
    model->setItem(1, 1, new QStandardItem("22"));
    model->setItem(2, 1, new QStandardItem("50"));
    model->setItem(0, 2, new QStandardItem("1"));
    model->setItem(1, 2, new QStandardItem("2"));
    model->setItem(2, 2, new QStandardItem("3"));
    
    ui->listView->setModel(model);
    ui->listView->setModelColumn(1);
    

    image.png

  8. movement

    image.png
    此属性保存item是否可以自由移动(Free)、捕捉到网格(Snap)或根本无法移动(Static)。

  9. resizeMode

    此属性设置当view重新调整大小时,item需不需要重新布局。

  10. selectionRectVisible

    此属性设置是否显示区域选中的矩形框,默认是不显示。
    PluginForMyDemo_UjxDkDnpGl.gif
    设置显示之后

    ui->listView->setSelectionRectVisible(true);
    

    PluginForMyDemo_UpfDkfgUaI.gif

  11. spacing

    此属性设置item之间的间隔。
    image.png
    设置间隔之后呈现如下效果:

    ui->listView->setSpacing(10);
    

    image.png

  12. uniformItemSizes

    此属性设置是否所有的item都是同一个大小
    image.png
    设置为true之后:

    ui->listView->setUniformItemSizes(true);
    

    image.png

  13. viewMode

    此属性设置QListView的视图模式
    image.png

  14. wordWrap

    如果此属性为 true,则在必要时在分词符处换行;
    image.png

    ui->listView->setWordWrap(true);
    

    image.png

至此,QListView的属性就介绍完了。

QTableView

最基础的QTableView使用方式如下:

QStandardItemModel *model = new QStandardItemModel();
model->setItem(0, 0, new QStandardItem(""));
model->setItem(1, 0, new QStandardItem(""));
model->setItem(2, 0, new QStandardItem(""));
model->setItem(0, 1, new QStandardItem("11"));
model->setItem(1, 1, new QStandardItem("22"));
model->setItem(2, 1, new QStandardItem("50"));
model->setItem(0, 2, new QStandardItem("1"));
model->setItem(1, 2, new QStandardItem("2"));
model->setItem(2, 2, new QStandardItem("3"));

ui->tableView->setModel(model);

QTableView的属性以及属性对应呈现的效果为:

  1. cornerButtonEnabled

    此属性设置左上角的按钮是否启用,如果启用,点击左上角的按钮则会全选表格,默认情况是启用的。
    PluginForMyDemo_qtt6bCJd3J.gif
    把这个关闭之后:

    ui->tableView->setCornerButtonEnabled(false);
    

    PluginForMyDemo_ns3kGWwONZ.gif

  2. gridStyle

    此属性设置表格的网格线的风格。
    image.png
    默认情况下是一个实线
    PluginForMyDemo_btFXjDDG28.png
    在修改成虚线之后:

    ui->tableView->setGridStyle(Qt::DashLine);
    

    PluginForMyDemo_CAEkj1oz3r.png
    注意,修改此属性,必须先设置showGrid属性为true

  3. showGrid

    此属性设置是否显示网格线。默认是true
    当设置不显示网格线时:
    image.png

  4. sortingEnabled

    此属性设置是否允许排序,默认是禁用排序;注意,当调用setSortingEnable函数之后,会自动调用sortByColumn来进行一次排序。

  5. wordWrap

    同上面介绍的QListView的wordWrap属性一致。

QTreeView

最基础的QTreeView使用方式如下:

QFileSystemModel* fileModel = new QFileSystemModel();
fileModel->setRootPath("D:/Desktop");

ui->treeView->setModel(fileModel);
ui->treeView->setRootIndex(fileModel->index("D:/Desktop"));

QTreeView的属性以及属性对应呈现的效果为:

  1. allColumnsShowFocus

    此属性设置是不是为所有列都显示键盘焦点。默认情况是false。
    image.png
    设置成true之后:

    ui->treeView->setAllColumnsShowFocus(true);
    

    image.png
    图中可以看到,有焦点的地方,有一个虚线框。

  2. animated

    此属性设置分支的展开或者收起是否有动画,默认是false
    PluginForMyDemo_WtEuXG9JEb.gif
    启用动画后:

    ui->treeView->setAnimated(true);
    

    PluginForMyDemo_4oZ0l5NC0u.gif

  3. autoExpandDelay

    此属性设置当拖动一个项到一个分支时,分支会延时一段时间之后,自动展开。默认值是-1,代表关闭自动展开功能。
    开启之后,效果如下:

    ui->treeView->setAutoExpandDelay(100);
    ui->treeView->setDragEnabled(true);
    ui->treeView->setDragDropMode(QAbstractItemView::DragDrop);
    

    PluginForMyDemo_2gvEg8RX5g.gif

  4. expandsOnDoubleClick

    此属性设置是否可以双击展开或收起,默认是可以。
    PluginForMyDemo_MB0H5PtXHl.gif
    设置为false之后

    ui->treeView->setExpandsOnDoubleClick(false);
    

    PluginForMyDemo_rAsIbs3b3E.gif

  5. headerHidden

    此属性设置表头是否隐藏,默认是展示的。
    image.png
    隐藏后,

    ui->treeView->setHeaderHidden(true);
    

    image.png

  6. indentation

    此属性设置项的缩进,
    image.png
    设置更大的缩进后:

    ui->treeView->setIndentation(40);
    

    image.png

  7. itemsExpandable

    此属性设置item是不是可展开的,默认是可展开的。
    当设置为不可展开后:
    PluginForMyDemo_Zn4fyzKhVX.gif

  8. rootIsDecorated

    此属性保存是否显示用于展开和折叠顶级项的控件,默认是true,当设置为false后:
    image.png

  9. sortingEnabled

    同QTableView的sortingEnable属性

  10. uniformRowHeights

    类似与QListView的uniformItemSizes属性,此处是统一的行高

  11. wordWrap

    同QListView的wordWarp属性

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt MVVM(Model-View-ViewModel)是一种基于Qt框架的设计模式,用于构建用户界面(UI)和业务逻辑的解耦合的应用程序。它是基于传统的MVC(Model-View-Controller)模式的进一步演化。 在Qt MVVM中,Model负责数据的管理和操作,它提供了底层数据对象和数据操作的接口。View是用户界面的呈现,它通过绑定机制和ViewModel交互,以显示数据和响应用户的操作。ViewModel是连接Model和View的桥梁,它将Model的数据转化为View所需的格式,并将用户的输入和操作转化为Model所需的格式。ViewModel还提供了数据绑定机制,以确保Model和View之间的同步。 通过使用Qt MVVM,我们可以实现以下优点: 1. 解耦合:通过将业务逻辑与用户界面解耦合,使得代码易于维护和测试。ViewModel充当了Model和View之间的中间层,使得它们可以独立地进行修改和调整。 2. 可维护性:由于代码的解耦合,使得我们可以更容易地对应用程序进行修改和更新。当需要改变用户界面或业务逻辑时,只需要修改ViewModel或Model的代码,而不会影响其他部分。 3. 可测试性:MVVM模式提供了更好的测试性,我们可以更容易地编写单元测试,以验证Model和ViewModel的功能是否正常工作。这使得我们可以更好地管理和保证代码的质量。 4. 数据绑定:Qt MVVM提供了高效的数据绑定机制,使得我们可以非常简便地将数据与用户界面关联起来。这大大减少了手动更新UI的工作量,提高了开发效率。 总之,Qt MVVM是一种强大的设计模式,可以帮助我们构建易于维护和测试的应用程序。通过解耦合和数据绑定,它提供了一种更合理和高效的方法来管理用户界面和业务逻辑之间的交互。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值