FlowLayout 自定义布局

在上一次学习 QT（8）变动布局Dynamic Layout中，我们在此总结一下：对于修改布局，可以通过removeWidget后在根据新的位置重新加载。为了创建新的合适的布局，我们需要重新resize布局的大小。我们需要注意到在修订时，要考虑组建之间的空间，即spacing()。对如删和增都需要考虑QSize(spacing(),spacing())。

在本次，我们延续QT（7）的学习，再次对layout的继承进行学习。参考http://doc.qt.nokia.com/latest/layouts-flowlayout.html/。在此之前，我们对QT编译中碰到的一些问题进行记录：

问题1：编译中出现make : g++没有找到

对于ubuntu可以使用apt-get install g++，但是在采用yum的系统，例如MeeGo，没有g++的包，yum那里采用了另外的名字yum install gcc-c++。

问题2：编译中出现undefined reference to `vtable for xxxx（某个类名）'

出去这种情况，需要检查*.pro文件，看看是否将所需的*.h和*.cpp加入，或者加入一些空文件。

记录1：制定moc生成文件存放的目录

moc命令将含Q_OBJECT的头文件转换成标准.h文件，在我们定义Q_OBJECT后，很可能会生成moc_xxxxx.cpp的文件。方式：MOC_DIR = build。

言归正卷，我们这次建立一个自定的layout，上面的widget，根据我们addWidget的先后顺序，从左向右排序，如果超过范围，就从下一排开始，也是从左向右，很像现代文字的书写方式。如图所示：

    

搭建程序框架

qtmain.cpp为主程序，mywindow.h和mywindow.cpp为窗口类，flowlayout.h和flowlayout.cpp是我们用于构造我们布局QLayout的子类。mywindow.cpp如下：

MyWindow :: MyWindow()
{
    FlowLayout * layout = new FlowLayout();
    layout->addWidget (new QPushButton(tr("Short")));
    layout->addWidget (new QPushButton(tr("Longer")));
    layout->addWidget (new QPushButton(tr("Different Text")));
    layout->addWidget (new QPushButton(tr("More Text")));
    layout->addWidget (new QPushButton(tr("This is a long text button!")));
    setLayout(layout);
    setWindowTitle("FlowLayout Test!");
}

构造自定义的布局QLayout子类：存放QLayoutItem

我们在QT（7）中学习过，这里我们使用一个QList<QLayoutItem *> itemList来存放我们的item，并且进行了addItem，count，itemAt(int index)，takeAt(int index)这几个virtual方法，同时在释放方法~FlowLayout()中清空itemList，并释放空间。这里，将并在详细说明。可以参见参考中给出的源代码。

完成构建函数

在MyWindow类中，我们并不需要有特别的构造函数。在Layout中，计算margin，也就是各widget之间的空隙是一个很麻烦的事情。在例子中，我们提供可定制margin（缺省值为11，由于缺省的边框为1，所以11大抵重视觉角度看就是10px），这是Layout之间的留边位置，同时我们也设定了组件之间的间隔大小（m_hSpace，m_vSpace），如下：

FlowLayout :: FlowLayout(QWidget * parent,int margin,int hSpacing,int vSpacing)
            : QLayout(parent),m_hSpace(hSpacing),m_vSpace(vSpacing)
{
    setContentsMargins(margin,margin,margin,margin);
}

这里我们看到一个有趣的写法，实际上其等同与在方法中运行了：

QLayout(parent);
m_hSpace = hSpacing;
m_vSpace = vSpacing;

给出Layout的尺寸大小

Qt::Orientations FlowLayout::expandingDirections() const
{
    return 0;
}

这里我们要求button并会自动补充空白位置，所有给出0。对于Layout的尺寸大小，重要的是minimumSize()和sizeHint()两个。如下面。QSize可以通过要求增加某个尺寸大小的文字，它看自动进行调整计算，并需要我们精确计算。最佳大小，我们设置等同于最小尺寸。

QSize FlowLayout::minimumSize() const
{
    QSize size;
    QLayoutItem * item;
    foreach(item,itemList)
        size = size.expandedTo(item->minimumSize());
    size += QSize(2*margin(),2*margin());
    return size;
}

QSize FlowLayout::sizeHint() const
{
    return minimumSize();
}

我们补充继承两个方法，用于获取组件之间间隔大小：

int FlowLayout::horizontalSpacing() const
{
    if(m_hSpace >= 0)
        return m_hSpace;
    else
        return smartSpacing(QStyle::PM_LayoutHorizontalSpacing /* Default horizontal spacing for a QLayout.*/);
}

int FlowLayout::verticalSpacing() const
{
    if(m_vSpace >= 0 )
        return m_vSpace;
    else
        return smartSpacing(QStyle::PM_LayoutVerticalSpacing);
}

int FlowLayout::smartSpacing(QStyle::PixelMetric pm) const  //这是我们定义的private方法，用于从parent中获得widget之间的间隔
{
    QObject * parent = this->parent();
    if(!parent){
        return -1;
    }else if(parent->isWidgetType()){
        QWidget * pw = static_cast<QWidget *>(parent);
        return pw->style()->pixelMetric(pm,0,pw);
    }else{
        return static_cast<QLayout*>(parent)->spacing();
    }
    return 0;
}

进行布局

布局采用setGemetry，这个我们在QT（7）中也介绍过：

void FlowLayout::setGeometry(const QRect & rect)
{
    QLayout::setGeometry(rect);
    doLayout(rect,false);
}

下面我们根据需求，对doLayout进行说明：

int FlowLayout::doLayout(const QRect & rect, bool testOnly) const
{
    int left,top,right,bottom;
   
    getContentsMargins(&left,&top,&right,&bottom);
    QRect effectiveRect = rect.adjusted(left,top,-right,-bottom);
    int x = effectiveRect.x();
    int y = effectiveRect.y();
    int lineHeight = 0;

我们第一步，先计算有效的摆放widget的尺寸effectiveRect。

    QLayoutItem * item;
    foreach(item,itemList){
        //It then sets the proper amount of spacing for each widget in the layout, based on the current style.
        QWidget * wid = item->widget();
        int spaceX = horizontalSpacing();
        if(spaceX == -1)
            spaceX = wid->style()->layoutSpacing(QSizePolicy::PushButton,QSizePolicy::PushButton,Qt::Horizontal);    
        int spaceY = verticalSpacing();
        if(spaceY == -1)
            spaceY = wid->style()->layoutSpacing(QSizePolicy::PushButton,QSizePolicy::PushButton,Qt::Vertical)；

在这里，我们获取一些基本的数据，包括每一个item，其大小为item->sizeHint()，在水平方向各组件之间的间隔spaceX以及竖直方向的间隔spaceY。我们将在effectiveRect内顺序排列widget。下面我们来进行计算，设置各个item的setGeometry，需要获取每个item的起始左上角坐标。

        int nextX = x + item->sizeHint().width() + spaceX;//下一个组件的左上角位置的x坐标
        if(nextX - spaceX > effectiveRect.right() && lineHeight > 0){ //如果超出位置，换行，重新计算(x,y)坐标
            x = effectiveRect.x();
            y = y + lineHeight + spaceY;
            nextX = x+item->sizeHint().width() + spaceX;
            lineHeight = 0;
        }
        if(!testOnly)  //设置item的位置
            item->setGeometry(QRect(QPoint(x,y),item->sizeHint()));
        x = nextX;
        lineHeight = qMax(lineHeight,item->sizeHint().height());
    }

    return y + lineHeight - rect.y() + bottom; //返回需要限制所有组件，layout至少要多高
}

对于setGeometry，我们并不需要返回值，但是我们发现，如果组件多，有多行摆放，有时无法全部显示，这在初始显示和我们改变window大小的时候可能会出现，而doLayout就返回了layout显示所有组件时至少需要的height。因此我在width改变是需要重新计算height，需要设置hasHeightForWidth()为true，并heightForWidth返回相应的值。

bool FlowLayout::hasHeightForWidth() const
{
    return true;
}

int FlowLayout::heightForWidth(int width) const
{
    int height = doLayout(QRect(0,0,width,0),true);
    return height;
}

相关链接：我的MeeGo/Moblin相关文章