python3+PyQt5+Qt Designer实现堆叠窗口部件

该博客介绍了如何利用Python3、PyQt5和Qt Designer来实现堆叠窗口部件。文章分为两个部分,第一部分纯代码实现,第二部分通过Qt Designer快速生成界面代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文是对《Python Qt GUI快速编程》的第9章的堆叠窗口例子Vehicle Rental用Python3+PyQt5+Qt Designer进行改写。
第一部分无借用Qt Designer,完全用代码实现。
第二部分则借用Qt Designer,快速实现。


第一部分:

import sys
from PyQt5.QtCore import (Qt)
from PyQt5.QtWidgets import (QApplication, QComboBox, QDialog,
        QDialogButtonBox, QFrame, QGridLayout, QHBoxLayout, QLabel,
        QSpinBox, QStackedWidget, QVBoxLayout, QWidget)

class VehicleRentalDlg(QDialog):

    def __init__(self, parent=None):
        super(VehicleRentalDlg, self).__init__(parent)

        vehicleLabel = QLabel("&Vehicle Type:")
        self.vehicleComboBox = QComboBox()
        vehicleLabel.setBuddy(self.vehicleComboBox)
        self.vehicleComboBox.addItems(["Car", "Van"])
        colorLabel = QLabel("Co&lor:")
        self.colorComboBox = QComboBox()
        colorLabel.setBuddy(self.colorComboBox)
        self.colorComboBox.addItems(["Black", "Blue", "Green", "Red",
                                     "Silver", "White", "Yellow"])
        seatsLabel = QLabel("&Seats:")
        self.seatsSpinBox = QSpinBox()
        seatsLabel.setBuddy(self.seatsSpinBox)
        self.seatsSpinBox.setRange(2, 12)
        self.seatsSpinBox.setValue(4)
        self.seatsSpinBox.setAlignment(Qt.AlignRight|Qt.AlignVCenter)
        weightLabel = QLabel("&Weight:")
        self.weightSpinBox = QSpinBox()
        weightLabel.setBuddy(self.weightSpinBox)
        self.weightSpinBox.setRange(1, 8)
        self.weightSpinBox.setValue(1)
        self.weightSpinBox.setAlignment(Qt.AlignRight|Qt.AlignVCenter)
        self.weightSpinBox.setSuffix(" tons")
        volumeLabel = QLabel("Volu&me")
        self.volumeSpinBox = QSpinBox()
        volumeLabel.setBuddy(self.volumeSpinBox)
        self.volumeSpinBox.setRange(4, 22)
        self.volumeSpinBox.setValue(10)
        self.volumeSpinBox.setAlignment(Qt.AlignRight|Qt.AlignVCenter)
        self.volumeSpinBox.setSuffix(" cu m")
        mileageLabel = QLabel("Max. Mileage")
        self.mileageLabel = QLabel("1000 miles")
        self.mileageLabel.setAlignment(Qt.AlignRight|Qt.AlignVCenter)
        self.mileageLabel.setFrameStyle(QFrame.StyledPanel|QFrame.Sunken)
        self.buttonBox = QDialogButtonBox(QDialogButtonBox.Ok|
                                          QDialogButtonBox.Cancel)

        self.stackedWidget = QStackedWidget()
        carWidget = QWidget()
        carLayout = QGridLayout()
        carLayout.addWidget(colorLabel, 0, 0)
        carLayout.addWidget(self.colorComboBox, 0, 1)
        carLayout.addWidget(seatsLabel, 1, 0)
        carLayout.addWidget(self.seatsSpinBox, 1, 1)
        carWidget.setLayout(carLayout)
        self.stackedWidget.addWidget(carWidget)
        vanWidget = QWidget()
        vanLayout = QGridLayout()
        vanLayout.addWidget(weightLabel, 0, 0)
        vanLayout.addWidget(self.weightSpinBox, 0, 1)
        vanLayout.addWidget(volumeLabel, 1, 0)
        vanLayout.addWidget(self.volumeSpinBox, 1, 
### Ant Design Vue Table 组件实现多选功能 在Ant Design Vue的`<a-table>`组件中,可以通过配置`rowSelection`属性来启用多选功能。此属性允许指定哪些行被默认选中以及监听选择变化事件。 #### 配置 `row-selection` 为了使表格支持多选,需设置`:row-selection="selection"`,并定义相应的选对象`selection`: ```javascript const selection = { selectedRowKeys: [], // 控制哪几选中的键数组 onChange: (selectedRowKeys, selectedRows) => { /* 当用户改变选择时触发 */ }, }; ``` 对于HTML模板部分,则如下所示[^2]: ```html <a-table bordered :columns="columns" :data-source="dataSource" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"> </a-table> <div>已勾选数量: {{ selectedRowKeys.length }}</div> ``` 这里的关键在于维护一个状态变量`selectedRowKeys`用于存储当前已被选中的行对应的唯一标识符(通常是记录ID),并通过`onChange`方法更新这个列表。 #### JavaScript逻辑处理 接下来是在JavaScript代码里完成的选择变更处理器`onSelectChange`函数的具体实现方式: ```javascript import { ref } from 'vue'; export default { setup() { const selectedRowKeys = ref([]); // 定义响应式的选中key集合 function onSelectChange(selectedKeys) { console.log('Selected Row Keys:', selectedKeys); selectedRowKeys.value = selectedKeys; } return { columns, dataSource, selectedRowKeys, onSelectChange, }; } } ``` 上述代码片段展示了如何利用Vue Composition API创建了一个可变的状态`selectedRowKeys`,每当有新的行被选中或取消选定时都会调用`onSelectChange()`来进行同步更新。 需要注意的是,在实际应用当中如果涉及到分页的情况下,要特别小心管理同页面之间的选择状态一致性问题[^3]。因为当切换到其他页后再返回原页时,默认情况下之前做的任何选择都将失效;因此可能还需要额外考虑持久化这些选择信息或者采取措施防止意外丢失重要数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值