Qt入门-layout布局

http://blog.csdn.net/xgbing/article/details/7764326

        开发一个图形界面应用程序,界面的布局影响到界面的美观。在设计一个界面之前,应该考虑到开发的界面可能给不用的用户使用,而用户的屏幕大小、纵横比例、分辨率可能不同,界面还可能是可缩放的,程序应该可以适应这些变化。

        前面的程序中都是使用setGeometry()方法定位控件的位置,这个方法比较笨拙。试想如果控件很多,布局这些控件需要编写大量的代码。幸运的是,QT提供了更好的方法布局控件。

        常用的三种布局方法:

(1)使用水平布局类QHBoxLayout;

(2)使用垂直布局类QVBoxLayout;

(3)使用网格布局类QGridLayout。

这三种方法可以嵌套使用。

控件在布局时可以先不指定父窗口,最后交由Layout统一指定。

示例:

[cpp] view plaincopy

  1. #include <QApplication>
  2. #include <QDialog>
  3. #include <QPushButton>
  4. #include <QLineEdit>
  5. #include <QLayout>
  6. #include <QLabel>
  7. int main(int argc, char *argv[])  
  8. {  
  9.     QApplication a(argc, argv);  
  10.     QDialog *mainWindow = new QDialog;  
  11.     QHBoxLayout *topLayout = new QHBoxLayout;  
  12.     QLabel *lbl = new QLabel(QWidget::tr("&Input:"), mainWindow);  
  13.     QLineEdit *lineEdt = new QLineEdit(mainWindow);  
  14.     lbl->setBuddy(lineEdt);  
  15.     topLayout->addWidget(lbl);  
  16.     topLayout->addWidget(lineEdt);  
  17.     QHBoxLayout *bomLayout = new QHBoxLayout;  
  18.     QPushButton *btn_ok = new QPushButton(QWidget::tr("OK"), mainWindow);\  
  19.     btn_ok->setDefault(true);  
  20.     QPushButton *btn_cancel = new QPushButton(QWidget::tr("Cancel"), mainWindow);  
  21.     bomLayout->addStretch();  
  22.     bomLayout->addWidget(btn_ok);  
  23.     bomLayout->addStretch();  
  24.     bomLayout->addWidget(btn_cancel);  
  25.     bomLayout->addStretch();  
  26.     QVBoxLayout *mainLayout = new QVBoxLayout;  
  27.     mainLayout->addLayout(topLayout);  
  28.     mainLayout->addLayout(bomLayout);  
  29.     mainWindow->setLayout(mainLayout);  
  30.     mainWindow->resize(300, 100);  
  31.     mainWindow->setWindowTitle(QWidget::tr("Qt Test"));  
  32.     mainWindow->show();  
  33. return a.exec();  
  34. }  

编译运行,界面如下:

在界面中,最外部是mainLayout,它的类型是垂直布局类QVBoxLayout。它包含了两个水平布局类QHBoxLayout,分别是topLayout和bomLayout。

比起QHBoxLayout和HVBoxLayout, QGridLayout运用更加灵活。

QGridLayout的常用方法

(1)addWidget:

[cpp] view plaincopy

  1. //放置一个控件到一个单元格
  2. void    addWidget ( QWidget * widget, int row, int column, Qt::Alignment alignment = 0 )  
  3. //如果放置的控件超出一个单元格,则使用该方法
  4. void    addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )  

    1)row:指放置控件的网格行号(行号从0开始);

    2)colum:指放置控件的网格列号(从0开始);

    3)alignment:对齐方式。

    4)fromRow:指放置控件的起始网格行号;

    5)fromColumn:指放置控件的起始网格列号;

    6)rowSpan:指放置控件占多少行;

    7)columnSpan:指放置控件占多少列。

(2)addLayout

[cpp] view plaincopy

  1. void    addLayout ( QLayout * layout, int row, int column, Qt::Alignment alignment = 0 )  
  2. void    addLayout ( QLayout * layout, int row, int column, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )  

参数与addWidget类似。

(3)setSpacing

