04. 布局管理和样式表

布局管理和样式表

一、布局管理

• 对于一个完善的软件，布局管理却是必不可少的。无论是想要界面中部件有一个很整齐的排列，还是想 要界面能适应窗口的大小变化，都要进行布局管理。Qt中主要提供了QLayout类及其子类来作为布局管理器，它们可以实现常用的布局管理功能
• 这个东西就是对窗口上面的控件进行排版，而排版的作用就是好看，所以布局管理的作用就是为了让界 面能整洁好看，布局管理有4种，这4种之间是可以嵌套的

1. 水平布局：在这个布局中的所有控件都会水平放置，只有一行，多列，也就是全部放在了一行
2. 垂直布局：在这个布局中的所有控件都会垂直放置，只有一列，多行，也就是全部放在了一列
3. 在窗体布局中布局：在这个布局中的所有控件都会是多行，两列的方式放置，可以有n行，但是只有两列
4. 格栅布局：在这个布局里面所有的空间可以是多行多列，想电子表格一样

• 那么对于这4种布局，都是可以相互嵌套的，那么布局完一些控件之后，那么对于这个这个布局就可以理解为一 个控件，那么这个控件就可以放到其他的布局里面了，这样就嵌套了
• 当然还有一个打破布局，作用就是取消布局，比如对3个控件做了一个水平布局，那么选中这个布局，点击打破 布局，那么这个水平布局就失效了
• 在使用这个布局的时候：一个大的布局，然后可以往里面添加子布局然后构成整体的布局，具体的代码实现可以在steupui下面去 看，主要是通过 addWidget添加控件 和addLayout添加布局
• 点一下空白的地方，然后随便选择一个布局，那么就整个窗口都布局好了
• 这样之后，改变窗口大小的时候，那么这个上面的空间也会跟着变化

二、样式表

• 使用样式表时，每个小部件都被视为具有四个同心矩形的框：空白矩形、边框矩形、填充矩形和内容矩 形。盒子模型对此进行了更详细的描述。

• margin:空白
  padding:边框
  Border:填充
  Content:内容
  空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架
  

• 可以在Qt帮助文档里找 Qt Style Sheets Examples 中寻找示例

• 里用的语法其实就是CSS的语法，但是QT命名为QSS，下面基础用法

  控件类名:状态
  {
      属性:值1;
      属性:值2;
      .....
      属性:值N;
  }
  以下是一些控件的常用的状态
  :checked button部件被选中
  :disabled 部件被禁用
  :enabled 部件被启用
  :focus 部件获得焦点
  :hover 鼠标位于部件上
  :indeterminate checkbox或radiobutton被部分选中
  :off 部件可以切换，且处于off状态
  :on 部件可以切换，且处于on状态
  :pressed 部件被鼠标按下
  :unchecked button部件未被选中
  

  比如鼠标位于button上

  左到右 红到黑(渐变色)
  QPushButton:hover{
  background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0
  rgba(255, 0, 0, 255), stop:0.6 rgba(0, 0, 0, 255));
  }
  

  指定样实对什么生效，这种要右键widget添加样式

  #lineEdit{
  background-color: rgb(48, 103, 255);
  }
  //前面加个#，要写对象名，不能写类型名字
  
  

1. pushbutton：

   border:5px groove blue; 边框5px 3d，蓝色
   border-radius:10px; 圆角，弧度10px
   

   none	定义无边框。
   hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
   dotted	定义点状边框。在大多数浏览器中呈现为实线。
   dashed	定义虚线。在大多数浏览器中呈现为实线。
   solid	定义实线。
   double	定义双线。双线的宽度等于 border-width 的值。
   groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。

2. radiobutton

   QRadioButton::indicator::unchecked{ //没有被选中时，的选中按钮为图片
       image: url(:/png/png/blueStone.png);
       width: 50px;
       height:50px;
   }
   QRadioButton::indicator::checked { //选中时
       image: url(:/png/png/redStone.png);
   }
   QRadioButton::indicator:checked:hover { //选中时，并且鼠标在上面
       image: url(:/png/png/downloadsfolder.png);
   }
   

3. progressbar

   QProgressBar::chunk { //显示的进度条里面的内容
       background-color: #CD96CD;
       width: 10px;
       margin: 0.5px;
   }
   QProgressBar { //进度条的边框，及文字
       border: 2px solid grey;
       border-radius: 5px;
       text-align: center;
   }
   

4. combobox

   QComboBox { //去掉边框
       border:none;
   }
   QComboBox::drop-down { //下拉的也去掉边框，设置大小，图片
       border:none;
       image: url(:/png/png/downloadsfolder.png);
       width:30;
       height:30;
   }
   

5. lcdnumber

   QPalette lcdpat=ui->lcdNumber->palette();
   lcdpat.setColor(QPalette::Normal,QPalette::WindowText,Qt::red);//设置字体颜色为
   红色
   ui->lcdNumber->setPalette(lcdpat);//红色字体
   

• Qt中常见子类控件如下：
  - ::branch
  	- QTreeView的分支指示器
  - ::chunk
  	- QProgressBar的进度显示块
  - ::cIose-button
  	- QDockWidget或QTabBar页面的关闭按钮
  - ::down-arrow
  	- QComboBox，QHeaderView (排序指示器)，QScrollBar 或 QSpinBox 的下拉箭头
  - ::down-button
  	- QScrollBar或QSpinBox的向下按钮
  - ::drop-down
  	- QComboBox的下拉按钮
  - ::float-button
  	- QDockWidget的浮动按钮
  - ::groove
  	- QSlider的凹槽
  - ::indicator
  	- QAbstractltemView，QCheckBox, QRadioButton，可勾选的 QMenu 菜单项，或可勾选的
  QGroupBox的指示器
  - ::handle
  	- QScrollBar，QSplitter 或 QS丨ider 的滑块
  - ::icon
  	- QAbstract丨temView 或 QMenu 的图标
  - ::item
  	- QAbstractltemView，QMenuBar，QMenu，或 QStatusBar 的—个项
  - ::left-arrow
  	- QScrollBar的向左箭头
  - ::menu-arrow
  	- 具有下拉菜单的QToolBimon的下拉箭头
  - ::menu-button
  	- QToolButton的菜单按钮
  - ::menu-indicator
  	- QPushButton的菜单指示器
  - ::right-arrow
  	- QMenu或QScrollBar的右侧箭头
  - ::pane
  	- QTabWidget 的面板
  - ::scroller
  	- QMenu或QTabBar的卷轴
  - ::section
  	- QHeaderView 的分段
  - ::separator
  	- QMenu 或 QMainWindow 的分隔器
  - ::tab
  	- QTabBar 或 QToolBox 的分页
  - ::tab-bar
  	- QTabWidget的分页条。这个子控件只用于控制QTabBar在QTabWidget中的位置，定义分页的样式使
  用::tab子控件
  - ::text
  	- QAbstracdtemView 的文字
  - ::title
  	- QGroupBox 或 QDockWidget 的标题
  - ::up-arrow
  	- QHeaderView (排序指示器)，QScroIlBar或QSpinBox的向上箭头
  - ::up-button
  	- QSpinBox的向上按钮
  

三、实现一个自定义形状登录框

this->setWindowFlag(Qt::FramelessWindowHint);//隐藏标题栏
setWindowOpacity(0.4); //窗口透明度
setAttribute(Qt::WA_TranslucentBackground); //是窗口透明，但是上面的空间不透明

• 准备一张图png格式的图片，注意背景是透明的，然后在图片中要留出来，输入的地方，和按钮的地 方

• 添加按钮和输入框等控件在账号密码处