如何从父组合框动态更新子组合框
How to dynamically update a child combobox from parent combobox
我有一个 QML 应用程序,它有两个组合框,一个是父(国家)组合框,另一个是子(城市)组合框。选择国家时,子组合框应同时包含该国家/地区的城市。
我有一个代码,第一个组合框选择国家,但它没有设置城市组合框的列表模型。重新打开应用程序后设置。
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property alias comboBox: comboBox2
Settings{
property alias country : comboBox2.currentIndex
}
Dialog {
id: dialog
title: "Select Country"
implicitWidth: parent.width
implicitHeight: parent.height/2
Column{
ComboBox {
id: comboBox2
x: 199
y: 176
width: 277
height: 48
currentIndex: 0
flat: false
model: ["USA","Russia","Iran"]
}
}
}
ColumnLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:20
width: parent.width
Button{
anchors.horizontalCenter: parent.horizontalCenter
id:select_country
text:"select country"
onClicked: dialog.open()
}
RowLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:5
width: parent.width
Text {
text:"Select City: "
}
ComboBox {
id: comboBox1
x: 199
y: 176
width: 277
height: 48
model: ListModel {
id: model1
dynamicRoles: true
Component.onCompleted: {
coord_combo()
}
function coord_combo(){
var i = comboBox1.currentIndex
if (comboBox2.currentIndex===0){
comboBox1.model = ["New York","Washington","Houston"]
return comboBox1
}
else if (comboBox2.currentIndex === 1){
comboBox1.model = ["Moscow","Saint Petersburg","Novosibirsk"]
return comboBox1
}
else if (comboBox2.currentIndex === 2){
comboBox1.model = ["Tehran","Tabriz","Shiraz"]
return comboBox1
}
}
}
}
}
}
}
我使用 javascript 函数通过组合框更改 Material QML 主题。但同样的逻辑不适用于更新其他组合框的列表模型。有什么方法可以使用 qml 和 javascript 动态更新子组合框?
您应该在父 ComboBox 中使用 onCurrentIndexChanged
信号,并在触发时更新子 ComboBox。像这样;
onCurrentIndexChanged:
{
if(currentIndex === 0)
comboBox1.model = ["New York", "Washington", "Houston"]
...
}
你可以更进一步,写一个函数来获取当前国家的城市。然后,只要父 ComboBox 的 currentIndex
发生变化,您就可以更新子 ComboBox 的模型。
我有一个 QML 应用程序,它有两个组合框,一个是父(国家)组合框,另一个是子(城市)组合框。选择国家时,子组合框应同时包含该国家/地区的城市。
我有一个代码,第一个组合框选择国家,但它没有设置城市组合框的列表模型。重新打开应用程序后设置。
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property alias comboBox: comboBox2
Settings{
property alias country : comboBox2.currentIndex
}
Dialog {
id: dialog
title: "Select Country"
implicitWidth: parent.width
implicitHeight: parent.height/2
Column{
ComboBox {
id: comboBox2
x: 199
y: 176
width: 277
height: 48
currentIndex: 0
flat: false
model: ["USA","Russia","Iran"]
}
}
}
ColumnLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:20
width: parent.width
Button{
anchors.horizontalCenter: parent.horizontalCenter
id:select_country
text:"select country"
onClicked: dialog.open()
}
RowLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:5
width: parent.width
Text {
text:"Select City: "
}
ComboBox {
id: comboBox1
x: 199
y: 176
width: 277
height: 48
model: ListModel {
id: model1
dynamicRoles: true
Component.onCompleted: {
coord_combo()
}
function coord_combo(){
var i = comboBox1.currentIndex
if (comboBox2.currentIndex===0){
comboBox1.model = ["New York","Washington","Houston"]
return comboBox1
}
else if (comboBox2.currentIndex === 1){
comboBox1.model = ["Moscow","Saint Petersburg","Novosibirsk"]
return comboBox1
}
else if (comboBox2.currentIndex === 2){
comboBox1.model = ["Tehran","Tabriz","Shiraz"]
return comboBox1
}
}
}
}
}
}
}
我使用 javascript 函数通过组合框更改 Material QML 主题。但同样的逻辑不适用于更新其他组合框的列表模型。有什么方法可以使用 qml 和 javascript 动态更新子组合框?
您应该在父 ComboBox 中使用 onCurrentIndexChanged
信号,并在触发时更新子 ComboBox。像这样;
onCurrentIndexChanged:
{
if(currentIndex === 0)
comboBox1.model = ["New York", "Washington", "Houston"]
...
}
你可以更进一步,写一个函数来获取当前国家的城市。然后,只要父 ComboBox 的 currentIndex
发生变化,您就可以更新子 ComboBox 的模型。