Qt之界面实现技巧

最新推荐文章于 2024-09-24 14:41:27 发布
最新推荐文章于 2024-09-24 14:41:27 发布
阅读量500 收藏
点赞数
分类专栏： QT使用

  总结一下，在开发Qt的过程中的一些技巧！可遇而不可求。。。

一、主界面
1、窗口 最小化 最大化 关闭按钮、显示状态自定义
 
 
    setWindowFlags(Qt::CustomizeWindowHint);
    setWindowFlags(Qt::WindowCloseButtonHint); //只要关闭按钮
    setWindowFlags(Qt::WindowFlags type)
    Qt::FrameWindowHint:没有边框的窗口
    Qt::WindowStaysOnTopHint:  //总在最上面的窗口
    Qt::CustomizeWindowHint:  //自定义窗口标题栏,以下标志必须与这个标志一起使用才有效,否则窗口将有默认的标题栏
    Qt::WindowTitleHint  //显示窗口标题栏
    Qt::WindowSystemMenuHint  //显示系统菜单
    Qt::WindowMinimizeButtonHint  //显示最小化按钮
    Qt::WindowMaximizeButtonHint  //显示最大化按钮
    Qt::WindowMinMaxButtonsHint  //显示最小化按钮和最大化按钮
    Qt::WindowCloseButtonHint  //显示关闭按钮
 
 
2、隐藏任务栏显示
 
 
 
 
    setWindowFlags(Qt::Tool | Qt::X11BypassWindowManagerHint）
 
 
3、关闭按钮实现的功能
 
 
 
 
    hide(); //进行界面隐藏，但是显示托盘，可通过点击托盘实现界面的重新显示
    quit(); //退出系统
 
 
4、绘制背景图片并且实现圆角效果
 
 
 
 
void paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QBrush brush;
    brush.setTextureImage(QImage(background_image)); //背景图片
    painter.setBrush(brush);
     painter.setPen(Qt::black);  //边框色
    painter.drawRoundedRect(this->rect(), 5, 5); //圆角5像素
}
 
 
5、设置应用程序的字体
 
 
 
 
    QFont font("Courier", 10, QFont::Normal, false);
    QApplication::setFont(font);
 
 
6、设置字体
 
 
 
 
    QFont font = this->font();
    font.setFamily("Courier");  //字体名称
    font.setPixelSize(16);  //字体点大小
    font.setPointSize(18);  //字体像素大小
    font.setBold(true);  //是否加粗
    font.setItalic(true);  //是否斜体
    font.setUnderline(true);  //是否下划线
    this->setFont(font);
字体风格，包括类型、大小、是否加粗、是否斜体等！
也可使用：setStyleSheet("text-align:center; font-size:18px; font-weight:bold; font-style:Courier; color:white; ");
setAlignment(Qt::AlignCenter);  //设置对齐方式
 
 
7、超链接
 
 
 
 
    QLabel *pLabel = new QLabel(this);
    pLabel->setText(QStringLiteral("超链接"));
    pLabel->setFixedSize(200,100);
    connect(pLabel,SIGNAL(linkActivated(QString)),this,SLOT(openUrl(QString)));
    QDesktopServices::openUrl(QUrl(url));  //openUrl槽里面实现

    pLabel->setOpenExternalLinks(true);
    pLabel->setText("新浪");
 
 
8、打开本地文件（夹）
 
 
 
 
    QDesktopServices::openUrl(QUrl::fromLocalFile(local_file));
 
 
9、显示窗口并激活/提升
 
 
 
 
  showNormal();
    raise();
    activateWindow();
 
 
10、设置滚动条值
 
 
 
 
    pTextEdit->verticalScrollBar()->setValue(0);  //滚动到最顶层
    pTextEdit->verticalScrollBar()->setValue(pTextEdit->verticalScrollBar()->maximum());  //滚动到最底层
 
 
 
 
11、QToolBar添加拉伸（弹簧）
 
 
原以为QToolBar可以通过addStretch()来实现，不想没有此接口，则可通过下来方式实现：
 
 
 
 
    QWidget *pWidget = new QWidget(this);
    pWidget->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); 
    pToolBar->addWidget(pWidget);
 
 
