使用Python編寫自定義Spin Widget控件

一、介紹

Spin Widget控件是一種可以讓用戶在一個特定範圍內選擇數值的控件，它可以用來替代文本輸入框，可以減少用戶輸入錯誤的概率，提高用戶交互的體驗。Python的Qt庫中提供了QSpinBox和QDoubleSpinBox兩個控件實現了基本的Spin Widget功能，但是這兩個控件還是有一定的局限性，因此我們可以進行自定義的Spin Widget控件編寫。

二、自定義Spin Widget控件基本框架

自定義Spin Widget控件的基本框架如下：

from PyQt5.QtWidgets import QWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton, QSizePolicy 

class CustomSpinWidget(QWidget):
    def __init__(self, parent=None):
        super(CustomSpinWidget, self).__init__(parent)
        
        # 添加布局
        self.layout = QHBoxLayout(self)
        
        # 添加子部件
        self.label = QLabel("0", self)
        self.incButton = QPushButton("+", self)
        self.decButton = QPushButton("-", self)
        
        # 按鈕調整大小策略
        self.incButton.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)
        self.decButton.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)
        
        # 綁定槽函數
        self.incButton.clicked.connect(self.increment)
        self.decButton.clicked.connect(self.decrement)
        
        # 添加部件到垂直布局
        self.layout.addWidget(self.decButton)
        self.layout.addWidget(self.label)
        self.layout.addWidget(self.incButton)
        
        # 設置垂直布局保持左右對齊
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.layout.setAlignment(Qt.AlignLeft)
        
        # 初始數值和範圍
        self.value = 0
        self.minValue = 0
        self.maxValue = 100
        self.stepSize = 1

三、部件功能的實現

1、部件的顯示和對齊

CustomSpinWidget是一個水平布局的部件，它包含了一個QLabel控件和兩個QPushButton控件。 水平布局控制了三個子控件的左右排列方式，我們可以在構造函數中添加布局、添加控件並設置按鈕的大小策略。

self.layout = QHBoxLayout(self)
self.label = QLabel("0", self)
self.incButton = QPushButton("+", self)
self.decButton = QPushButton("-", self)
self.incButton.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)
self.decButton.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)
self.layout.addWidget(self.decButton)
self.layout.addWidget(self.label)
self.layout.addWidget(self.incButton)
self.layout.setContentsMargins(0, 0, 0, 0)
self.layout.setAlignment(Qt.AlignLeft)

下面是各位同學自己根據上面的代碼實現的圖片效果

2、數值範圍的限制

我們為CustomSpinWidget定義了value、minValue、maxValue和stepSize四個屬性。

self.value = 0
self.minValue = 0
self.maxValue = 100
self.stepSize = 1

我們需要為CustomSpinWidget加入對數值範圍的限制，使得用戶只能在一個範圍內選擇數值。我們添加以下方法來實現最小值、最大值和步長的限制，其中increment和decrement方法分別用於增加和減少當前數值。

def setMinimum(self, minValue):
    self.minValue = minValue
    if self.value  maxValue:
        self.value - maxValue
    self.label.setText(str(self.value))
    
def setStepSize(self, stepSize):
    self.stepSize = stepSize
    
def increment(self):
    self.value += self.stepSize
    if self.value > self.maxValue:
        self.value = self.maxValue
    self.label.setText(str(self.value))

def decrement(self):
    self.value -= self.stepSize
    if self.value < self.minValue:
        self.value = self.minValue
    self.label.setText(str(self.value))

四、完整代碼示例

下面是完整的代碼示例，可以根據自己的需求進行修改和擴展。

from PyQt5.QtWidgets import QWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton, QSizePolicy 

class CustomSpinWidget(QWidget):
    def __init__(self, parent=None):
        super(CustomSpinWidget, self).__init__(parent)
        
        # 添加布局
        self.layout = QHBoxLayout(self)
        
        # 添加子部件
        self.label = QLabel("0", self)
        self.incButton = QPushButton("+", self)
        self.decButton = QPushButton("-", self)
        
        # 按鈕調整大小策略
        self.incButton.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)
        self.decButton.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)
        
        # 綁定槽函數
        self.incButton.clicked.connect(self.increment)
        self.decButton.clicked.connect(self.decrement)
        
        # 添加部件到垂直布局
        self.layout.addWidget(self.decButton)
        self.layout.addWidget(self.label)
        self.layout.addWidget(self.incButton)
        
        # 設置垂直布局保持左右對齊
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.layout.setAlignment(Qt.AlignLeft)
        
        # 初始數值和範圍
        self.value = 0
        self.minValue = 0
        self.maxValue = 100
        self.stepSize = 1
    
    def setMinimum(self, minValue):
        self.minValue = minValue
        if self.value  maxValue:
            self.value - maxValue
        self.label.setText(str(self.value))
        
    def setStepSize(self, stepSize):
        self.stepSize = stepSize
        
    def increment(self):
        self.value += self.stepSize
        if self.value > self.maxValue:
            self.value = self.maxValue
        self.label.setText(str(self.value))

    def decrement(self):
        self.value -= self.stepSize
        if self.value < self.minValue:
            self.value = self.minValue
        self.label.setText(str(self.value))