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