Qt学习08——布局管理综合应用

实例:用户信息管理窗口

一、实例描述

最外层采用QSplitter分割窗口左右部分,左侧为QListWidget,右侧为QStackedWidget和QPushButton。QStackedWidget共有3个页面,通过信号-槽与QListWidget的item对应。QStackedWidget每个页面均采用QGridLayout进行布局。

布局框架大致如图所示:


二、实现过程

1、QListWidget

新建QListWidget控件,并添加3个项目;



2、QPushButton布局

新建2个按钮并使用QHLayout水平布局,用Spacer调整位置。调整位置时,使用layoutStretch控制布局比例。



3、QStackedWidget布局

新建QStackedWidget,与按钮布局组建QVLayout垂直布局,同样使用使用layoutStretch控制布局比例。



4、QSplitter分割器

Qt中并没有直接给出QSplitter控件,但是可以在布局工具栏中找到。同时选中listWidget和verticalLayout,使用分裂期水平布局即可。


测试一下效果:


关于QSplitter在Qt Creator中详细的使用方法,还可以参考QSplitter的使用和设置

5、QStackedWidget页面内布局

添加每个页面内的控件,此为page1内的控件:


在page1页面下,右键stackedWidget对象,选择栅格布局(GridLayout),适当调整调整控件大小和位置、横纵布局比例(layoutColumnStretch、layoutRowStretch),在必要的地方使用spacer辅助调整:


按照这个方法完成stackedWidget的其他页面。

6、窗体布局调整

由于splitter没有设定QListWidget和右侧QVLayout的比例,需要在splitter外再加一层gridLayout来控制窗体布局比例。


7、添加信号-槽

使用Designer的信号-槽编辑器就可以完成简单的信号-槽添加。将listWidget的currentRowChanged(int)信号与stackedWidget的setCurrentIndex(int)槽函数对应,即可实现当listWidget切换列项目时,stackedWindow切换到对应编号的页面。


三、总结

整个layout层次如下:


附上.ui文件的xml代码:


   
   

   
   
 
    
    
     
     userLayout
    
    
 
    
    
  
     
     
   
      
      
    
       
       
         0 
       
    
       
       
         0 
       
    
       
       
         800 
       
    
       
       
         400 
       
   
      
      
  
     
     
  
     
     
   
      
      
       
       userLayout
      
      
  
     
     
  
     
     
   
      
      
    
       
        
         
          
           
           
             Qt::Horizontal 
            
           
           
            
            
              40 
             
            
              20 
             
            
           
          
         
         
          
           
           
             修改 
            
           
          
         
         
          
           
           
             关闭 
            
           
          
         
       
   
      
      
   
      
      
    
       
        
         
         
           Qt::ElideRight 
          
         
         
          
          
            基本信息 
           
          
          
          
            AlignCenter 
           
          
         
         
          
          
            联系方式 
           
          
          
          
            AlignCenter 
           
          
         
         
          
          
            详细资料 
           
          
          
          
            AlignCenter 
           
          
         
       
   
      
      
   
      
      
    
       
        
         
         
           0 
          
         
         
          
           
            
           
           
            
             
             
               Qt::Horizontal 
              
             
             
              
              
                40 
               
              
                20 
               
              
             
            
           
           
            
             
              
              
                男 
               
              
             
             
              
              
                女 
               
              
             
             
              
              
                其他 
               
              
             
            
           
           
            
             
             
               个人说明: 
              
             
             
             
               Qt::AlignCenter 
              
             
             
             
               descTEdit 
              
             
            
           
           
            
           
           
            
             
             
               姓 名: 
              
             
             
             
               nameLEdit 
              
             
            
           
           
            
           
           
            
             
             
               头 像: 
              
             
             
             
               Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter 
              
             
             
             
               picGraph 
              
             
            
           
           
            
             
             
               性 别: 
              
             
            
           
           
            
           
           
            
             
             
               部 门: 
              
             
             
             
               deptTEdit 
              
             
            
           
           
            
             
             
               用户名: 
              
             
             
             
               userLEdit 
              
             
            
           
           
            
             
             
               年 龄: 
              
             
             
             
               ageLEdit 
              
             
            
           
           
            
           
           
            
           
           
            
             
             
               false 
              
             
             
             
               备 注: 
              
             
             
             
               Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter 
              
             
            
           
           
            
             
             
               更新 
              
             
            
           
          
         
         
          
           
            
             
             
               电子邮件: 
              
             
            
           
           
            
           
           
            
             
             
               Qt::Horizontal 
              
             
             
              
              
                40 
               
              
                20 
               
              
             
            
           
           
            
             
             
               联系地址: 
              
             
            
           
           
            
           
           
            
             
             
               邮政编码: 
              
             
            
           
           
            
           
           
            
             
             
               个人电话: 
              
             
            
           
           
            
           
           
            
             
             
               接收留言 
              
             
            
           
           
            
             
             
               办公电话: 
              
             
            
           
           
            
           
           
            
             
             
               Qt::Vertical 
              
             
             
              
              
                20 
               
              
                40 
               
              
             
            
           
          
         
         
          
           
            
             
             
               国家/地区: 
              
             
            
           
           
            
             
             
               true 
              
             
             
              
              
                中国 
               
              
             
             
              
              
                美国 
               
              
             
             
              
              
                日本 
               
              
             
             
              
              
                英国 
               
              
             
             
              
              
                德国 
               
              
             
            
           
           
            
             
             
               省 份: 
              
             
            
           
           
            
             
             
               true 
              
             
            
           
           
            
             
             
               城 市: 
              
             
            
           
           
            
             
             
               true 
              
             
            
           
           
            
             
             
               个人说明: 
              
             
            
           
           
            
           
          
         
       
   
      
      
  
     
     
  
     
     
      
      listWidget
     
     
  
     
     
      
      layoutWidget
     
     
  
     
     
      
      horizontalSpacer
     
     
  
     
     
  
     
     
      
      layoutWidget_2
     
     
  
     
     
  
     
     
      
      stackedWidget
     
     
 
    
    
 
    
    
 
    
    
 
    
    
  
     
     
   
      
      
       
       listWidget
      
      
   
      
      
       
       currentRowChanged(int)
      
      
   
      
      
       
       stackedWidget
      
      
   
      
      
       
       setCurrentIndex(int)
      
      
   
      
      
    
       
        
        
          99 
         
        
          199 
         
       
    
       
        
        
          500 
         
        
          181 
         
       
   
      
      
  
     
     
 
    
    

   
   

运行效果:



代码打包下载:

码云:https://git.oschina.net/shawn06/qt_study_userinfomanager.git

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值