纯代码进行界面设计1.代码界面设计的总思路2.创建项目3.设计草图4.添加组件指针5.初始化组件指针6.添加组件到窗口①水平布局②垂直布局③细节点

1.使用界面设计器

首先确定需要那些组件然后定义好组件初始化组件用布局将组件添加到窗口定义槽函数关联槽函数实现槽函数

2.创建项目

因为我们要知道我们需要那些组件所以说一般我们会先设计一个草图知道自己需要用那些组件。

单选框

QPushButton//按钮然后在private里面把组件添加成成员数据

//粗体复选框QCheckBox*chkBoxUnderLine;//下划线QCheckBox*chkBoxItalic;//斜体QRadioButton*rBtnRed;//红色单选框QRadioButton*rBtnBlack;//黑色QRadioButton*rBtnGreen;//绿色QPlainTextEdit*txtEdit;//纯文本编辑器QPushButton*btnOK;//确定按钮QPushButton*btnCancel;//取消QPushButton*btnExit;//退出这样就添加完成了变量名要自己能看懂哦

5.初始化组件指针

可以直接在Dialog的构造函数中进行初始化但是会显的代码杂乱无章。

在private里定义一个void

QHBoxLayout创建一个水平布局将同一行的组件添加到布局中

void

QHBoxLayout;HLay1-addWidget(chkBoxUnderLine);HLay1-addWidget(chkBoxItalic);HLay1-addWidget(chkBoxBold);QHBoxLayout

*HLay2new

QHBoxLayout;HLay2-addWidget(rBtnBlack);HLay2-addWidget(rBtnRed);HLay2-addWidget(rBtnGreen);QHBoxLayout

*HLay3new

QHBoxLayout;HLay3-addWidget(btnOK);HLay3-addWidget(btnCancel);HLay3-addWidget(btnExit);}addWidget的意思是添加组件的意思。

②垂直布局

接下来开始垂直布局就是将从上到下的布局或者组件添加到垂直的布局中。

QVBoxLayout*VLaynew

QVBoxLayout;VLay-addLayout(HLay1);VLay-addLayout(HLay2);VLay-addWidget(txtEdit);VLay-addLayout(HLay3);然后将垂直布局添加到对话窗口中就可以进行显示了

setLayout(VLay);运行结果

QCheckBox(斜体);chkBoxUnderLinenew

*HLay1new

QHBoxLayout;HLay1-addWidget(chkBoxUnderLine);HLay1-addWidget(chkBoxItalic);HLay1-addWidget(chkBoxBold);QHBoxLayout

*HLay2new

QHBoxLayout;HLay2-addWidget(rBtnBlack);HLay2-addWidget(rBtnRed);HLay2-addWidget(rBtnGreen);QHBoxLayout

*HLay3new

QHBoxLayout;HLay3-addWidget(btnOK);HLay3-addWidget(btnCancel);HLay3-addWidget(btnExit);QVBoxLayout*VLaynew

QVBoxLayout;VLay-addLayout(HLay1);VLay-addLayout(HLay2);VLay-addWidget(txtEdit);VLay-addLayout(HLay3);setLayout(VLay);

}运行结果

如果水平某个地方你希望空着不均匀分布。

那可以在水平布局里面添加一个拉升器。

QHBoxLayout

QHBoxLayout;HLay3-addWidget(btnOK);HLay3-addWidget(btnCancel);HLay3-addStretch();//添加拉升器HLay3-addWidget(btnExit);运行效果

txtEditnew

txtEdit-setPlainText(给我点点关注我也给你点点关注);运行结果

rBtnBlacknew

rBtnBlack-setChecked(true);//黑色默认被选中运行结果

7.定义槽函数

setTxtColor();因为复选框可以打开也可以关闭所以说我们要接受一个bool值来确定当前的状态。

对于单选框我们只能选一个功能都是相同的所以可以只用定义一个槽函数即可。

8.初始化信号槽

我们也统一定义一个函数initSignalSlots去统一关联。

void

{//关联复选框connect(chkBoxBold,SIGNAL(clicked(bool)),this,SLOT(onChkBoxBold(bool)));connect(chkBoxItalic,SIGNAL(clicked(bool)),this,SLOT(onChkBoxItalic(bool)));connect(chkBoxUnderLine,SIGNAL(clicked(bool)),this,SLOT(onChkBoxUnderLine(bool)));//关联单选框connect(rBtnRed,SIGNAL(clicked()),this,SLOT(setTxtColor()));connect(rBtnBlack,SIGNAL(clicked()),this,SLOT(setTxtColor()));connect(rBtnGreen,SIGNAL(clicked()),this,SLOT(setTxtColor()));//关联按钮connect(btnOK,SIGNAL(clicked()),this,SLOT(close()));connect(btnCancel,SIGNAL(clicked()),this,SLOT(close()));connect(btnExit,SIGNAL(clicked()),this,SLOT(close()));

9.实现槽函数

对于复选框我们要先拿到文本的字体然后再继续修改然后又设置回去。

#include

fonttxtEdit-font();//取出文本的字体font.setBold(checked);//根据checked来设置字体为粗体txtEdit-setFont(font);//将字体设回到文本中

}void

fonttxtEdit-font();font.setUnderline(checked);txtEdit-setFont(font);

void

fonttxtEdit-font();font.setItalic(checked);txtEdit-setFont(font);

void

palettetxtEdit-palette();//拿到文本的调色板//判断哪一个按钮被点击if(rBtnRed-isChecked()){palette.setColor(QPalette::Text,Qt::red);}else

if(rBtnBlack-isChecked()){palette.setColor(QPalette::Text,Qt::black);}else

if(rBtnGreen-isChecked()){palette.setColor(QPalette::Text,Qt::green);}//将调色板设回文本txtEdit-setPalette(palette);

}颜色的实现思路差不多先用palette取出调色板,然后设置Text是对文本有效

记得有调色板要头文件哦

用纯代码来设计界面是我们是要遵循一个逻辑循序的这样你的代码就会条理清晰且可维护性高。