12、QProgressBar进度条设置文本、样式
 
 
 
 
  QProgressBar *pProgressBar = new QProgressBar(this);
    pProgressBar->setFixedSize(150, 10);
    pProgressBar->setToolTip(QStringLiteral("离下一等级还需要1500经验"));
    pProgressBar->setFormat("12345/50000");
    pProgressBar->setMaximum(100);
    pProgressBar->setValue(10);

    QString strQSS = "QProgressBar {color: white;} \
        QProgressBar:horizontal { \
        text-align: center; \
        border: 1px solid rgb(115, 200, 60); \
        background: rgb(145, 210, 75, 150); \
    } \
    QProgressBar::chunk:horizontal { \
        background: rgb(145, 210, 75); \
    }";

    pProgressBar->setStyleSheet(strQSS);
 
 
 
 
二、全屏显示与还原
 
 
1、遮挡任务栏
 
 
 
 
    showFullScreen()
    showMaximized() 这两个都可以！
 
 
2、不遮挡任务栏
 
 
 
 
void showMaximize()
{
    //若已经最大化
    if(is_max)
    {
        //恢复界面位置，并设置按钮图标为最大化图标，提示“最大化”
        this->setGeometry(location);
        max_button->setIcon(QIcon("maxbtn"));
        max_button->setToolTip(tr("max"));
    } 
    else 
    {
        //设定当前界面的位置，还原时使用
        location = this->geometry();
        //获取桌面位置，设置为最大化，并设置按钮图标为还原图标，提示“还原”
        QDesktopWidget *desk = QApplication::desktop();
        this->setGeometry(desk->availableGeometry());
        max_button->setIcon(QIcon("restorbtn"));
        max_button->setToolTip(tr("restor"));
    }
    is_max = !is_max;
}
 
 
   注：窗口既然可以最大化，当然还要进行还原，is_max为一个bool值变量，表示窗口是否最大化，初始值为false。location为桌面的位置，每次最大化开始先记录当前的位置，等待还原时候使用。
 
 
三、QSS样式
 
 
1、QComboBox
 
 
 
 
    comboBox->setStyleSheet("QComboBox{border:1px solid gray;}"
    "QComboBox QAbstractItemView::item{height:25px;}"
    "QComboBox::down-arrow{image:url(:/icon/arrowdown);}"
    "QComboBox::drop-down{border:0px;}");
    comboBox->setView(new QListView());
 
 
Qt之界面实现技巧(包括设置下拉箭头、下拉选项高度等)、
 
 
2、QSpinBox
 
 
 
 
    pSpinBox->setStyleSheet("QSpinBox{border:1px solid gray;}"
    "QSpinBox::up-button{image:url(:/icon/arrow_up);}"
    "QSpinBox::down-button{image:url(:/icon/arrow_down);}");
 
 
 Qt之界面实现技巧
 
 
3、QMenu
 
 
 
 
QMenu{
    padding:5px;
    background:white;
    border:1px solid gray;
 }
