小白自学qt篇-一些布局的应用

1.QHBoxLayout盒子布局

先增加五个标签

    auto boxlayout=new QHBoxLayout(this);

 boxlayout->addStretch(1) ;
    auto Label1=new QLabel("1");
    auto Label2=new QLabel("2");
    auto Label3=new QLabel("3");
    auto Label4=new QLabel("4");
    auto Label5=new QLabel("5");

 boxlayout->addStretch(1) ;

//第一个参数控件，第二个参数，拉伸参数，第三个参数，对齐方式

boxlayout->addWidget(Label1,0,Qt::AlignBottom);

 //设置内边距
    boxlayout->setContentsMargins(5,20,5,20);
    //设置行距
    boxlayout->setSpacing(20);

//一般还要设置弹簧

 //boxlayout->addStretch(1) ;

1是拉伸因子，什么是弹簧呢，在拉动窗口时控件的位置也会随之改变。加入了一个弹簧，就像是在阻止它形变一样。

如图所示，我们看到在窗口拉伸后，这几个标签控件之间的位置是不变的。但是两侧的在变，就像是两头都有弹簧在挤压一样。

2.栅格布局

我么可以看一下，这是qq的登录界面的布局，很整齐很好看。我们用栅格布局来简单模仿一下。

为什么是栅格布局，原理是将布局界面分成几行几列。这样的话每个控件的位置就非常的整齐。

首先先把我们需要的控件准备好。

    //1.三张图片，一个动态背景，qq图标，头像图片，二维码图片
    //2.最小化，关闭按钮
    //3.下拉框，输入框
    //4.复选框，自动登录，记住密码
    //5.注册账号，找回密码，登录按钮，

   auto password_back=new QPushButton("找回密码");
    password_back->setStyleSheet("QPushButton { opacity:1; }");
    auto log_in=new QPushButton("登录");
    log_in->resize(240,40);
    log_in->setStyleSheet("QPushButton{background-color:rgba(8,189,253,1)}");
    //log_in->setStyleSheet("QPushButton{border-radius=10px}");
    auto auto_log_in=new QCheckBox("自动登录");
    auto remember_password=new QCheckBox("记住密码");

    auto account=new QComboBox(this);
    account->setPlaceholderText("账号");
    account->setEditable(true);

    auto password=new QLineEdit(this);
    password->setPlaceholderText("密码");
    auto background=new QLabel(this);

 auto register_account=new QPushButton("注册账号");
 register_account->setStyleSheet("QPushButton { opacity:1; }");

这些我们需要的控件已经准备好了

//新建栅格布局

QGridLayout* layout1 = new QGridLayout(this);

//设置行的最小高度，第一个参数是行数，第二个是高度(单位是px),我们这里给的是第0行和第1行的。

    layout1->setRowMinimumHeight(0,50);
    layout1->setRowMinimumHeight(1,50);

//然后就要向layout1中添加控件了

layout1->addWidget(background,0,0,2,5);

可以看到是四个参数，前两个是行和列，都是从0开始算的熬。第三个参数是该控件占几行，第四个参数是占几列。

    layout1->setHorizontalSpacing(5);
    layout1->addWidget(account,2,1,1,3);
    layout1->addWidget(password,3,1,1,3);
    layout1->addWidget(auto_log_in,4,1,1,1);
    layout1->addWidget(remember_password,4,2,1,1);
    layout1->addWidget(password_back,4,3,1,1);
    layout1->addWidget(log_in,5,1,1,3);
    layout1->addWidget(register_account,6,0,1,1);

我们把剩下的全部加上

    qInfo()<<layout1->rowCount();
    qInfo()<<layout1->columnCount();

我们还可以输出看一下，这个栅格布局总共是几行几列，这个是7行5列。最后一点千万不要忘了给我们的窗口设置上我们设计的Layout（布局）.

this->setLayout(layout1);

这是我们写出来的，界面还需要美化哈哈，这就给后面留一个坑把。

3.QStackedLayout

最后一个就是我们的堆栈布局，为什么叫堆栈呢，因为它这个就像是把控件堆在那里一样。我们通过设置索引来实现控件的切换。这个在我们生活中很常见，比如说界面的滑动切换就是这样做的让我们来看一下把。

老样子先来三个标签，让他们铺满。

 auto Label1=new QLabel("1");
    auto Label2=new QLabel("2");
    auto Label3=new QLabel("3");

    Label1->resize(450,280);
    Label2->resize(450,280);
    Label3->resize(450,280);

//分别给他们三个颜色，我们更好的分辨

    Label1->setStyleSheet("background-color:yellow");
    Label2->setStyleSheet("background-color:red");
    Label3->setStyleSheet("background-color:gray");

//把三个控件添加进来。

    auto layout=new QStackedLayout(this);
    layout->addWidget(Label1);
    layout->addWidget(Label2);
    layout->addWidget(Label3);

//用一个按钮实现三个标签的切换.

    auto btn=new QPushButton("这是一个按钮",this);
    connect(btn,&QPushButton::clicked,this,[=]()
    {
        static int index=0;
        //实现摁下按钮的时候，切换窗口
        layout->setCurrentIndex(index);
        index=(index+1)%layout->count();

//让按钮浮现出来，不然的话会被标签遮住.
        btn->raise();

    });

点击后实现切换.

最后还是老样子，有不对的地方希望大家指出，我们一起进步.