iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0

這次的 RadioButton 我們以 Google 表單裡的選擇題來當參考
首先要有表單名稱, 這個當作應用程式的名稱即可
接下來是問題名稱, 這個打算用 QLabel 達成
然後是三個 QRadioButton, 分別命名選項一, 選項二, 選項三
最後是一個 QRadioButton 名為其他, 但是後方連接一個文字輸入框 QLineEdit

在腦中想好要做出如何的程式後, 我們先開始來動工外觀吧!

import sys
from PySide6.QtWidgets import *
from PySide6.QtGui import *
from PySide6.QtCore import *

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        layout = QGridLayout()
        self.setLayout(layout)
        label = QLabel("未命名的問題")
        label.setFixedHeight(20)
        layout.addWidget(label, 0, 0)
        tb = QRadioButton()
        tb.setText("選項 1")
        layout.addWidget(tb, 1, 0)
        tb = QRadioButton()
        tb.setText("選項 2")
        layout.addWidget(tb, 2, 0)
        tb = QRadioButton()
        tb.setText("選項 3")
        layout.addWidget(tb, 3, 0)
        tb = QRadioButton()
        tb.setText("其他: ")
        layout.addWidget(tb, 4, 0)
        edit = QLineEdit()
        layout.addWidget(edit, 4, 1)
        btn = QPushButton("提交")
        layout.addWidget(btn, 5, 0)

if __name__ == "__main__":
    app = QApplication([])
    QApplication.setApplicationName("問卷")
    QApplication.setWindowIcon(QIcon("icon\clipboard-list.png"))
    widget = MyWidget()
    widget.resize(300, 300)
    widget.show()

    sys.exit(app.exec())

來看看目前的長相
https://ithelp.ithome.com.tw/upload/images/20220922/20151144BG4x4KU3fo.png

有點特別的是, 如果我不加上 label.setFixedHeight(20) 的話, 畫面會變成這樣
https://ithelp.ithome.com.tw/upload/images/20220922/20151144a5VdjKZgAE.png

接下來我們由上往下一個一個把功能加上
我們先把其他這個選項先略過, 先從選項一二三開始, 這次希望達成的功能是, 再按下"提交"按鈕時, 按鈕右方能顯示選項裡內容

因為所有選項在按下"提交"按鈕後都會做同樣的動作, 所以在這裡我們用 QButtonGroup 把畫面上的 RadioButton 變成一個組, 這樣比較好一次處理

import sys
from PySide6.QtWidgets import *
from PySide6.QtGui import *
from PySide6.QtCore import *

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        layout = QGridLayout()
        self.setLayout(layout)
        self.btnGroup = QButtonGroup(self)
        label = QLabel("未命名的問題")
        label.setFixedHeight(20)
        layout.addWidget(label, 0, 0)
        tb = QRadioButton()
        tb.setText("選項 1")
        layout.addWidget(tb, 1, 0)
        self.btnGroup.addButton(tb, 0)
        tb = QRadioButton()
        tb.setText("選項 2")
        layout.addWidget(tb, 2, 0)
        self.btnGroup.addButton(tb, 1)
        tb = QRadioButton()
        tb.setText("選項 3")
        layout.addWidget(tb, 3, 0)
        self.btnGroup.addButton(tb, 2)
        tb = QRadioButton()
        tb.setText("其他: ")
        layout.addWidget(tb, 4, 0)
        self.btnGroup.addButton(tb, 3)
        edit = QLineEdit()
        layout.addWidget(edit, 4, 1)
        btn = QPushButton("提交")
        btn.clicked.connect(self.showOption)
        layout.addWidget(btn, 5, 0)
        self.outputLabel = QLabel("")
        layout.addWidget(self.outputLabel, 5, 1)

    def showOption(self):
        for i in range(4):
            if self.btnGroup.button(i).isChecked():
                if i < 3:
                    self.outputLabel.setText(self.btnGroup.button(i).text())
                else:
                    self.outputLabel.setText("其他")

if __name__ == "__main__":
    app = QApplication([])
    QApplication.setApplicationName("問卷")
    QApplication.setWindowIcon(QIcon("icon\clipboard-list.png"))
    widget = MyWidget()
    widget.resize(300, 300)
    widget.show()

    sys.exit(app.exec())

途中展示
radio
接下來就是選其他時, 其他後方文字輸入框的文字會顯示到"提交按鈕後方"

import sys
from PySide6.QtWidgets import *
from PySide6.QtGui import *
from PySide6.QtCore import *

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        layout = QGridLayout()
        self.setLayout(layout)
        self.btnGroup = QButtonGroup(self)
        label = QLabel("未命名的問題")
        label.setFixedHeight(20)
        layout.addWidget(label, 0, 0)
        tb = QRadioButton()
        tb.setText("選項 1")
        layout.addWidget(tb, 1, 0)
        self.btnGroup.addButton(tb, 0)
        tb = QRadioButton()
        tb.setText("選項 2")
        layout.addWidget(tb, 2, 0)
        self.btnGroup.addButton(tb, 1)
        tb = QRadioButton()
        tb.setText("選項 3")
        layout.addWidget(tb, 3, 0)
        self.btnGroup.addButton(tb, 2)
        tb = QRadioButton()
        tb.setText("其他: ")
        layout.addWidget(tb, 4, 0)
        self.btnGroup.addButton(tb, 3)
        self.edit = QLineEdit()
        layout.addWidget(self.edit, 4, 1)
        btn = QPushButton("提交")
        btn.clicked.connect(self.showOption)
        layout.addWidget(btn, 5, 0)
        self.outputLabel = QLabel("")
        layout.addWidget(self.outputLabel, 5, 1)

    def showOption(self):
        for i in range(4):
            if self.btnGroup.button(i).isChecked():
                if i < 3:
                    self.outputLabel.setText(self.btnGroup.button(i).text())
                else:
                    self.outputLabel.setText(self.edit.text())

if __name__ == "__main__":
    app = QApplication([])
    QApplication.setApplicationName("問卷")
    QApplication.setWindowIcon(QIcon("icon\clipboard-list.png"))
    widget = MyWidget()
    widget.resize(300, 300)
    widget.show()

    sys.exit(app.exec())

展示
other
基本功能都有了, 明天我們來試試下一個功能吧~


上一篇
【Day19】QToolButton 收尾 + QRadioButton
下一篇
【Day21】QRadioButton - 線性刻度
系列文
[Python QT] 玩玩 Pyside 的各種功能31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言