QMenu::item{
    padding:0px 40px 0px 30px;
    height:25px;
}
QMenu::item:selected:enabled{
    background:lightgray;
    color:white;
}
QMenu::item:selected:!enabled{
    background:transparent;
}
QMenu::separator{
    height:1px;
    background:lightgray;
    margin:5px 0px 5px 0px;
}
 
 
Qt之界面实现技巧
 
 
4、QSlider
 
 
 
 
QSlider::groove:horizontal{
    border:0px;
    height:4px;
}  
QSlider::sub-page:horizontal{
    background:white;
}  
QSlider::add-page:horizontal{
    background:lightgray;
} 
QSlider::handle:horizontal{
    background:white;
    width:10px;
    border-radius:5px;
    margin:-3px 0px -3px 0px;
}
 
 
Qt之界面实现技巧
 
 
5、QCheckBox
 
 
 
 
QCheckBox{
    spacing: 2px; 
}
QCheckBox::indicator {
    width: 20px;
    height: 20px;
}
QCheckBox::indicator:unchecked {
    image: url(:/login/checkbox);
}
QCheckBox::indicator:unchecked:hover {
    image: url(:/login/checkbox_hover);
}
QCheckBox::indicator:unchecked:pressed {
    image: url(:/login/checkbox_press);
}
QCheckBox::indicator:checked {
    image: url(:/login/checkbox_selected);
}
QCheckBox::indicator:checked:hover {
    image: url(:/login/checkbox_selected_hover);
}
QCheckBox::indicator:checked:pressed {
    image: url(:/login/checkbox_selected_press);
}
 
 
Qt之界面实现技巧
 
 
6、QScrollBar
 
 
 
 
水平滚动条 
QScrollBar:horizontal { 
    max-height: 9px;
    background: transparent;
    padding-left: 9px;
    padding-right: 9px;
}
QScrollBar::handle:horizontal {
    height: 9px;
    min-width: 20px;
    background: rgb(190, 190, 190);
}
QScrollBar::handle:horizontal:hover {
    background: rgb(170, 170, 170);
}
QScrollBar::sub-line:horizontal {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowLeft);
    subcontrol-position: left;
}
QScrollBar::add-line:horizontal {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowRight);
    subcontrol-position: right;
}
QScrollBar::sub-line:horizontal:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowLeftHover);
}
QScrollBar::add-line:horizontal:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowRightHover);
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
    background: rgb(220, 220, 220);
}

垂直滚动条 
QScrollBar:vertical {
    max-width: 9px;
    background: transparent;
    padding-top: 9px;
    padding-bottom: 9px;
}
QScrollBar::handle:vertical {
    width: 9px;
    min-height: 20px;
    background: rgb(190, 190, 190);
} 
QScrollBar::handle:vertical:hover {
    background: rgb(170, 170, 170);
} 
QScrollBar::sub-line:vertical {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowTop);
    subcontrol-position: top;
} 
QScrollBar::add-line:vertical {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowBottom);
    subcontrol-position: bottom;
} 
QScrollBar::sub-line:vertical:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowTopHover);
}
QScrollBar::add-line:vertical:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowBottomHover);
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical {
    background: rgb(220, 220, 220);
}
 
 
Qt之界面实现技巧


 
 
7、QStatusBar
 
 
 
 
QStatusBar::item{
    border: 0px;
}
//不存在分隔线
 
 
8、QComboBox
 
 
 
 
QComboBox {
    border-image: url(:/OverdraftControl/comboBox);
}
QComboBox:hover {
    border-image: url(:/OverdraftControl/comboBoxHover);
}
QComboBox:pressed {
    border-image: url(:/OverdraftControl/comboBoxPressed);
}
QComboBox::down-arrow {
    image: none;
}
QComboBox::drop-down {
    width: 15px;
    border: none;
}
QComboBox QAbstractItemView {
    border: 1px solid lightgray;
    outline: 0px;  //去掉item虚线
}
QComboBox QAbstractItemView::item {
    color: black;
    height: 22px;
    border: 1px solid transparent;
}
QComboBox QAbstractItemView::item:selected {
    border: 1px solid rgb(170, 190, 230);
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(230, 240, 250), stop: 0.5 rgb(220, 235, 255), stop: 1.0 rgb(210, 230, 255));
}
 
 
一般也可以使用QPalette
 
 
 
 
    QPalette palette;  
    palette.setBrush(QPalette::WindowText, QBrush(Qt::white));  
    pCheckBox->setPalette(palette);  
    pCheckBox->setStyleSheet("color:white");
 
 
调色板类QPalette提供了颜色角色（color roles）的概念，指当前界面中颜色的职责，通过枚举变量QPalette::ColorRole来定义，比较常用的角色有：
 
 
 
 
    QPalette::Window  通常指窗口部件背景色
    QPalette::WindowText  通常指窗口部件的前景色
    QPalette::Base  指文本的背景色（QTextEdit、QLineEdit等）
    QPalette::Text  与QPalette::Base一块使用，指文本输入窗口部件前景色
    QPalette::Button   指按钮窗口部件的背景色
    QPalette::ButtonText  指按钮窗口部件的前景色
 
 
    
 


                

        

        

    

  


    

      

        

            

              
                
                  king16304
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
QT实现程序启动界面

				
			

			

				

					10-16
				

			

		

		

			
				
