Qt应用开发(Quick篇)——布局类与布局模块

一、前言

       实际 应用中，布局是常用的功能，布局最直观的就是提供空间使用率，改善空间的流动和模块之间的重叠，让界面更加的美观。

二、布局类Layout

2.1 介绍

         将Layout类型的对象附加到布局的子元素上，提供有关该项的特定于布局的信息，附加对象的属性也会影响布局安排项目的方式。

        提供最小宽度minimumWidth、最大宽度maximumWidth、首选宽度preferredWidth等影响元素的宽度，填充宽度fillWidth和填充高度fillHeight属性如果它们为false，则项目的大小将固定为首选大小，否则，当布局调整大小时，它将在最小和最大之间增长或缩小。

 ColumnLayout{
     spacing: 2

     Rectangle {
         Layout.alignment: Qt.AlignCenter
         color: "red"
         Layout.preferredWidth: 40
         Layout.preferredHeight: 40
     }

     Rectangle {
         Layout.alignment: Qt.AlignRight
         color: "green"
         Layout.preferredWidth: 40
         Layout.preferredHeight: 70
     }

     Rectangle {
         Layout.alignment: Qt.AlignBottom
         Layout.fillHeight: true
         color: "blue"
         Layout.preferredWidth: 70
         Layout.preferredHeight: 40
     }
 }

        注意:不要绑定到布局中项目的x、y、width或heigh属性，因为这将与布局的目标相冲突，并且还可能导致绑定循环。布局引擎使用宽度和高度属性来存储从最小/首选/最大附加属性计算出来的项目的当前大小，并且可以在每次布局项目时重写。

2.2 依附属性

Layout.alignment : Qt.Alignment

        此属性表示元素在其占用的单元格内的对齐方式，默认为左对齐+纵向居中，也就是Qt.AlignVCenter | Qt.AlignLeft，如果只指定了水平标志，默认的垂直标志将是Qt.AlignVCenter，如果只指定了垂直标志，默认的水平标志将是Qt.AlignLeft。

        有效的对齐方式有：

• Qt::AlignLeft                水平左对齐
• Qt::AlignHCenter         水平居中
• Qt::AlignRight              水平右对齐
• Qt::AlignTop                 垂直顶部对齐
• Qt::AlignVCenter          垂直居中
• Qt::AlignBottom            垂直底部对齐
• Qt::AlignBaseline          垂直基线对齐

 

Layout.margins : real

Layout.bottomMargin : real

Layout.topMargin : real

Layout.rightMargin : real

Layout.leftMargin : real

        设置布局内元素的外边距，默认为0。如果设置了边距，那么元素的有效单元格大小将随着边距的增加而增加。

Layout.maximumHeight : real

Layout.maximumWidth : real

Layout.minimumHeight : real

Layout.minimumWidth : real

Layout.preferredHeight : real

Layout.preferredWidth : real

Layout.fillHeight : bool

Layout.fillWidth : bool

        设置布局内元素的宽高和是否填充策略。

Layout.column : int

Layout.row : int

        指定元素在网格布局GridLayout中的位置。

Layout.columnSpan : int

Layout.rowSpan : int

        指定元素在网格布局GridLayout中的行和列跨度，默认值为1，也就是占据一行一列。     

        在下面的例子中，第一个元素的行跨度为2，所以它占据了两行，在实际的应用场景中，该属性在网格布局中是非常好用的。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.VirtualKeyboard 2.15
import QtQuick.Layouts 1.15

Window {
    id: window
    width:800
    height: 600
    visible: true
    title: qsTr("Hello World")

    GridLayout{
        anchors.centerIn: parent
        columns: 3
        Rectangle {
            Layout.alignment: Qt.AlignBottom
            Layout.fillHeight: true
            Layout.rowSpan: 2
            color: "blue"
            Layout.preferredWidth: 70
            Layout.preferredHeight: 40
        }

        Rectangle {
            Layout.alignment: Qt.AlignBottom
            Layout.fillHeight: true
            color: "blue"
            Layout.preferredWidth: 70
            Layout.preferredHeight: 40
        }

        Rectangle {
            Layout.alignment: Qt.AlignBottom
            Layout.fillHeight: true
            color: "blue"
            Layout.preferredWidth: 70
            Layout.preferredHeight: 40
        }
        Rectangle {
            Layout.alignment: Qt.AlignBottom
            Layout.fillHeight: true
            color: "blue"
            Layout.preferredWidth: 70
            Layout.preferredHeight: 40
        }
        Rectangle {
            Layout.alignment: Qt.AlignBottom
            Layout.fillHeight: true
            color: "blue"
            Layout.preferredWidth: 70
            Layout.preferredHeight: 40
        }
    }

}

三、行布局模块RowLayout、列布局模块ColumnLayout

        这两种模块的作用比较单一，只支持一行/一列的元素的布局，通过Layout类的依附属性完成界面的设计。

3.1 属性

layoutDirection : enumeration

        此属性保留列布局的布局方向是从左到右还是从右到左进行布局，默认为从左到右，在开头实例布局方向，左侧为从右到左效果，右侧为从左到右效果。

spacing : real

        该属性每个单元格之间的间距，默认为5。

四、网格布局模块GridLayout

        网格布局是单向布局的高级版本，代码参考第二个实例。

4.1属性

        layoutDirection属性与单向布局相同，其他属性还有:

columnSpacing : real

rowSpacing : real

        每个单元格之间的行列间距，默认为5。

flow : enumeration

        该属性表示没有显式单元格位置集的项的流向。它与columns或rows属性一起使用，它们分别指定何时将流重置为下一行或下一列，默认为从左到右。

        下面的实例中，通过五个不同颜色的

GridLayout{                             
    anchors.centerIn: parent            
    columns:2                           
   // rows: 3                           
   // flow:GridLayout.TopToBottom       
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        Layout.rowSpan: 2               
        color: "blue"                   
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
                                        
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "red"                    
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
                                        
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "green"                  
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "grey"                   
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "black"                  
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
}                                       

GridLayout{                             
    anchors.centerIn: parent            
   // columns:2                         
    rows: 3                             
    flow:GridLayout.TopToBottom         
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        Layout.rowSpan: 2               
        color: "blue"                   
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
                                        
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "red"                    
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
                                        
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "green"                  
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "grey"                   
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
    Rectangle {                         
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true         
        color: "black"                  
        Layout.preferredWidth: 70       
        Layout.preferredHeight: 40      
    }                                   
}                                       

columns : int

rows : int

         限制创建的行和列数，要注意元素超出范围，否则会崩溃，默认不限制。