因為這次的主題是要玩 Pyside 裡各式各樣的元件, 所以打算按照官網上教學的順序, 一個一個來玩
在官網上, Signal&Slot 之後是 Dialog, 所以我們繼續來使用 Day03 有使用到的 QLineEdit
看到這個文字輸入框就讓人想到聊天室的輸入框, 因此這次想做個小型的邊緣人聊天室。
在腦裡想像個畫面
先建個長方形型視窗, 文字輸入框放在底部, 文字輸入框旁邊放一個按鈕, 上面建個十個 QLabel 專門放輸入的文字, 每按一次按鈕, 就把文字放到最底的 QLabel 裡, 然後清空輸入框裡的內容
構思好之後開始動工吧
先把外觀做出來
import sys
from PySide6 import QtCore
from PySide6.QtWidgets import (QLineEdit, QPushButton, QApplication,
QVBoxLayout, QHBoxLayout, QDialog, QLabel)
class Chat(QDialog):
def __init__(self, parent=None):
super(Chat, self).__init__(parent)
self.edit = QLineEdit("Enter")
self.button = QPushButton("Send")
self.showText = []
for i in range(10):
self.showText.append(QLabel("", alignment=QtCore.Qt.AlignRight))
chatLayout = QVBoxLayout()
for i in range(10):
chatLayout.addWidget(self.showText[i])
inputLayout = QHBoxLayout()
inputLayout.addWidget(self.edit)
inputLayout.addWidget(self.button)
chatLayout.addLayout(inputLayout)
self.setLayout(chatLayout)
if __name__ == '__main__':
app = QApplication(sys.argv)
form = Chat()
form.show()
sys.exit(app.exec())
結果如圖所示
接下來寫個 function 給 enter 按鈕, 讓每次按按鈕時輸入框會把文字放最底端的 QLabel 並清空輸入框
import sys
from PySide6 import QtCore
from PySide6.QtWidgets import (QLineEdit, QPushButton, QApplication,
QVBoxLayout, QHBoxLayout, QDialog, QLabel)
class Chat(QDialog):
def __init__(self, parent=None):
super(Chat, self).__init__(parent)
self.edit = QLineEdit("Enter")
self.button = QPushButton("Send")
self.showText = []
for i in range(10):
self.showText.append(QLabel("", alignment=QtCore.Qt.AlignRight))
chatLayout = QVBoxLayout()
for i in range(10):
chatLayout.addWidget(self.showText[i])
inputLayout = QHBoxLayout()
inputLayout.addWidget(self.edit)
inputLayout.addWidget(self.button)
chatLayout.addLayout(inputLayout)
self.setLayout(chatLayout)
self.button.clicked.connect(self.greetings)
def greetings(self):
self.showText[9].setText(self.edit.text())
self.edit.setText("")
if __name__ == '__main__':
app = QApplication(sys.argv)
form = Chat()
form.show()
sys.exit(app.exec())
半成果展示
接下來就是讓每次送出時, 文字會自動往上一行, 順便加個 if, 避免送出空白
import sys
from PySide6 import QtCore
from PySide6.QtWidgets import (QLineEdit, QPushButton, QApplication,
QVBoxLayout, QHBoxLayout, QDialog, QLabel)
class Chat(QDialog):
def __init__(self, parent=None):
super(Chat, self).__init__(parent)
self.edit = QLineEdit("Enter")
self.button = QPushButton("Send")
self.showText = []
for i in range(10):
self.showText.append(QLabel("", alignment=QtCore.Qt.AlignRight))
chatLayout = QVBoxLayout()
for i in range(10):
chatLayout.addWidget(self.showText[i])
inputLayout = QHBoxLayout()
inputLayout.addWidget(self.edit)
inputLayout.addWidget(self.button)
chatLayout.addLayout(inputLayout)
self.setLayout(chatLayout)
self.button.clicked.connect(self.greetings)
def greetings(self):
if(len(self.edit.text())>0):
for i in range(9):
self.showText[i].setText(self.showText[i+1].text())
self.showText[9].setText(self.edit.text())
self.edit.setText("")
if __name__ == '__main__':
app = QApplication(sys.argv)
form = Chat()
form.show()
sys.exit(app.exec())
成果
ps. 不知道為甚麼 windows 內建的錄影程式在我按 Send 的時候就會自動停止錄影, 氣死!
成果出來了, 但是看起來真的有點可憐, 我們讓畫面上看起來好像有人在回我們好了
實現方法是除了自己輸入的文字, 多加一行文字
import sys
from PySide6 import QtCore
from PySide6.QtWidgets import (QLineEdit, QPushButton, QApplication,
QVBoxLayout, QHBoxLayout, QDialog, QLabel)
class Chat(QDialog):
def __init__(self, parent=None):
super(Chat, self).__init__(parent)
self.edit = QLineEdit("Enter")
self.button = QPushButton("Send")
self.showText = []
for i in range(10):
self.showText.append(QLabel("", alignment=QtCore.Qt.AlignRight))
chatLayout = QVBoxLayout()
for i in range(10):
chatLayout.addWidget(self.showText[i])
inputLayout = QHBoxLayout()
inputLayout.addWidget(self.edit)
inputLayout.addWidget(self.button)
chatLayout.addLayout(inputLayout)
self.setLayout(chatLayout)
self.button.clicked.connect(self.greetings)
def greetings(self):
if(len(self.edit.text())>0):
for i in range(8):
self.showText[i].setText(self.showText[i+2].text())
self.showText[i].setAlignment(self.showText[i+2].alignment())
self.showText[8].setText(self.edit.text())
self.showText[8].setAlignment(QtCore.Qt.AlignRight)
self.showText[9].setText("...")
self.showText[9].setAlignment(QtCore.Qt.AlignLeft)
self.edit.setText("")
if __name__ == '__main__':
app = QApplication(sys.argv)
form = Chat()
form.show()
sys.exit(app.exec())
最終成果!
有人回復訊息的感覺真好!
...
真的...
...
嗚嗚嗚嗚嗚嗚嗚嗚