iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0

因為這次的主題是要玩 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())

結果如圖所示
https://ithelp.ithome.com.tw/upload/images/20220906/20151144Gg829vFH59.png

接下來寫個 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())

半成果展示
AAAAAA

接下來就是讓每次送出時, 文字會自動往上一行, 順便加個 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())

成果
1111111

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())

最終成果!
...

有人回復訊息的感覺真好!
...
真的...
...
嗚嗚嗚嗚嗚嗚嗚嗚


上一篇
【Day03】Signal & Slot 續
下一篇
【Day05】QLabel in QPushButton
系列文
[Python QT] 玩玩 Pyside 的各種功能31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言