在本项目中，“QT实现程序启动界面”指的是使用QT库来设计和实现一个应用程序的启动画面。  首先，我们要理解QProcess类。QProcess是QT中的一个核心类，主要用于管理子进程。它可以用来启动外部程序、传递参数，并...

			
		

	



                

            
              



	

		

			

				
					
Qt 按钮美化程序

				
			

			

				

					04-29
				

			

		

		

			
				
按钮美化 包括标题栏 等界面的美化程序 需要的下载吧

			
		

	



              


  
              

                


	

		

			

				
					
精通QT菜单与工具栏设计

					
最新发布

				
			

			

				

					weixin_28931449的博客
				

				

					09-24
					
					1119
					
				

			

		

		

			
				
本文还有配套的精品资源，点击获取
 
 


 简介：QTmenu_qtmenu_QT编程_QT_界面设计_是一个专门讲解如何使用QT库开发跨平台图形用户界面的教程。QT库是一个功能丰富的框架，特别适合创建具有复杂界面的应用程序。教程着重于菜单栏和工具栏的设计，这两个元素对于提升用户体验至关重要。使用
 
  QMenuBar
 
 和
 
  QToolBar
 
 类，开发者能够高效...

			
		

	





	

		

			

				
					
Qt控件美化

				
			

			

				

					allen5200的专栏
				

				

					02-23
					
					5480
					
				

			

		

		

			
				
<br />级联样式表 (CSS) 
包含应用于网页中的元素的样式规则。CSS 
样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则，只要 Web 
浏览器遇到一个元素实例，或遇到一个分配给某个特定样式类的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。
 CSS 
样式可以通过内联方式放置在单个 HTML 
元素内，也可以在网页 head 
部分的 style 
块内加以分组，或从单独的样式表中导入。如果样式是在单独的样式表中创建的，则可以将多个网页链接

			
		

	



		

			
		



	

		

			

				
					
Qt-界面最大化

				
			

			

				

					gududeyhc的专栏
				

				

					04-24
					
					1844
					
				

			

		

		

			
				
方法一：

  showMaximized(); //界面最大化，win10下可能无法最大化

 方法二：
  setWindowState(Qt::WindowMaximized);


			
		

	





	

		

			

				
					
QT按钮美化

				
			

			

				

					小小程序员
				

				

					05-18
					
					5263
					
				

			

		

		

			
				
QPushButton *rectPainted = new QPushButton();

