Qt編程進階（46）：Anchor錨是什么？

前面介紹的Row、Column和Grid等外，QML還提供了一種使用Anchor(錨）來進行元素布局的方法。每個元素都可被認為有一組無形的“錨線”：left、horizontalCenter、right、top、verticalCenter和bottom，如下圖所示。Text元素還有一個baseline錨線（對于沒有文本的元素，它與top相同）。

這些錨線分別對應元素中的anchors.left、anchors.horizontalCenter等屬性，所有的可視元素都可以使用錨來布局。錨系統還允許為一個元素的錨指定邊距（margin)和偏移（offset)。邊距指定了元素錨到外邊界的空間量，而偏移允許使用中心錨線來定位。一個元素可以通過leftMargin、rightMargin、topMargin和bottomMargin來獨立地指定錯邊距，如下圖所示，也可以使用anchor.margins來為所有的4個鋪指定相同的邊距。

錨偏移使用horizontalCenterOffset、verticalCenterOffset和baselineOffset來指定。編程中還經常用anchors.fill將一個元素充滿另一個元素，這等價于使用了4個直接的錨。但要注意，只能在父子或兄弟元素之間使用錨，而且基于錨的布局不能與絕對的位置定義（如直接設置x和y屬性值）混合使用，否則會出現不確定的結果。

使用Anchor布局一組矩形元素，并測試錨的特性，布局運行效果如圖所示。

具體實現步驟如下。

(1) 新建QML應用程序，項目名稱為“Anchor”。

(2) 本文實例需要復用之前己開發的組件。

將前面文章實例中的源文件“Button.qml”、“RedRectangle.qml”、“GreenRectangle.qml”及“BlueRectangle.qml”復制到本項目目錄下。右擊項目視圖“Resources” 一 “qml.qrc”下的“/’節點，選擇“Add Existing Files...”項，彈出“Add Existing Files”對話框，選中上述幾個.qml文件，單擊“打開”按鈕將它們添加到當前項目中。

(3) 打開“main.qml”文件，編寫代碼如下：

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 320
  height: 240
  visible: true
  title: qsTr("Anchor")
  Rectangle {
    id: windowRect
    /*定義屬性別名*/ // (a)
    property alias chgRect1: changingRect1 //矩形changingRect1屬性別名
    property alias chgRect2: changingRect2 //矩形changingRect2屬性別名
    property alias rRect: redRect //紅矩形redRect屬性別名
    width: 360
    height: 360
    anchors.fill: parent
    /* 使用Anchor對三個矩形元素進行橫向布局 */ //(b)
    BlueRectangle { //藍矩形
      id : blueRect
      anchors.left: parent.left //與窗口左錨線錨定
      anchors.top: parent.top //與窗口頂錨線錨定
      anchors.leftMargin: 25 //左錨邊距（與窗口左邊距）
      anchors.topMargin: 25 //頂錨邊距（與窗口頂邊距）
    }
    GreenRectangle { //綠矩形
      id:greenRect
      anchors.left: blueRect.right //綠矩形左錨線與藍矩形的右錨線錨定
      anchors.top: blueRect.top //綠矩形頂錨線與藍矩形的頂錨線錨定
      anchors.leftMargin: 40 //左錨邊距（與藍矩形的間距）
    }
    RedRectangle { //紅矩形
      id:redRect
      anchors.left: greenRect.right //紅矩形左錨線與綠矩形的右錨線錨定
      anchors.top: greenRect.top //紅矩形頂錨線與綠矩形的頂錨線錨定
      anchors.leftMargin: 40 //左錨邊距（與綠矩形的間距）
    }
    /*對比測試Anchor的性質*/ //(c)
    RedRectangle {
      id:changingRect1
      anchors.left: parent.left //矩形 changingRect1 初始與窗體左錨線錨定
      anchors.top: blueRect.bottom
      anchors.leftMargin: 25
      anchors.topMargin: 25
    }
    RedRectangle {
      id:changingRect2
      anchors.left: parent.left //changingRect2與 changingRect1 左對齊
      anchors.top: changingRect1.bottom
      anchors.leftMargin: 25
      anchors.topMargin: 20
    }
    /*復用按鈕*/
    Button {
      width:95
      height:35 //(d)
      anchors.right: redRect.right
      anchors.top: changingRect2.bottom
      anchors.topMargin: 10
    }
  }
}

其中，

(a) /*定義屬性別名*/:這里定義矩形changingRect1、changingRect2及redRect的別名，目的是在按鈕組件的源文件（外部QML文檔）中能訪問這幾個元素，以便測試它們的錨定特性。
(b) /* 使用Anchor對三個矩形元素進行橫向布局 */:這段代碼使用己定義的三個現成矩形元素，通過分別設置anchors.left、anchors.top、anchors.leftMargin、anchors.topMargin等錨屬性，對它們進行從左到右的布局，這與之前介紹的Row的布局作用一樣。讀者還可以修改其他錨屬性以嘗試更多的布局效果。
(c) /*對比測試Anchor的性質*/:錨屬性還可以在程序運行中通過代碼設置來動態地改變，為了對比，本例設計使用兩個相同的紅矩形，初始它們都與窗體左錨線錨定（對齊），然后改變右錨屬性來觀察它們的行為。
(d) width:95; height:35:按鈕組件原定義尺寸為“width: 100; height:62”，復用時可以重新定義它的尺寸屬性以使程序界面更美觀。新屬性值會“覆蓋”原來的屬性值，就像面向對象的“繼承”一樣提高了靈活性。

