Qt編程進(jìn)階（46）：Anchor錨是什么？

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

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

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

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

具體實(shí)現(xiàn)步驟如下。

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

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

將前面文章實(shí)例中的源文件“Button.qml”、“RedRectangle.qml”、“GreenRectangle.qml”及“BlueRectangle.qml”復(fù)制到本項(xiàng)目目錄下。右擊項(xiàng)目視圖“Resources” 一 “qml.qrc”下的“/’節(jié)點(diǎn)，選擇“Add Existing Files...”項(xiàng)，彈出“Add Existing Files”對(duì)話框，選中上述幾個(gè).qml文件，單擊“打開”按鈕將它們添加到當(dāng)前項(xiàng)目中。

(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對(duì)三個(gè)矩形元素進(jìn)行橫向布局 */ //(b)
    BlueRectangle { //藍(lán)矩形
      id : blueRect
      anchors.left: parent.left //與窗口左錨線錨定
      anchors.top: parent.top //與窗口頂錨線錨定
      anchors.leftMargin: 25 //左錨邊距（與窗口左邊距）
      anchors.topMargin: 25 //頂錨邊距（與窗口頂邊距）
    }
    GreenRectangle { //綠矩形
      id:greenRect
      anchors.left: blueRect.right //綠矩形左錨線與藍(lán)矩形的右錨線錨定
      anchors.top: blueRect.top //綠矩形頂錨線與藍(lán)矩形的頂錨線錨定
      anchors.leftMargin: 40 //左錨邊距（與藍(lán)矩形的間距）
    }
    RedRectangle { //紅矩形
      id:redRect
      anchors.left: greenRect.right //紅矩形左錨線與綠矩形的右錨線錨定
      anchors.top: greenRect.top //紅矩形頂錨線與綠矩形的頂錨線錨定
      anchors.leftMargin: 40 //左錨邊距（與綠矩形的間距）
    }
    /*對(duì)比測試Anchor的性質(zhì)*/ //(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 左對(duì)齊
      anchors.top: changingRect1.bottom
      anchors.leftMargin: 25
      anchors.topMargin: 20
    }
    /*復(fù)用按鈕*/
    Button {
      width:95
      height:35 //(d)
      anchors.right: redRect.right
      anchors.top: changingRect2.bottom
      anchors.topMargin: 10
    }
  }
}

其中，

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

(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對(duì)象作為按鈕單擊事件響應(yīng)區(qū)
    anchors.fill: parent
    onClicked: {//響應(yīng)單擊事件代碼
      label.text="按鈕已按下！"
      label.font.pointSize=11 //改變按鈕文本和字號(hào)
      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”先解除其左錨屬性的定義,然后再定義右錨屬性，執(zhí)行后,該矩形便會(huì)移動(dòng)到與redRect（第一行最右邊的紅矩形）右對(duì)齊。
(b) /* 改變 changingRect2 的右錨屬性 */:這里先用“windowRect.chgRect2.anchors.right=windowRect.rRect.right”指定右錨屬性，由于此時(shí)元素的左描屬性尚未解除，執(zhí)行后，矩形位置并不會(huì)移動(dòng)，而是寬度自動(dòng)“拉長”到與redRect右對(duì)齊，之后即使再解除左錨屬性也無濟(jì)于事，故用戶在編程改變布局時(shí)，一定要先將元素的舊錨解除，新設(shè)置的錨才能生效！

鼠標(biāo)點(diǎn)擊按鈕后如下圖所示。

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

覺得有用的話請關(guān)注點(diǎn)贊，謝謝您的支持！

對(duì)于本系列文章相關(guān)示例完整代碼有需要的朋友，可關(guān)注并在評(píng)論區(qū)留言！

.正則表達(dá)式

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

2 QRegExp

2.1 indexIn

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

嘗試從位置偏移量(默認(rèn)為0)在str中查找匹配。如果offset為-1，則從最后一個(gè)字符開始搜索;如果-2，在最后一個(gè)字符的旁邊;等
返回第一個(gè)匹配的位置，如果沒有匹配則返回-1。
caretMode參數(shù)可以用來指示^應(yīng)該在索引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

返回正則表達(dá)式中包含的捕獲數(shù)。

Qt開發(fā)必備技術(shù)棧學(xué)習(xí)路線和資料

介紹一下 ExclusiveGroup。

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

一、RadioButton

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

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

1.1 RadioButtonStyle

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

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