动态修改QGridLayout

项目的图片浏览中需要单图、双图、四图等显示模式，之前使用QGraphicsScene显示多种图片，但这种方式扩展性不佳。当我们需要将每个图片组件包装成QWidget时，使用QGrapchicsScene就十分繁琐，不如使用布局管理器QGridLayout。切换模式时，只需修改布局管理器即可。下面，简单介绍我现在的程序思路：

如上图所示，在SpaceContainer中包含一个或多个WorkSpaceWidget，使用QGridLayout作为布局管理器，根据显示模式，动态更新SpaceContainer中的布局。

1. 使用QGridLayout作为布局管理器

在SapceContainerWidget的构造函数中调用

1 2 3

setLayout ( work_space_layout_ ) ;

指定QGridLayout为整个部件的布局管理器。

2. 设计布局与部件的对应关系

我使用QList  work_space_widgets_存储子部件，网格中的部件按行序与该列表中的部件一一对应。单图、双图、四图就是列表中含有1个、2个、4个元素。

切换模式时，首先判断列表中的元素个数是否大于模式，比如4图切换到2图，列表中的元素就需要被删除，使用removeWidget将部件从网格中移除。

1 2 3 4 5 6 7 8

while ( work_space_widgets_ . size ( ) > 1 ) {      WorkSpaceWidget * a_work_space_widget = work_space_widgets_ . takeLast ( ) ;      work_space_layout_ -> removeWidget ( a_work_space_widget ) ;      a_work_space_widget -> deleteLater ( ) ; }

然后判断列表中元素个数是否小于模式，比如2图切换到4图，就需要新建元素。

1 2 3 4 5 6 7 8 9 10 11 12

while ( work_space_widgets_ . size ( ) < 2 ) {    int current_index = work_space_widgets_ . size ( ) ;    int col = current_index % 2 ;    int row = ( current_index - col ) / 2 ;      work_space_widgets_ . append ( new WorkSpaceWidget ( this ) ) ;    work_space_widgets_ . last ( ) -> setRootImage ( work_space_widgets_ . first ( ) -> getRootImage ( ) ) ;    work_space_layout_ -> addWidget ( work_space_widgets_ . last ( ) , row , col ) ; }

3. 调整显示格式

以上代码能实现网格动态变化，但还有些地方需要改进。比如，我从单图切换到双图，显示如下：

可以看到，网格没有均匀分布，第二个网格占据太多地方。这涉及到QGridLayout的ColumnStretch属性。下面是Qt文档中对该属性的说明。

The stretch factor is relative to the other columns in this grid. Columns with a higher stretch factor take more of the available space.

The default stretch factor is 0. If the stretch factor is 0 and no other column in this table can grow at all, the column may still grow.

可以看出，对所有的网格设置相同的ColumnStretch，就应该实现均匀网格分布。

我在增加新的元素到网格后添加下面的代码

1 2 3

work_space_layout_ -> setColumnStretch ( col , 1 ) ;

将所有列的Stretch设为1。如此，可以网格均匀分布了。

但带来新的问题，当我从2图或4图切换回1图时，得到下面的结果：

当从QGridLayout中删除一列时，该列空间位置依旧保留。

从QGridLayout中删除一列或一行

参照StackOverflow上的《Removing widgets from QGridLayout》，我发现其中给出的代码中最关键的一行，需要在移除该网格上的widget后，将删除列或行的Stretch设为0！

1 2 3 4

work_space_layout_ -> setColumnStretch ( 1 , 0 ) ; work_space_layout_ -> setRowStretch ( 1 , 0 ) ;

如此，可以任意切换模式。