QT入门Layouts之Vertical Layout、Horizontal Layout、QGridLayout-Toy模板网

这篇具有很好参考价值的文章主要介绍了QT入门Layouts之Vertical Layout、Horizontal Layout、QGridLayout。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、界面布局效果

1、界面位置介绍

2、属性功能介绍

二、代码创建布局效果

三、QGridLayout介绍

此文为作者原创，转载请标明出处！

一、界面布局效果

1、界面位置介绍

qt horizontallayout,QT控件入门,ui

2、属性功能介绍

先以Horizontal Layout来举例说明下：先拖个Horizontal Layout在界面上，再拖三个pushButton放到Horizontal Layout里，然后就看到如下布局效果：

qt horizontallayout,QT控件入门,ui

基本常见的布局属性：

ui->horizontalLayout->setSpacing(1);//设置控件之间的距离
ui->horizontalLayout->setContentsMargins(10,1,1,1);//设置上下左右的间距
ui->horizontalLayout->setStretch(0,2);//布局中序号为0，占2
ui->horizontalLayout->setStretch(1,2);//布局中序号为1，占2
ui->horizontalLayout->setStretch(2,6);//布局中序号为2，占6

二、代码创建布局效果

还是拖个widget在界面上，然后开始写代码：

构造函数中添加：

QHBoxLayout* hLayout = new QHBoxLayout();//水平布局

QPushButton* Btn1 = new QPushButton(u8"按钮1");
QPushButton* Btn2 = new QPushButton(u8"按钮2");
QPushButton* Btn3 = new QPushButton(u8"按钮3");
QPushButton* Btn4 = new QPushButton(u8"按钮4");

hLayout->addWidget(Btn1);
hLayout->addWidget(Btn2);
hLayout->addWidget(Btn3);
hLayout->addWidget(Btn4);

ui->widget->setLayout(hLayout);

效果如下：

qt horizontallayout,QT控件入门,ui

增加按钮之间的距离：

qt horizontallayout,QT控件入门,ui

位置变化：

qt horizontallayout,QT控件入门,ui

三、QGridLayout介绍

类似于表格结构效果填充：

qt horizontallayout,QT控件入门,ui

代码测试：

    QGridLayout* gLayout = new QGridLayout(this);//栅格布局

    QPushButton* Btn1 = new QPushButton(u8"按钮1");
    //该函数的作用是设置控件大小随布局变化而变化且会填满布局
    Btn1->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    QPushButton* Btn2 = new QPushButton(u8"按钮2");
    Btn2->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    QPushButton* Btn3 = new QPushButton(u8"按钮3");
    Btn3->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    QPushButton* Btn4 = new QPushButton(u8"按钮4");
    Btn4->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    gLayout->setRowStretch(0,1);   //第0行，比例为1
    gLayout->setRowStretch(1,1);   //第1行，比例为1
    gLayout->setRowStretch(2,1);   //第2行，比例为1
    gLayout->setRowStretch(3,1);  //第3行，比例为1

    //布局排布效果
    gLayout->addWidget(Btn1,1,0,1,1);
    gLayout->addWidget(Btn2,2,0,1,1);
    gLayout->addWidget(Btn3,2,1,1,1);
    gLayout->addWidget(Btn4,3,0,3,1);

    ui->widget->setLayout(gLayout);

最后效果：

qt horizontallayout,QT控件入门,ui