Qt的UI代码化设计

UI设计（案例：更改字体颜色以及添加下划线斜体粗体等）

代码化UI设计

QDialog作为窗口基类，不勾选Generate form（就不会有可视化编辑窗口）

创建界面

编辑前在.h文件中包含好所需头文件，如：

#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPushButton>
#include <QPlainTextEdit>

• 在.h文件中写好所需的UI，如：

  • 	QCheckBox *checkBoxUnderline;
        QCheckBox *checkBoxItalic;
        QCheckBox *checkBoxBold;
        
        QRadioButton *rBtnBliack;
        QRadioButton *rBtnBlue;
        QRadioButton *rBtnRed;
        
        QPlainTextEdit *plainTxtEdit;
        
        QPushButton *btnOK;
        QPushButton *btnCancle;
        QPushButton *btnClose；
    

• 在.cpp文件中new出该UI

  • 	checkBoxUnderline = new QCheckBox(tr("Underline"));//tr("")用于生成翻译文件
        checkBoxItalic = new QCheckBox(tr("Italic"));
        checkBoxBold = new QCheckBox(tr("Bold"));
    
        rBtnBlack = new QRadioButton(tr("Black"));
        rBtnBlue = new QRadioButton(tr("Blue"));
        rBtnRed = new QRadioButton(tr("Red"));
    
        plainTxtEdit = new QPlainTextEdit();
    
        btnOK = new QPushButton("OK");
        btnCancle = new QPushButton("Cancle");
        btnClose = new QPushButton("Close");
    

• 创建好UI之后再整理布局

  • 在.cpp文件中包含头文件如：

    • #include <QHBoxLayout>  //水平布局
      #include <QVBoxLayout>  //垂直布局
      

  • 	//像下方这样配置好每一组的水平布局
    	checkBoxUnderline = new QCheckBox(tr("Underline"));
        checkBoxItalic = new QCheckBox(tr("Italic"));
        checkBoxBold = new QCheckBox(tr("Bold"));
        QHBoxLayout *HLayout1 = new QHBoxLayout();
        HLayout1 -> addWidget(checkBoxUnderline);
        HLayout1 -> addWidget(checkBoxItalic);
        HLayout1 -> addWidget(checkBoxBold);
    
        rBtnBlack = new QRadioButton(tr("Black"));
        rBtnBlue = new QRadioButton(tr("Blue"));
        rBtnRed = new QRadioButton(tr("Red"));
        QHBoxLayout *HLayout2 = new QHBoxLayout();
        HLayout2 -> addWidget(rBtnBlack);
        HLayout2 -> addWidget(rBtnBlue);
        HLayout2 -> addWidget(rBtnRed);
    
        plainTxtEdit = new QPlainTextEdit();
        QFont font = plainTxtEdit -> font();
        font.setPointSize(20);//设置字号
        plainTxtEdit -> setFont(font);
        plainTxtEdit -> setPlainText(tr("嗨害嗨\n\n来了奥"));
    
        btnOK = new QPushButton("OK");
        btnCancle = new QPushButton("Cancle");
        btnClose = new QPushButton("Close");
        QHBoxLayout *HLayout3 = new QHBoxLayout();
        HLayout3 -> addStretch();//设置弹簧
        HLayout3 -> addWidget(btnOK);
        HLayout3 -> addWidget(btnCancle);
        HLayout3 -> addStretch();
        HLayout3 -> addWidget(btnClose);
    

  • 	//布置好垂直布局
    	QVBoxLayout *VLayout = new QVBoxLayout();
        VLayout -> addLayout(HLayout1);
        VLayout -> addLayout(HLayout2);
        VLayout -> addWidget(plainTxtEdit);
        VLayout -> addLayout(HLayout3);
        setLayout(VLayout);
    

  • 可以设置一个函数把上面代码剪切过去，这样只需要在构造函数中调用那个函数而不用在构造函数中写这么冗长的代码

信号和槽的关联

• 在.h文件里设置slots函数：

  • private slots:
        void on_checkUnderline(bool checked);
        void on_checkItalic(bool checked);
        void on_checkBold(bool checked);
    
        void setTextFontColor();
    

• 在.cpp里编辑好这些函数：

  • void sample_03::on_checkUnderline(bool checked)
    {
        QFont font = plainTxtEdit -> font();
        font.setUnderline(checked);
        plainTxtEdit -> setFont(font);
    }
    
    void sample_03::on_checkItalic(bool checked)
    {
        QFont font = plainTxtEdit -> font();
        font.setItalic(checked);
        plainTxtEdit -> setFont(font);
    }
    
    void sample_03::on_checkBold(bool checked)
    {
        QFont font = plainTxtEdit -> font();
        font.setBold(checked);
        plainTxtEdit -> setFont(font);
    }
    
    void sample_03::setTextFontColor()
    {
        QPalette plet = plainTxtEdit -> palette();
        if (rBtnBlack -> isChecked()){
            plet.setColor(QPalette::Text,Qt::black);
        }else if (rBtnBlue -> isChecked()) {
            plet.setColor(QPalette::Text,Qt::blue);
        }else if (rBtnRed -> isChecked()) {
            plet.setColor(QPalette::Text,Qt::red);
        }else{
            plet.setColor(QPalette::Text,Qt::black);//给定默认值
        }
        plainTxtEdit -> setPalette(plet);
    }
    

• 再添加函数，用connect连接信号和槽

  • void sample_03::iniSignalSlots()
    {
        connect(btnOK, SIGNAL(clicked()), this, SLOT(accept()));
        connect(btnCancle, SIGNAL(clicked()), this, SLOT(accept()));
        connect(btnClose, SIGNAL(clicked()), this, SLOT(accept()));
    
        connect(checkBoxUnderline, SIGNAL(clicked(bool)), this, SLOT(on_checkUnderline(bool)));
        connect(checkBoxItalic,SIGNAL(clicked(bool)), this, SLOT(on_checkItalic(bool)));
        connect(checkBoxBold, SIGNAL(clicked(bool)), this, SLOT(on_checkBold(bool)));
    
        connect(rBtnBlack, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
        connect(rBtnBlue, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
        connect(rBtnRed, SIGNAL(clicked()), this, SLOT(setTextFontColor()));
    }
    

• 最后在构造函数中使用iniSignalSlots()函数