使用PySide6/PyQt6实现全国省市区的级联选择组件

阿巴卡 發表於 2025-9-22 16:00:00

使用PySide6/PyQt6实现全国省市区的级联选择组件

在基于BS或者H5实现全国省市区的级联选择组件，相对比较容易，一般都要有现成的封装，如对于移动端H5或者小程序的Vant4界面库，他们直接安装使用内置的数据即可进行调用。参考对应组件的数据，我们可以使用PySide6/PyQt6实现全国省市区的级联选择组件案例。
<h3>1、Vant4界面库使用的省市区组件数据</h3>
如参考Vant4的Area省市区选择组件：https://vant-ui.github.io/vant/#/zh-CN/area
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250922153109087-585112337.png" alt="image" width="191" height="218" loading="lazy">
 Vant 提供了一份中国省市区数据，你可以安装 @vant/area-data npm 包来引入即可使用，跟踪其使用的代码，可以看到对应的全国省市区的数据集合。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250922153431534-1711475768.png" alt="image" width="434" height="305" loading="lazy">
 
<h3>2、使用PySide6/PyQt6实现全国省市区的级联选择组件案例</h3>
参考对应组件的数据，我们可以使用PySide6/PyQt6实现全国省市区的级联选择组件案例，首先我们根据上面的数据集合，定义一个JSON文件，用于Python组件进行加载的数据源。
我们来构建一个全国86编码下的省份集合，如下所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250922154102471-247992117.png" alt="image" width="291" height="277" loading="lazy">
对应省份下的城市，城市下的分区，分区下的乡镇，都可以如此遍历下去。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250922154357098-287274667.png" alt="image" width="299" height="708" loading="lazy">
 这样就构建一个多级遍历的集合，可以无穷层级下去（如果必要的话）。
我们要加载这个JSON文件，在Python中很简单，使用json.load即可。
<div class="cnblogs_code">
<pre> region_data = {
 "86": {
 "110000": "北京市",
 "120000": "天津市",
 },
 "110000": {
 "110100": "市辖区"
 },
}

# 加载数据
region_file = "china_area_data.json"
data_file_path = path.join(path.dirname(__file__), region_file)

with open(data_file_path, "r", encoding="utf-8") as f:
 region_data = json.load(f)</pre>
</div>
主要的界面逻辑，就是动态生成省市区的标签和下拉组件，并结合事件进行级联的处理操作。
<div class="cnblogs_code">
<pre> layout = QHBoxLayout(self)
 # 动态创建多层级 ComboBox
 for i in range(levels):
 box_layout = QHBoxLayout()
 label = QLabel(self.labels + ":")
 combo = QComboBox()

 box_layout.addWidget(label, 0)
 box_layout.addWidget(combo, 0)
 layout.addLayout(box_layout)
 self.combo_boxes.append(combo)

 # 绑定事件
 combo.currentIndexChanged.connect(
 lambda idx, level=i: self.on_selection_changed(level, idx)
 )</pre>
</div>
上面代码就是构建多级的显示名称和下拉组件，在触发选择的事件后，更新下一级控件（下拉列表）的数据集合即可。
<div class="cnblogs_code">
<pre> def on_selection_changed(self, level, index):
 """当某一层选择变化时，更新下级"""
 if index < 0:
 return
 code = self.combo_boxes.itemData(index)

 # 更新下一层
 if level + 1 < self.levels:
 self.populate_level(level + 1, code)

 # 更新结果
 self.update_result()

 # 发射信号
 self.selectionChanged.emit(self.get_selection())</pre>
</div>
其中的selectionChanged的信号事件，是我们为自定义类定义的一个信号变量。
<div class="cnblogs_code">
<pre>class CascadeSelector(QWidget):
selectionChanged = Signal(list) # 信号，传递选中的 (code, name) 列表</pre>
</div>
通过它的绑定处理，我们就可以在调用代码中获得选择的集合。
<div class="cnblogs_code">
<pre> region_data = {
 "86": {
 "110000": "北京市",
 "120000": "天津市",
 },
 "110000": {
 "110100": "市辖区"
 },
}

# 加载数据
region_file = "china_area_data.json"
data_file_path = path.join(path.dirname(__file__), region_file)

with open(data_file_path, "r", encoding="utf-8") as f:
 region_data = json.load(f)

win = CascadeSelector(region_data, root_code="86", levels=3, labels=["省", "市", "区"])
# 主界面绑定信号
win.selectionChanged.connect(lambda sel: print("主界面收到:", sel))
win.resize(400, 200)
win.show()</pre>
</div>
运行界面效果，如下所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250922155556473-693299773.png" alt="image" width="613" height="277" loading="lazy">
通过初始化自定义组件 CascadeSelector ，我们就可以实现类似省市区等多层级的数据级联选择的处理效果。
<div>CascadeSelector组件的完整代码如下所示。</div>
<div>
<div class="cnblogs_code">
<pre>import sys
import json
from PySide6.QtWidgets import (
QApplication, QWidget, QVBoxLayout, QComboBox, QLabel, QHBoxLayout
)
from PySide6.QtCore import Signal

