簡介

Qt的視窗部件按使用者的習慣來處理鍵盤焦點。也就是說，其出發點是使用者的焦點能定向到任何一個視窗，或者視窗中任何一個部件。

焦點獲取方式比較多，例如：滑鼠點選、Tab鍵切換、快捷鍵、滑鼠滾輪等。

習慣性的，我們經常會使用Tab鍵來控制焦點順序，比如：使用者註冊時，個人資訊輸入框焦點的切換、執行按鈕焦點的切換等。

在新增部件之後，預設情況下，Tab鍵也是可以切換焦點的，只不過順序往往和我們預期不一致，所以就需要自行控制了。

|

實現方式

介面說明：

• static void QWidget::setTabOrder(QWidget * first, QWidget * second)

Puts the second widget after the first widget in the focus order.

也就是說，按下Tab鍵後，焦點會從第一個控制元件切換到第二個控制元件。

注意：如果第二個控制元件Tab順序改變，則應該這樣設定一個順序鏈：

//設定a、b、c、d順序
setTabOrder(a, b);  //a->b
setTabOrder(b, c);  //a->b->c
setTabOrder(c, d);  //a->b->c->d

而不是這樣：

//錯誤
setTabOrder(c, d);  // c->d
 

setTabOrder(a, b);  // a->b 和 c->d
setTabOrder(b, c);  // a->b->c, 但不是c->d

示例

效果

原始碼

下面，以三個按鈕和三個輸入框為例，按照部件上的文字順序來設定Tab鍵切換焦點的順序，即：1 -> 2 -> 3 -> 4 -> 5 -> 6。

QPushButton *pButton1 = new QPushButton(this);
QPushButton *pButton2 = new QPushButton(this);
QPushButton *
 
pButton3 = new QPushButton(this);

QLineEdit *pLineEdit1 = new QLineEdit(this);
QLineEdit *pLineEdit2 = new QLineEdit(this);
QLineEdit *pLineEdit3 = new QLineEdit(this);

pButton1->setText("1");
pButton2->setText("3");
pButton3->setText("5");

pLineEdit1->setText("6");
pLineEdit2->setText("4");
pLineEdit3->setText("2");

// 設定焦點切換順序
QWidget::setTabOrder(pButton1, pLineEdit3);
QWidget::setTabOrder(pLineEdit3, pButton2);
QWidget::setTabOrder(pButton2, pLineEdit2);
QWidget::setTabOrder(pLineEdit2, pButton3);
QWidget::setTabOrder(pButton3, pLineEdit1);

QSS

QSS用於設定部件的樣式，以便我們更直觀地觀看效果。

/**********按鈕**********/
QPushButton{
        background: rgb(68, 69, 73);
        border: 1px solid rgb(45, 45, 45);
        color: rgb(230, 230, 230);
        width: 75px;
        height: 25px;
        outline: none;
}
QPushButton:hover, QPushButton:focus{
        border-color: rgb(0, 160, 230);
        background: rgb(85, 85, 85);
}
QPushButton:pressed, QPushButton:checked{
        border-color: rgb(0, 160, 230);
        background: rgb(0, 160, 230);
}

/**********輸入框**********/
QLineEdit {
        border-radius: none;
        height: 25px;
        border: 1px solid rgb(45, 45, 45);
        background: rgb(57, 58, 60);
}
QLineEdit:enabled {
        color: rgb(230, 230, 230);
}
QLineEdit:enabled:hover, QLineEdit:enabled:focus {
        border-color: rgb(0, 160, 230);
        color: rgb(230, 230, 230);
}
QLineEdit:!enabled {
        color: rgb(155, 155, 155);
}

擴充套件

如果我們不需要為所有的部件都設定焦點切換，也就是說，只想為一部分部件設定焦點順序。

那麼，可以新增如下程式碼（注意：上述其它程式碼不作任何變動）：

pButton2->setFocusPolicy(Qt::NoFocus);
pLineEdit2->setFocusPolicy(Qt::NoFocus);

Qt::FocusPolicy的作用是為部件設定焦點策略，而Qt::NoFocus可以將策略設定為無焦點。

就這樣，簡簡單單的一個介面解決了我們的問題。有興趣的小夥伴可以看下focusNextChild。