rectPainted->setStyleSheet("QPushButton{background:#e6f0fa;border:2px groove gray;border-radius:10px;padding:2px 4px}"\  //圆角按钮

			
		

	





	

		

			

				
					
quitool_QT_qt界面漂亮_QT界面美化_qt漂亮界面_QTUI

				
			

			

				

					09-11
				

			

		

		

			
				
在"quitool_QT_qt界面漂亮_QT界面美化_qt漂亮界面_QTUI"这个项目中，我们看到的"frmquitool.ui"、"frmquitool.h"和"frmquitool.cpp"三个文件是QT界面开发中常见的文件类型：  1. `frmquitool.ui`：这是一个由QT的...

			
		

	





	

		

			

				
					
QT.rar_QT 实现_QT实现界面_Qt A_Qt 界面程序

				
			

			

				

					09-22
				

			

		

		

			
				
QT界面程序的开发还需要掌握QT的信号和槽机制，这是QT事件处理的核心。此外，QML（QT Quick）提供了一种声明式语言，用于快速构建动态和交互性强的界面，是现代QT开发的常用技术。  总的来说，"QT.rar"的内容可能...

			
		

	





	

		

			

				
					
QT UI.zip_QT 精美UI资源_QT界面美化_qt 美化_qt5 界面美化_theoryazi

				
			

			

				

					07-14
				

			

		

		

			
				
通过学习和理解这些QT界面美化技术，开发者可以创造出极具个性化的应用界面，满足不同用户的需求。QT的灵活性和强大功能使其成为构建跨平台桌面应用的理想选择。无论是初学者还是经验丰富的开发者，都可以通过这个...

			
		

	





	

		

			

				
					
QT按钮类的美化

				
			

			

				

					12-05
				

			

		

		

			
				
我们都知道，QT自带的QPushButton类特效简单，尤其在做游戏的时候显得与项目格格不入，所以我们将QPushButton继承出来重写，通过enterEvent，重绘等多个函数进行美化

			
		

	





	

		

			

				
					
【Qt】应用启动的时候最大化界面

				
			

			

				

					-凌凌漆-的博客
				

				

					04-28
					
					951
					
				

			

		

		

			
				
【代码】【Qt】应用启动的时候最大化界面。

			
		

	





	

		

			

				
					
Qt窗口最大化

				
			

			

				

					查尔斯先生的博客专栏
				

				

					09-26
					
					1万+
					
				

			

		

		

			
				
    //showMaximized();  //界面最大化，win10下可能无法最大化
    setWindowState(Qt::WindowMaximized); //ok

			
		

	





	

		

			

				
					
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮？一文带你掌握用法

					
热门推荐

				
			

			

				

					探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
				

				

					07-18
					
					1万+
					
				

			

		

		

			
				
窗口的最大化、最小化和关闭按钮通常是由操作系统的窗口管理器控制的，而不是由应用程序控制的。这些按钮的行为（例如点击最大化按钮会将窗口的大小调整为屏幕的大小）是由窗口管理器实现的，应用程序通常不能改变这些行为。

在 Qt 中，你可以通过 QWidget::setWindowFlags 函数来设置窗口的一些属性，包括是否显示最大化、最小化和关闭按钮。但是，这些属性的实际效果可能会受到窗口管理器的限制。例如，一些窗口管理器可能会忽略 Qt::WindowMaximizeButtonHint 标志，总是显示最大化

			
		

	





	

		

			

				
					
Qt界面设计1

				
			

			

				

					weixin_30871905的博客
				

				

					08-30
					
					149
					
				

			

		

		

			
				
最近刚接触Qt 对于QML做界面感觉已经很轻松了,但是想尝试一下GUI..准备做一个理财的小软件 ....慢慢记录我的一点一滴的学习经历.
自己封装界面UI 遇到了好多新手级别的问题=_=!!! 

1、界面透明 方法好多设置pattle 等等这里我就用这一个
ydw.setWindowFlags(Qt::FramelessWindowHint);
 //在设置...

			
		

	





	

		

			

				
					
Qt 窗口最大化，全屏无边框显示

				
			

			

				

					qq_44820566的博客
				

				

					05-03
					
					4152
					
				

			

		

		

			
				
qt 屏幕显示问题

			
		

	





	

		

			

				
					
qt中界面最大化的使用注意点

				
			

			

				

					weixin_43935474的博客
				

				

					02-21
					
					1386
					
				

			

		

		

			
				
在我的这个程序里面需要实现如下功能：
1.界面最大化
2.界面去掉标题栏
3.显示界面
4.显示界面的时候重新设置界面里面控件的大小
代码如下：
maxPicShowForm.setWindowState(Qt::WindowMaximized);//界面最大化
maxPicShowForm.setWindowFlag(Qt::FramelessWindowHint);//去掉标题栏
maxPic...

			
		

	





	

		

			

				
					
Qt QPushButton 按钮美化

				
			

			

				

					kanyun123的博客
				

				

					04-04
					
					7077
					
				

			

		

		

			
				
Qt 默认的QPushButton 样式是操作系统的样式,如果想要扁平化的按钮样式,最简单的是通过Qss来进行设置。
首先通过代码,设置

QPushButton::setFlat(true)

然后编辑Qss文件

QPushButton {
  background: transparent;
  border:none;
}

这里需要注意的是,除了要设置background: tr...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值