from os import path
from pathlib import Path

class CascadeSelector(QWidget):
selectionChanged = Signal(list) # 信号，传递选中的 (code, name) 列表

def __init__(self, data, root_code="86", levels=3, labels=None, parent=None):
 """
 :param data: 行政区划映射数据 (dict)
 :param root_code: 起始父节点 (默认 "86" -> 全国)
 :param levels: 层级数量 (如 3 = 省、市、区)
 :param labels: 每层的提示文字 (如 ["省", "市", "区"])
 """
 super().__init__(parent)

 self.data = data
 self.root_code = root_code
 self.levels = levels
 self.labels = labels or
 self.combo_boxes :list = []

 layout = QHBoxLayout(self)
 # 动态创建多层级 ComboBox
 for i in range(levels):
 box_layout = QHBoxLayout()
 label = QLabel(self.labels + ":")
 combo = QComboBox()

 box_layout.addWidget(label, 0)
 box_layout.addWidget(combo, 0)
 layout.addLayout(box_layout)
 self.combo_boxes.append(combo)

 # 绑定事件
 combo.currentIndexChanged.connect(
 lambda idx, level=i: self.on_selection_changed(level, idx)
 )

 layout.addStretch(1)
 # 结果显示
 # self.result_label = QLabel("选择结果：")
 # layout.addWidget(self.result_label)

 # 初始化第一级
 self.populate_level(0, self.root_code)

def populate_level(self, level, parent_code):
 """填充某一层级的 ComboBox"""
 if level >= self.levels:
 return
 combo : QComboBox = self.combo_boxes
 combo.blockSignals(True)
 combo.clear()
 children = self.data.get(parent_code, {})
 for code, name in children.items():
 combo.addItem(name, code)
 combo.blockSignals(False)

 # 自动联动下一层
 if combo.count() > 0:
 self.on_selection_changed(level, 0)

def on_selection_changed(self, level, index):
 """当某一层选择变化时，更新下级"""
 if index < 0:
 return
 code = self.combo_boxes.itemData(index)

 # 更新下一层
 if level + 1 < self.levels:
 self.populate_level(level + 1, code)

 # 更新结果
 self.update_result()

 # 发射信号
 self.selectionChanged.emit(self.get_selection())

def update_result(self):
 names =
 # self.result_label.setText("选择结果：" + " - ".join(names))

def get_selection(self):
 """获取完整的选择结果 (code 和 name)"""
 result = []
 for cb in self.combo_boxes:
 cb:QComboBox
 idx = cb.currentIndex()
 if idx >= 0:
 result.append((cb.itemData(idx), cb.currentText()))
 return result

# -------------------- 测试 --------------------
if __name__ == "__main__":
app = QApplication(sys.argv)

# 模拟数据（和你给的格式一致）
region_data = {
 "86": {
 "110000": "北京市",
 "120000": "天津市",
 },
 "110000": {
 "110100": "市辖区"
 },
 "110100": {
 "110101": "东城区",
 "110102": "西城区",
 "110105": "朝阳区",
 "110106": "丰台区",
 "110107": "石景山区",
 "110108": "海淀区",
 "110109": "门头沟区",
 "110111": "房山区",
 "110112": "通州区",
 "110113": "顺义区",
 "110114": "昌平区",
 "110115": "大兴区",
 "110116": "怀柔区",
 "110117": "平谷区",
 "110118": "密云区",
 "110119": "延庆区"
 },
 "120000": {
 "120100": "市辖区"
 },
 "120100": {
 "120101": "和平区",
 "120102": "河东区",
 "120103": "河西区",
 "120104": "南开区",
 "120105": "河北区",
 "120106": "红桥区",
 "120110": "东丽区",
 "120111": "西青区",
 "120112": "津南区",
 "120113": "北辰区",
 "120114": "武清区",
 "120115": "宝坻区",
 "120116": "滨海新区",
 "120117": "宁河区",
 "120118": "静海区",
 "120119": "蓟州区"
 },
}

# 加载数据
region_file = "china_area_data.json"
data_file_path = path.join(path.dirname(__file__), region_file)

with open(data_file_path, "r", encoding="utf-8") as f:
 region_data = json.load(f)

win = CascadeSelector(region_data, root_code="86", levels=3, labels=["省", "市", "区"])
# 主界面绑定信号
win.selectionChanged.connect(lambda sel: print("主界面收到:", sel))
win.resize(400, 200)
win.show()

sys.exit(app.exec())</pre>
</div>
通过这样，我们把自定义组件作为一个界面元素，可以放在任何需要的地方呈现，实现了数据的封装，并获得事件的信号处理即可。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250922155947195-725507022.png" alt="image" width="380" height="59" loading="lazy">
 
</div>

</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>

专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com </div> 
来源：https://www.cnblogs.com/wuhuacong/p/19105392

頁: [1]

琼殿技术论坛's Archiver

使用PySide6/PyQt6实现全国省市区的级联选择组件