(4)打開“Button.qml”文件，修改代碼如下：

import QtQuick 2.0
Rectangle { //將Rectangle自定義成按鈕
  id:btn
  width:100;height:62 //按鈕的尺寸
  color: "teal" //按鈕顏色
  border.color: "aqua" //按鈕邊界色
  border.width: 3 //按鈕邊界寬度
  Text { //Text元素作為按鈕文本
    id: label
    anchors.centerIn: parent
    font.pointSize: 16
    text: "開始"
  }
  MouseArea { //MouseArea對象作為按鈕單擊事件響應區
    anchors.fill: parent
    onClicked: {//響應單擊事件代碼
      label.text="按鈕已按下！"
      label.font.pointSize=11 //改變按鈕文本和字號
      btn.color="aqua" //改變按鈕顏色
      btn.border.color="teal" //改變按鈕邊界色
      /* 改變changingRect1的右錨屬性 */ //(a)
      windowRect.chgRect1.anchors.left=undefined;
      windowRect.chgRect1.anchors.right=windowRect.rRect.right;
      /* 改變 changingRect2 的右錨屬性 */ // (b)
      windowRect.chgRect2.anchors.right=windowRect.rRect.right;
      windowRect.chgRect2.anchors.left=undefined;
    }
  }
}

其中，

(a) /* 改變changingRect1的右錨屬性 */:這里用“windowRect.chgRect1.anchors.left=undefined”先解除其左錨屬性的定義,然后再定義右錨屬性，執行后,該矩形便會移動到與redRect（第一行最右邊的紅矩形）右對齊。
(b) /* 改變 changingRect2 的右錨屬性 */:這里先用“windowRect.chgRect2.anchors.right=windowRect.rRect.right”指定右錨屬性，由于此時元素的左描屬性尚未解除，執行后，矩形位置并不會移動，而是寬度自動“拉長”到與redRect右對齊，之后即使再解除左錨屬性也無濟于事，故用戶在編程改變布局時，一定要先將元素的舊錨解除，新設置的錨才能生效！

鼠標點擊按鈕后如下圖所示。

————————————————

覺得有用的話請關注點贊，謝謝您的支持！

對于本系列文章相關示例完整代碼有需要的朋友，可關注并在評論區留言！

.正則表達式

正則表達式——詳情版+常用表達式
Qt中正則表達式(常用)
Qt 正則表達式介紹 QRegExp的使用

2 QRegExp

2.1 indexIn

int indexIn(const QString &str, int offset=0, QRegExp::CaretMode caretMode=CaretAtZero) const

嘗試從位置偏移量(默認為0)在str中查找匹配。如果offset為-1，則從最后一個字符開始搜索;如果-2，在最后一個字符的旁邊;等
返回第一個匹配的位置，如果沒有匹配則返回-1。
caretMode參數可以用來指示^應該在索引0處匹配還是在偏移量處匹配。

    QString regexStr="^[0-9a-zA-Z_]+@[0-9a-zA-Z]+(\\.[a-zA-Z]+)+$";
    QRegExp regExp(regexStr);
    QString str="123@qq.com";

    if(regExp.indexIn(str)>=0)
    {
        qDebug()<<"This is email";
    }

2.2 captureCount()

int QRegExp::captureCount() const

返回正則表達式中包含的捕獲數。

Qt開發必備技術棧學習路線和資料

介紹一下 ExclusiveGroup。

ExclusiveGroup (互斥分組）本身是不可見元素，用于將若干個可選擇元素組合在一起，供用戶選擇其中的一個選項。你可以在 ExclusiveGroup 對象中定義 RadioButton、CheckBox、Action 等元素，此時不需要設置它們的 exclusiveGroup 屬性；也可以定義一個只設置了 id 屬性的 ExclusiveGroup 對象，在別處定義 RadioButton、CheckBox、Action 等元素時通過 id 初始化這些元素的 exclusiveGroup 屬性。current 屬性指向互斥分組中第一個選中的元素。

一、RadioButton

RadioButton用于多選一的場景，使用時需要通過 exclusiveGroup 屬性為其指定一個分組。它也可以和GroupBox結合使用。要使用RadioButton，需要導入Controls模塊，這樣： import QtQuick.Controls 1.2。

text 屬性存儲單選按鈕的文本。
單選按鈕還有一個指示選中與否的小圖標，一般顯示在文本前面。給 style 屬性設置自定義的 RadioButtonStyle 對象，可以定制 RadioButton 的外觀。 checked 屬性指示 RadioButton 是否被選中，也可以設置它來選中或取消選中。
hovered 是只讀屬性，指示鼠標是否懸停在 RadioButton 上。
pressed 屬性在按鈕被按下時為 true；當單選按鈕被按下時，activeFocusOnPress 屬性為 true，按鈕獲得焦點。
如果你點擊了一個單選按鈕，則會觸發clicked()信號。

1.1 RadioButtonStyle

RadioButtonStyle 用來定制一個 RadioButton，要使用它需要引入 QtQuick.Controls.Styles 1.x 模塊。

background 屬性定制背景，indicator 定制選中指示圖標，label 定制單選按鈕的文本，它們的類型都是 Component。
spacing 指定圖標和文本之間的間隔。
control 指向使用 style 的 RadioButton 對象，組件內的對象可以通過 control 訪問 RadioButton 的各種屬性，如 focus、activeFocus、hovered 等。