软件实习项目1——计算器的设计与实现（ui界面设计——calculator.ui，calculator.py）

最新推荐文章于 2022-06-29 12:27:09 发布

原创最新推荐文章于 2022-06-29 12:27:09 发布 · 491 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#qt #pyqt5 #ui

软件实习专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了一款计算器应用程序的用户界面(UI)设计过程，利用QtDesigner工具进行布局，并提供了详细的样式表设置代码，用于美化按钮和显示标签，同时介绍了如何将设计的.ui文件转化为.py文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Qt Designer 对计算器的界面进行设计
calculator.ui → calculator.py

拖控件

21个PushButton，1个Label
在这里插入图片描述

控件样式设计代码

每一个控件原始状态、鼠标悬停时、点击时的样式都不相同

Label的styleSheet

QLabel{
	background-color: rgb(39, 39, 39);
	color: rgb(255, 255, 255);
	qproperty-alignment: 'AlignVCenter | AlignRight';
	border: 1px solid gray 
}
background-color: black;

PushButton(数字、"."、"=")的styleSheet

QPushButton{
	
	background-color: rgb(255, 255, 255);
	border:1px solid gray;
}
QPushButton:hover{
	Background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #cdced1, stop:1 #f6f7fa);
}
QPushButton:pressed{
	Background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #f6f7fa, stop:1 #cdced1);
}

PushButton(“C”、"("、")")的styleSheet

QPushButton{
	background-color:rgb(210,210,210);
	border:1px solid gray;
}
QPushButton:hover{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #b6b6b6, stop:1 rgb(227, 227, 227));
}
QPushButton:pressed{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 rgb(227, 227, 227), stop:1 #b6b6b6);
}

PushButton("+"、"-"、“×”、“÷”、“⬅”)的styleSheet

QPushButton{
	background-color:rgb(255,151,57);
	color:white;
	border:1px solid gray;
}
QPushButton:hover{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #ffd606, stop:1 #ff8a2b);
}
QPushButton:pressed{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0  #FF7832, stop:1 #ffca0c);
}

PushButton (History) 的styleSheet

QPushButton{
	background-color:rgb(100,100,100);
	color:white;
	border:1px solid gray;
}
QPushButton:hover{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 rgb(60,60,60), stop:1 rgb(150,150,150));
}
QPushButton:pressed{
	background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 rgb(150,150,150), stop:1 rgb(60,60,60));
}

最后，保存为 calculator.ui

ui文件转成py文件

通过PyUIC将刚刚用Qt Designer生成的ui文件转成py文件。有以下两种方法：
1、通过cmd，输入以下命令进行转换：

pyuic5 -o calculator.py calculator.ui

2、将PyUIC放入PyCharm的External Tool中，选中calculator.py直接进行转换。
在这里插入图片描述

——2020/12/5（殷越）