树莓派Qt系列教程12：布局管理(下)

前言

布局管理器

因为布局管理器作为单独的模块提供，所以，在使用前需要添加导入语句

import QtQuick.Layouts 1.3

RowLayout

RowLayout会在水平方向上布局，而对于其中具体的布局设计，需要通过Layout附加属性来进行。属性如下：

• Layout.minimumWidth：设置最小宽度
• Layout.minimumHeight：设置最小高度
• Layout.preferredWidth：设置建议的宽度
• Layout.preferredHeight：设置建议的高度
• Layout.maximumWidth：设置最大宽度
• Layout.maximumHeight：设置最大高度
• Layout.fillWidth：设置填充宽度，当界面被拉伸出现更多空间时，该控件的宽度会自动增加来填充这些空间
• Layout.fillHeight：设置填充高度
• Layout.alignment：设置对其方式 我们通过一个简单的小例程来看一下：

      RowLayout{
          anchors.fill: parent
          spacing: 20
  
  
          Rectangle{
              Layout.alignment: Qt.AlignTop
              color: "orange"
              Layout.preferredWidth: 100
              Layout.preferredHeight: 100
          }
  
          Rectangle{
              Layout.alignment: Qt.AlignTop
              color: "blue"
              Layout.preferredWidth: 100
              Layout.preferredHeight: 100
          }
  
          Rectangle{
              Layout.alignment: Qt.AlignBottom
              color: "green"
              Layout.preferredWidth: 100
              Layout.preferredHeight: 100
          }
  
          Rectangle{
              Layout.alignment: Qt.AlignBottom
              color: "purple"
              Layout.preferredWidth: 100
              Layout.preferredHeight: 100
          }
      }

  
  

在我们导入了Layout模块后，就可以在程序中使用RowLayout元素了，和上一节一样，在布局管理器中添加矩形小框，不同的是这个例程我们要单独设置一下子项目的位置。

使用Layout.alignment设置对其方式，对于RowLayout来说，不设置的话就是居中对其，整齐的排列在一条直线上，现在我们将前两个矩形向上对其，后两个矩形向下对其。现在运行程序看看，矩形的位置发生了什么变化？

ColumnLayout

ColumnLayout的用法和RowLayout用法类似，向我们常见到的一列选项，就是用了垂直布局管理器，我们也是给出一个小例程供大家参考

ColumnLayout{
        anchors.centerIn: parent
        spacing: 20

        Text{
            text: "请选择喜欢的科目"
            font.pointSize: 20
            color: "purple"
            font.bold: true
            Layout.leftMargin: 30
        }

        CheckBox{
            text: "语文"
            Layout.leftMargin: 30
            font.pixelSize: 15
        }
        CheckBox{
            text: "数学"
            Layout.leftMargin: 30
            font.pixelSize: 15
        }
        CheckBox{
            text: "英语"
            Layout.leftMargin: 30
            font.pixelSize: 15
        }
        CheckBox{
            text: "生物"
            Layout.leftMargin: 30
            font.pixelSize: 15
        }
        CheckBox{
            text: "化学"
            Layout.leftMargin: 30
            font.pixelSize: 15
        }
    }

虽然这个效果groupbox也能实现，但是使用布局管理器的方式还是更加灵活和方便，这里有一个新的属性Layout.leftMargin，相信 不用解释大家也懂这个是设置什么的了。界面效果如下：

GridLayout

GridLayout新增加的属性和之前讲过的Grid一样，就是行列以及sapcing的设置，其他的属性可以参考RowLayout。大家应该都遇到过登录界面，其实，登录界面的设计就是一个典型的GridLayout方法，我们写一个非常简单的登陆界面。

GridLayout{
        anchors.centerIn: parent
        columns: 2
        rows: 3
        columnSpacing: 20
        rowSpacing: 20
        Layout.rowSpan: 20

        //第一行
        Label{
            text:"用户名"
            font.pixelSize: 20

        }
        Rectangle{
             id:rect1
             border.color: "black"
             width: 200
             height: 30

             TextEdit{
                 anchors.fill: rect1
                 font.pixelSize: 20
             }
        }

        //第二行
        Label{
            text:"密码"
            font.pixelSize: 20

        }
        Rectangle{
             id:rect2
             border.color: "black"
             width: 200
             height: 30

             TextEdit{
                 anchors.fill: rect2
                 font.pixelSize: 20
             }
        }
        
        //第三行
        Button{
            text: "登录"
            font.pixelSize: 20
            Layout.leftMargin: -30
            Layout.topMargin: 50
        }

        Button{
            text: "退出"
            font.pixelSize: 20
            Layout.leftMargin: 140
            Layout.topMargin: 50
        }
    }

首先我们先定义网格布局管理器，设置其两列三行。第一行是用户名，第二行是密码，第三行就放置按钮类。接下里我们向网格中添加控件。这里用到了输入框TextEdit，先不给大家作讲解了，后续控件部分我们再了解它的用法。主要看代码对于最后一行的设置，这两个按钮，需要设置其相对位置距离上面的两行为50，登陆按钮的左边距为-30，退出按钮的左边距为140。具体的位置大家可以根据自己的窗口进行设置，这样，一个相对规整的登陆界面就完成了。

StackLayout

最后，我们要来说一下我们不太熟悉的StackLayout，它提供了一个一次只能显示一个项目堆栈。大家可以参考一下链接：它只包含count 和 currentIndex 两个特有属性，前者用来获取子项目的数量，后者用来设置当前显示项目的索引。放在StackLayout中的子项目默认设置为了Layout.fillWidth和 Layout.fillHeight ，也就是说默认会填充整个布局区域。

StackLayout官方文档

大家可以down一下上面网站中的例程，通过修改currentIndex的值来显示当前的界面颜色，注意,currentIndex是从0开始的。大家也可以仿照例程自己添加几个矩形，来学习StackLayout的切换效果。然后我们在给出的例程中添加鼠标事件。

MouseArea {
            anchors.fill: parent
            onClicked: {
                layout.currentIndex === 1 ?
                            layout.currentIndex = 0
                          : layout.currentIndex = 1
            }
        }

当点击鼠标时，通过对currentIndex的设置就可以实现界面的切换效果了！

总结