Python使用Qt5實(shí)現(xiàn)水平導(dǎo)航欄的示例代碼

更新時(shí)間：2023年03月06日 09:46:29 作者：3Blue1Red

本文主要介紹了Python使用Qt5實(shí)現(xiàn)水平導(dǎo)航欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在 Qt5 中可以使用 QWidget 包含兩個(gè)水平布局，通過點(diǎn)擊水平布局里的按鈕，實(shí)現(xiàn)下標(biāo)滑動(dòng)與頁面的切換。

請?zhí)砑訄D片描述

可以按照以下步驟來實(shí)現(xiàn)上面圖片中的功能：

導(dǎo)入必要的 Qt 包：

from PyQt5.QtCore import QPoint, QPropertyAnimation
from PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout, QPushButton, QLabel

創(chuàng)建 ui_init 函數(shù)，接收 self，和外部傳入的列表：

def ui_init(self, datas):

創(chuàng)建一個(gè) list 來保存水平布局里的按鈕：

self.button_list = []

創(chuàng)建兩個(gè)水平布局 QHBoxLayout，一個(gè)放置 QPushButton，一個(gè)放置 QLabel，并設(shè)置水平布局的內(nèi)容邊距以及組件邊距：

container = QHBoxLayout()
container.setSpacing(0)
container.setContentsMargins(10, 0, 10, 0)
container2 = QHBoxLayout()
container2.setContentsMargins(10, 0, 10, 0)

使用 for 循環(huán)來遍歷傳遞進(jìn)來的字符串列表，并且根據(jù)其長度創(chuàng)建 QPushButton，設(shè)置 QPushButton 的顯示樣式，最后將 QPushButton 添加進(jìn) QHBoxLayout，并且保存在 self.button_list 當(dāng)中：

for number, data in enumerate(datas):
    btn = QPushButton(data)
    btn.setStyleSheet(
        "QPushButton { border: none; "
        "height: 25px; }"
    )
    container.addWidget(btn)
    self.button_list.append(btn)

創(chuàng)建一個(gè) QLabel 設(shè)置其大小和顏色，其中 Label 的寬度為測量 QHBoxLayout 的寬度 / QPushButton 的個(gè)數(shù)：

self.label = QLabel()
self.label.setContentsMargins(0, 0, 0, 0)
self.label.setFixedWidth(int(710 / len(self.button_list)))
self.label.setFixedHeight(2)
self.label.setStyleSheet("QLabel { background-color: rgb(10, 96, 255); }")

創(chuàng)建一個(gè)QPropertyAnimation對象，設(shè)置動(dòng)畫的持續(xù)時(shí)間為100毫秒，用于實(shí)現(xiàn)動(dòng)畫效果：

self.animation = QPropertyAnimation(self.label, b'pos')
self.animation.setDuration(100)

將 QLabel 添加進(jìn)水平布局中，并且在其右邊設(shè)置一個(gè)伸縮量確保 QLabel 初始化時(shí)在第一個(gè)按鈕下方：

container2.addWidget(self.label)
# 設(shè)置伸縮量使label處于左邊
container2.addStretch(1)
self.addLayout(container)
self.addLayout(container2)

使用 for 循環(huán)遍歷 self.button_list，讓列表中的 QPushButton 連接槽函數(shù)：

for btn in self.button_list:
    btn.clicked.connect(lambda state, b=btn: self.buttonClicked(b))

創(chuàng)建一個(gè)槽函數(shù)：

def buttonClicked(self, button):

在槽函數(shù)中，獲取按鈕和標(biāo)簽的當(dāng)前位置：

pos = button.pos()
current_pos = self.label.pos()

設(shè)置動(dòng)畫的起始值和結(jié)束值：

start_value = QPoint(current_pos.x(), current_pos.y())
end_value = QPoint(pos.x(), pos.y() + button.height())
self.animation.setStartValue(start_value)
self.animation.setEndValue(end_value)

