問題在標題上。讓我舉個例子說清楚，假設我有 2 個產品，每個產品都有不同的功能；因此，我需要在 Main qml 檔案中放置不同的專案和元素。到目前為止，我已經嘗試使用Q_PROPERTY和visible功能一起控制元素來檢查引數是否具有所需的值。然而，它會導致一團糟，錨連接等變得完全無法控制，因為設計也發生了微妙的變化（不是關鍵的變化）。
因此，簡而言之，我正在尋找一種采用引數并相應地加載組件的結構。
我還留下了一個我所做的例子：
在一個班級里，
Q_PROPERTY(int productType READ getproductType WRITE setproductType NOTIFY productType Changed);
在 qml 中，我讓用戶選擇他們擁有的產品：
Button {
id: id_typeSelector
text: "Type 1"
anchors.left: parent.left
anchors.top: parent.top
onClicked: {
visible: false
object.setproductType(0)
splash.timeout()
}
}
最后，在 main.qml 我確定要顯示哪個組件：
visible: productType === 0
uj5u.com熱心網友回復：
我認為您需要的是組件的動態加載。一種方法是通過使用加載器。以下是如何根據所選管道材料限制管道尺寸輸入的示例。
- 木管：3"、5" 或 7" 直徑
- 鐵管：任意直徑
- 鋼管：3" - 8" 直徑
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Page {
anchors.fill: parent
ListModel {
id: pipes
ListElement { pipeTypeName: "Wood"; productType: 0 }
ListElement { pipeTypeName: "Iron"; productType: 1 }
ListElement { pipeTypeName: "Steel"; productType: 2 }
}
Frame {
ColumnLayout {
ComboBox {
id: comboBox
model: pipes
textRole: "pipeTypeName"
property int currentProductType: pipes.get(currentIndex).productType ?? -1
}
Loader {
sourceComponent: comboBox.currentProductType === 0 && woodInputComponent
|| comboBox.currentProductType === 1 && ironInputComponent
|| comboBox.currentProductType === 2 && steelInputComponent
|| null
}
}
}
Component {
id: woodInputComponent
RowLayout {
Layout.fillWidth: true
Text { text: qsTr("Wood Pipe Width: ") }
ComboBox { model: [3, 5, 7] }
}
}
Component {
id: ironInputComponent
RowLayout {
Layout.fillWidth: true
TextField { placeholderText: qsTr("Iron Pipe Width") }
}
}
Component {
id: steelInputComponent
RowLayout {
Layout.fillWidth: true
Text { text: qsTr("Steel Pipe Width") }
RangeSlider { from: 3; to: 8 }
}
}
}
您可以在線試用！
在上面的例子中，我使用了如下方式選擇動態加載一個組件，即
Loader {
sourceComponent: comboBox.currentProductType === 0 && woodInputComponent
|| comboBox.currentProductType === 1 && ironInputComponent
|| comboBox.currentProductType === 2 && steelInputComponent
|| null
}
如果您的組件在自己的 QML 中宣告，例如和WoodInput.qml，我們可以考慮將代碼重構為更短的代碼，例如IronInput.qmlSteelInput.qml
Loader {
source: pipeTypeName "Input.qml"
}
下面是一個更擴展的示例，它使用StackView而不是Loader演示在可以設定 PipeType 和 PipeLength 的頁面之間進行切換。根據所選的 PipeType 使用不同的 PipeLength 編輯器：
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Page {
anchors.fill: parent
property int purchaseIndex: -1
property var purchase: purchaseIndex >= 0 ? purchases.get(purchaseIndex) : null
ListModel {
id: purchases
}
StackView {
id: stackView
anchors.fill: parent
initialItem: gallery
}
Component {
id: gallery
Page {
header: Text {
text: qsTr("Gallery (%1 records)").arg(purchases.count)
}
ListView {
anchors.fill: parent
model: purchases
delegate: Frame {
width: ListView.view.width
RowLayout {
width: parent.width
Text {
Layout.fillWidth: true
text: model.index " " pipeType " " pipeLength
}
Button {
text: qsTr("Edit")
onClicked: {
purchaseIndex = model.index;
stackView.push(edit);
}
}
Button {
text: qsTr("Delete")
onClicked: purchases.remove(model.index)
}
}
}
}
footer: Button {
text: qsTr("New")
onClicked: newPurchase()
}
}
}
Component {
id: edit
Page {
header: Text {
text: qsTr("Edit #%1").arg(purchaseIndex)
}
ColumnLayout {
Text {
text: qsTr("PipeType: %1").arg(purchase.pipeType)
}
Text {
text: qsTr("PipeLength: %1").arg(purchase.pipeLength)
}
Button {
text: qsTr("Change Pipe Type")
onClicked: stackView.push(changePipeType)
}
Button {
text: qsTr("Change Pipe Length")
onClicked: {
let pipeType = purchases.get(purchaseIndex).pipeType;
stackView.push(
pipeType === "Wood" && changePipeLengthWood
|| pipeType === "Iron" && changePipeLengthIron
|| pipeType === "Steel" && changePipeLengthSteel
);
}
}
}
footer: Button {
text: qsTr("Done"); onClicked: stackView.pop()
}
}
}
Component {
id: changePipeType
Page {
header: Text {
text: qsTr("Change PipeType #%1").arg(purchaseIndex)
}
footer: Button {
text: qsTr("Done"); onClicked: stackView.pop()
}
ComboBox {
model: ["Wood", "Iron", "Steel"]
onCurrentTextChanged: {
purchases.setProperty(purchaseIndex, "pipeType", currentText)
}
}
}
}
Component {
id: changePipeLengthWood
Page {
header: Text {
text: qsTr("Wood Pipe Length #%1").arg(purchaseIndex)
}
Frame {
width: parent.width
ComboBox {
model: [3, 5, 7]
onCurrentTextChanged: {
try {
let pipeLength = parseInt(currentText);
purchases.setProperty(purchaseIndex, "pipeLength", pipeLength);
} catch (err) {
console.error(err.message);
}
}
}
}
footer: Button {
text: qsTr("Done"); onClicked: stackView.pop()
}
}
}
Component {
id: changePipeLengthIron
Page {
header: Text {
text: qsTr("Steel Pipe Length #%1").arg(purchaseIndex)
}
TextField {
width: parent.width
text: purchases.get(purchaseIndex).pipeLength
onTextChanged: {
purchases.setProperty(purchaseIndex, "pipeLength", parseInt(text));
}
}
footer: Button {
text: qsTr("Done"); onClicked: stackView.pop()
}
}
}
Component {
id: changePipeLengthSteel
Page {
header: Text {
text: qsTr("Steel Pipe Length #%1").arg(purchaseIndex)
}
Slider {
from: 3
to: 8
stepSize: 0.1
value: purchases.get(purchaseIndex).pipeLength
onValueChanged: {
purchases.setProperty(purchaseIndex, "pipeLength", value);
}
}
footer: Button {
text: qsTr("Done"); onClicked: stackView.pop()
}
}
}
function newPurchase() {
let purchase = {
pipeType: "Wood",
pipeLength: 3.0
};
purchases.append(purchase);
purchaseIndex = purchases.count - 1;
stackView.push(edit);
}
}
您可以在線試用此版本！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/512324.html
標籤：qtqml