[cpp] view plaincopy

  1. void QGridLayout::setSpacing ( int spacing )  

设置控件水平和垂直之间的间隔。 示例:

[cpp] view plaincopy

  1. #include <QApplication>
  2. #include <QDialog>
  3. #include <QPushButton>
  4. #include <QLineEdit>
  5. #include <QLayout>
  6. #include <QLabel>
  7. #include <QTextEdit>
  8. int main(int argc, char *argv[])  
  9. {  
  10.     QApplication a(argc, argv);  
  11.     QDialog *mainWindow = new QDialog;  
  12.     QGridLayout *gridLayout = new QGridLayout;  
  13.     gridLayout->setColumnStretch(0, 1);  
  14.     gridLayout->setColumnStretch(1, 4);  
  15.     gridLayout->setColumnStretch(2, 1);  
  16.     gridLayout->setColumnStretch(3, 1);  
  17.     gridLayout->setColumnStretch(4, 4);  
  18.     gridLayout->setMargin(15);  
  19.     gridLayout->setColumnMinimumWidth(2, 15);  
  20.     QLabel *lbl1 = new QLabel(QWidget::tr("First Name:"));  
  21.     QLineEdit *edit1 = new QLineEdit;  
  22.     QLabel *lbl2 = new QLabel(QWidget::tr("Last Name:"));  
  23.     QLineEdit *edit2 = new QLineEdit;  
  24.     QLabel *lbl3 = new QLabel(QWidget::tr("Sex:"));  
  25.     QLineEdit *edit3 = new QLineEdit;  
  26.     QLabel *lbl4 = new QLabel(QWidget::tr("Birthday:"));  
  27.     QLineEdit *edit4 = new QLineEdit;  
  28.     QLabel *lbl5 = new QLabel(QWidget::tr("Address:"));  
  29.     QTextEdit *textEdt = new QTextEdit;  
  30.     gridLayout->addWidget(lbl1, 0, 0);  
  31.     gridLayout->addWidget(edit1, 0, 1);  
  32.     gridLayout->addWidget(lbl2, 0, 3);  
  33.     gridLayout->addWidget(edit2, 0, 4);  
  34.     gridLayout->addWidget(lbl3, 1, 0);  
  35.     gridLayout->addWidget(edit3, 1, 1);  
  36.     gridLayout->addWidget(lbl4, 1, 3);  
  37.     gridLayout->addWidget(edit4, 1, 4);  
  38.     gridLayout->addWidget(lbl5, 2, 0);  
  39.     gridLayout->addWidget(textEdt, 3, 0, 2, 5);  
  40.     mainWindow->setLayout(gridLayout);  
  41.     mainWindow->resize(400, 150);  
  42.     mainWindow->setWindowTitle(QWidget::tr("Qt Test"));  
  43.     mainWindow->show();  
  44. return a.exec();  
  45. }  

编译运行,界面如图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

5478
来自专栏郭霖

Android高级图片滚动控件,编写3D版的图片轮播器

大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了...

8098
来自专栏非著名程序员

基础篇章:React Native 之 View 和 Text 的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 从今天开始我们进入基础组件也就是一些简单控件...

2895
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

1593
来自专栏HT

基于HTML5 WebGL实现3D飞机叶轮旋转

在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各...

2438
来自专栏Alan's Lab

iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一。不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太...

1912
来自专栏hightopo

基于HT for Web矢量实现3D叶轮旋转

1264
来自专栏青玉伏案

iOS开发之画图板(贝塞尔曲线)

  贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能。如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解。这篇博文...

25810
来自专栏陈满iOS

iOS·长按保存图片到相册:系统原生UIActionSheet与UIAlertView,UIAlertController等方案

951
来自专栏程序员互动联盟

【专业技术】Win32创建异形窗口

大家都见过在windows下各种气泡窗口、输入法窗口已经其他一些窗口,这些窗口看起来不像传统的windows窗那样,上面是标题栏,下面是窗口的客户区。这...

77811

扫码关注云+社区

领取腾讯云代金券