啟用動(dòng)畫：

self.animation.start()

以下為完整代碼示例：

from PyQt5.QtCore import QPoint, QPropertyAnimation
from PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout, QPushButton, QLabel, QApplication


class TopTitle(QVBoxLayout):
    def __init__(self, datas):
        super().__init__()
        self.ui_init(datas)

    def ui_init(self, datas):
        self.button_list = []

        container = QHBoxLayout()
        container.setSpacing(0)
        container.setContentsMargins(10, 0, 10, 0)
        container2 = QHBoxLayout()
        container2.setContentsMargins(10, 0, 10, 0)

        for number, data in enumerate(datas):
            # 此時(shí)num是元素的序號，data為元素
            # 水平布局包含多個(gè)垂直布局
            btn = QPushButton(data)
            btn.setStyleSheet(
                "QPushButton { border: none; "
                "height: 25px; }"
            )
            container.addWidget(btn)
            self.button_list.append(btn)

        self.label = QLabel()
        self.label.setContentsMargins(0, 0, 0, 0)
        self.label.setFixedWidth(int(710 / len(self.button_list))) # 710為手動(dòng)測量QHBoxLayout的寬度
        self.label.setFixedHeight(2)
        self.label.setStyleSheet("QLabel { background-color: rgb(10, 96, 255); }")

        # 創(chuàng)建一個(gè)QPropertyAnimation對象，用于實(shí)現(xiàn)動(dòng)畫效果
        self.animation = QPropertyAnimation(self.label, b'pos')
        self.animation.setDuration(100)  # 設(shè)置動(dòng)畫的持續(xù)時(shí)間為100毫秒

        container2.addWidget(self.label)
        # 設(shè)置伸縮量使label處于左邊
        container2.addStretch(1)
        self.addLayout(container)
        self.addLayout(container2)

        for btn in self.button_list:
            btn.clicked.connect(lambda state, b=btn: self.buttonClicked(b))
            # 這里，我們?yōu)?lambda 表達(dá)式添加了額外的參數(shù) state，以兼容 QPushButton.clicked 信號的多重重載。
            # 同時(shí)，使用默認(rèn)參數(shù) b=btn 來確保 button 參數(shù)在 lambda 表達(dá)式中被正確地傳遞。

    def buttonClicked(self, button):
        # 獲取按鈕的位置
        pos = button.pos()

        # 獲取標(biāo)簽的當(dāng)前位置
        current_pos = self.label.pos()

        # 設(shè)置動(dòng)畫的起始值和結(jié)束值
        start_value = QPoint(current_pos.x(), current_pos.y())
        end_value = QPoint(pos.x(), pos.y() + button.height())

        # 設(shè)置動(dòng)畫的起始值和結(jié)束值
        self.animation.setStartValue(start_value)
        self.animation.setEndValue(end_value)

        # 啟動(dòng)動(dòng)畫
        self.animation.start()

if __name__ == '__main__':
    app = QApplication([])
    
    title = TopTitle(["7", "8", "9", "+", "7", "8", "9", "+"])
    
    w = QWidget()
    w.resize(710, 200)

	w.setLayout(title)
    w.show()
    
    app.exec_()

最后要實(shí)現(xiàn)頁面切換的方法，就是在按鍵的槽函數(shù)中，設(shè)置 StackedLayout 的 index 就可以實(shí)現(xiàn)了，當(dāng)然也可以在創(chuàng)建對象后，在其他 QWidget 中獲取 TopTitle.button_list 中的 QPushButton，來自定義按鈕的鏈接。這樣一個(gè)自適應(yīng)標(biāo)簽欄數(shù)量的水平導(dǎo)航欄就實(shí)現(xiàn)了。

到此這篇關(guān)于Python使用Qt5實(shí)現(xiàn)水平導(dǎo)航欄的示例代碼的文章就介紹到這了,更多相關(guān)Qt5 水平導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: