pycharm中使用Qt Designer实现UI界面设计
确保pyqt 、qt designer已正常安装
Pycharm中setting->Tools->External Tools->+
如下:
working directory:一般会自动生成 或者输入
即当前目录
然后就可以在tool下发现 pyqt designer了
打开界面如下 就可以开始页面设计了
用designer生成的文件为.ui文件,我们需要转换成py文件,所以要用到PyUIC,配置过程类似
program:这里是你python.exe文件的位置。
arguments:这里固定的
working directory:这里注意不要用自动生成的路径 需要使用
不然在生成py文件时会报错 no such file *.ui
这样就可以直接生成.py文件了。
新建一个base.py文件
运行base.py 即可打开你写好的页面
首先你需要一个美工,帮你设计好看的UI样式,或者自己设计也可以,
然后参照设计好的UI样式,完成代码的编写,在设置代码样式前你需要知道这些控件的设置方法,比如一个QPushButton的背景色:红色,前景设置白色,边框黑色
QPushButton#evilButton {
background-color: red
border-style: outset
border-width: 2px
border-color: black
color: white
解救方法是这个类:QSingalMapper,看名字能想到什么?没错,这个类将同一个信号封装后,改造成不同的信号,然后再发射。
asssiant里面有个例子:
ButtonWidget::ButtonWidget(QStringList texts, QWidget *parent)
: QWidget(parent)
{
signalMapper = new QSignalMapper(this)
QGridLayout *gridLayout = new QGridLayout
for (int i = 0i <texts.size()++i) {
QPushButton *button = new QPushButton(texts[i])
connect(button, SIGNAL(clicked()), signalMapper, SLOT(map()))
signalMapper->setMapping(button, texts[i])
gridLayout->addWidget(button, i / 3, i % 3)
}
connect(signalMapper, SIGNAL(mapped(const QString &)),
this, SIGNAL(clicked(const QString &)))
setLayout(gridLayout)
}
看见这个函数了么?每个button都发送clicked信号,但是使用这个类以后就把相同的信号给封装成不同信号发射了。注意那个connect函数里面的mapped信号的QString参数,不同的button的clicked信号是相同的,但是text是不同的,这样相同的信号就能区分出不同的需求了。
画龙点睛到此,不必细细去说,相信你该知道怎么办了。不知道还可以问我。
首先你需要一个美工,帮你设计好看的UI样式,或者自己设计也可以,
然后参照设计好的UI样式,完成代码的编写,在设置代码样式前你需要知道这些控件的设置方法,比如一个QPushButton的背景色:红色,前景设置白色,边框黑色
QPushButton#evilButton {background-color: red
border-style: outset
border-width: 2px
border-color: black
color: white
}
其他控件配置请参考Qt提供的帮助文档:
http://doc.qt.io/qt-4.8/stylesheet-examples.html
安装Qt, VS和 Qt5 Visual Studio Add-in.
配置好环境变量, 如qmake_path和QTDIR.
打开VS查看是否有"QT"工具栏.
点击 文件 ->新建 ->项目, 在左边模板中选择Qt Project, 然后在右边选择Qt Application
输入名称和解决方案名称, 位置不能有中文路径, 确定
在左边选择 "解决方案资源管理器", 打开FormFile, 双击对应UI文件进行编辑
#include "ui_mainwindow.h"
#include <QDebug>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this)
connect(ui->closeexe,SIGNAL(clicked()),this,SLOT(close()))
connect(ui->getnum,SIGNAL(clicked()),this,SLOT(slot_getnum_clicked()))
connect(ui->getchar,SIGNAL(clicked()),this,SLOT(slot_getchar_clicked()))
}
MainWindow::~MainWindow()
{
delete ui
}
void MainWindow::slot_getnum_clicked()
{
qDebug("click get num ")
getContent(0)
}
void MainWindow::slot_getchar_clicked()
{
qDebug("click get char ")
getContent(1)
}
void MainWindow::getContent(int type)
{
qDebug("in to sub function ")
int a= 0,b=0
type?(a=0,b=255):(a=255,b=0)
QString style
style.sprintf("color: rgb(%d, 0, %d)background-color: rgb(%d, 0, %d)font: 16pt \"宋体\"",
a,b,b,a)
ui->label->setStyleSheet(style)
QString str = ui->textEdit->toPlainText()
QString tmp
tmp.clear()
for (int i=0i<str.length()i++)
{
if ( type?(str.at(i) <'0' || str.at(i)>'9'):(str.at(i) >='0' && str.at(i)<='9') )
{
tmp.append(str.at(i))
qDebug()<<tmp
}
}
ui->label->setText(tmp)
}
用QStackedWidget,通过QButtonGroup来进行这些界面的切换。
// 按钮组QButtonGroup *btnGroup = new QButtonGroup()
// 栈界面
QStackedWidget *stackedWidget = new QStacedWidget()
// 加入按钮和界面
for (int i = 0 i < 5 i++) {
QPushButton *btn = new QPushButton()
btn->setText(QString::number(i + 1))
btnGroup->addButton(btn, i)
QWidget *widget = new QWidget()
statckedWidget->addWidget(widget)
}
// 关联信号槽
connect(btnGroup, SIGNAL(buttonClicked(int id)), stackedWidget, SLOT(setCurrentIndex(int index)))
1、QT 设计师界面
只会创建*.ui文件,需要手动添加ui管理的类
2、QT 设计师界面类
会创建*.h*.cpp和*.ui一共三个文件
你现在还会觉得是一样的吗?