Qt-Day03-学习笔记

我们加载控件的时候,可以用布局类来指定父窗口.

1. Qt的布局

• 水平布局-QHBoxLayout
• 垂直布局-QVBoxLayout

//    把QWidget看成是一个类
//    水平垂直布局

    QWidget *widget_m = new QWidget();          //实例化一个widget
    QWidget *widget_l = new QWidget();          //实例化一个widget
    QWidget *widget_r = new QWidget();          //实例化一个widget

    QPushButton *button1 = new QPushButton("one");
    QPushButton *button2 = new QPushButton("two");
    QPushButton *button3 = new QPushButton("three");
    QPushButton *button4 = new QPushButton("four");
    QPushButton *button5 = new QPushButton("five");

    QPushButton *button11 = new QPushButton("one");
    QPushButton *button22 = new QPushButton("two");
    QPushButton *button33 = new QPushButton("three");
    QPushButton *button44 = new QPushButton("four");
    QPushButton *button55 = new QPushButton("five");

    //水平布局
    QHBoxLayout *h_layout = new QHBoxLayout;
    h_layout->addWidget(button1);
    h_layout->addWidget(button2);
    h_layout->addWidget(button3);
    h_layout->addWidget(button4);
    h_layout->addWidget(button5);
    widget_l->setLayout(h_layout);

    //垂直布局
    QVBoxLayout *v_layout = new QVBoxLayout;
    v_layout->addWidget(button11);
    v_layout->addWidget(button22);
    v_layout->addWidget(button33);
    v_layout->addWidget(button44);
    v_layout->addWidget(button55);
    widget_r->setLayout(v_layout);

    //垂直布局
    //再加入一个水平布局 或者 垂直布局 ,加入上面这两个布局.然后再把这个布局加入到widget中
    QVBoxLayout *h_layout_m = new QVBoxLayout;
    h_layout_m->addWidget(widget_l);
    h_layout_m->addWidget(widget_r);

    widget_m->setLayout(h_layout_m);


	widget_m->show();

    QWidget *widget_r = new QWidget();          //实例化一个widget
    QPushButton *button1 = new QPushButton("one");
    QPushButton *button2 = new QPushButton("two");
    QPushButton *button3 = new QPushButton("three");
    QPushButton *button4 = new QPushButton("four");
    QPushButton *button5 = new QPushButton("five");

    QVBoxLayout *v_layout = new QVBoxLayout;
    v_layout->addWidget(button1);
    v_layout->addWidget(button2);
    v_layout->addSpacing(15);                   //设置间距
    v_layout->addWidget(button3);
    v_layout->addWidget(button4);
    v_layout->addWidget(button5);
    widget_r->setLayout(v_layout);

    widget_r->setGeometry(QRect(0,0,100,100));  //设置控件的位置和大小

    widget_r->show();

• 栅格布局-QFormLayout

    //栅格布局
    QWidget *widget_m = new QWidget();                  //实例化一个widget
    QPushButton *button = new QPushButton("账号:");      //实例化一个button
    QLineEdit *lineEdit = new QLineEdit();              //实例化一个文本框
    QPushButton *button1 = new QPushButton("密码:");     //实例化一个button
    QLineEdit *lineEdit1 = new QLineEdit();              //实例化一个文本框

    QFormLayout *layout = new QFormLayout;
    layout->addRow(button,lineEdit);
    layout->addRow(button1,lineEdit1);
    widget_m->setLayout(layout);


    widget_m->show();

2. 使用水平布局,垂直布局以及栅格布局,可视化操作实现简单的登录界面

3. 代码实现简单的登录界面

    //常用的接口函数
//    addwidget(QWidget* int,int row,int colunum,Qt::Alignment)
//    addwidget(QWidget*,int row,int colunum,int row rowSpan,int colunumSpan Qt::Alignment)

    QApplication a(argc,argv);


    QWidget *widget = new QWidget();


    //构建控件,头像,用户名,密码输入框等
    QLabel *pImageLabel = new QLabel(widget);                     //头像

    QLineEdit *pUserLineEdit = new QLineEdit(widget);             //账号文本框
    QLineEdit *pPasswordLineEdit = new QLineEdit(widget);         //密码文本框
    QCheckBox *pRememberCheckBox = new QCheckBox(widget);         //记住密码
    QCheckBox *pAutoLoginCheckBox = new QCheckBox(widget);        //自动登录
    QPushButton *pRegisterButton = new QPushButton(widget);       //注册
    QPushButton *pForgotButton = new QPushButton(widget);         //找回
    QPushButton *pLoginButton = new QPushButton(widget);          //登录

    pLoginButton->setFixedHeight(30);           //设置登录按钮的高
    pUserLineEdit->setFixedWidth(220);          //设置账号文本框的宽
    pPasswordLineEdit->setFixedWidth(220);      //设置密码文本框的宽

    //设置头像
    QPixmap pixmap(":/log.jpg");
    pImageLabel->setFixedSize(50,50);
    pImageLabel->setPixmap(pixmap);
    pImageLabel->setScaledContents(true);

    //设置文本
    pUserLineEdit->setPlaceholderText("QQ号码/手机/邮箱");        //设置灰色字体
    pPasswordLineEdit->setPlaceholderText("密码");              //设置灰色字体
    pPasswordLineEdit->setEchoMode(QLineEdit::Password);       //设置密码框
    pRememberCheckBox->setText("记住密码");
    pAutoLoginCheckBox->setText("自动登录");
    pRegisterButton->setText("注册账号");
    pForgotButton->setText("找回密码");
    pLoginButton->setText("登录");


    //网格布局
    QGridLayout *pLayout = new QGridLayout();
    //用户头像          从第-- 0 --行,第-- 0 --列开始,占-- 3 --行 -- 1 --列
    pLayout->addWidget(pImageLabel,0,0,3,1);
    //用户名输入框
    pLayout->addWidget(pUserLineEdit,0,1,1,2);
    //注册账号 按钮
    pLayout->addWidget(pRegisterButton,0,4);
    //密码输入框
    pLayout->addWidget(pPasswordLineEdit,1,1,1,2,Qt::AlignLeft | Qt::AlignVCenter);
    //找回密码 按钮
    pLayout->addWidget(pForgotButton,1,4);
    //记住密码 按钮
    pLayout->addWidget(pRememberCheckBox,2,1,1,1);
    //自动登录 按钮
    pLayout->addWidget(pAutoLoginCheckBox,2,2,1,1);
    //登录 按钮
    pLayout->addWidget(pLoginButton,3,1,1,2);


    //设置一个水平间距
    pLayout->setHorizontalSpacing(15);
    //设置一个垂直间距
    pLayout->setVerticalSpacing(15);

    //设置外间距     上下左右顺序
    pLayout->setContentsMargins(10,10,10,10);

    widget->setLayout(pLayout);

    widget->show();

4. 总结

• 把某个部件放进栅格布局的一个单元格中,但是这个窗口部件有时候会占用多个单元格,需要使用addWidget()方法的重载版本,添加窗口部件至布局:
  
  row:行; column:列; rowSpan:指定倍数的行; columnSpan:指定倍数的列;
• setSpacing():同时设置水平,垂直间距,设置之后,水平,垂直间距相同;
  setHorizontalSpacing(),setVerticalSpacing()可以分别设置水平间距和垂直间距.