QML结合Repeater：如何基于JSON引脚属性实现条件组件渲染？

问题背景 #

现有JSON数据 #

{
   "ccu3":[
      {
         "PinName":"J1-13",
         "PinDirection":"Input",
         "PinType":"digital",
         "System Function":"Park Lights"
      },
      {
         "PinName":"J1-104",
         "PinDirection":"Input",
         "PinType":"analogue",
         "System Function":"Hydraulic Temp"
      },
      {
         "PinName": "J2-45" , 
         "PinDirection":"Input", 
         "PinType":"tristate", 
         "System Function" : "Auto Greaser Pressure Sw"
     }
   ]
}

当前QML代码（属性提取） #

Text
{
    text: jsonLoader.jsonObject["ccu3"][index]["PinDirection"]
    color: "white"
    font.pointSize: 10
}

Text
{
    text: jsonLoader.jsonObject["ccu3"][index]["PinType"]
    color: "white"
    font.pointSize: 10
}

需求说明 #

当PinDirection为output且PinType为digital时，显示PinName及Switch组件；若PinDirection为output且PinType为analogue时，显示PinName及Slider组件。当前使用Repeater调用组件展示，有C语言开发背景，刚接触QML，仅了解if else语句，需实现该条件逻辑。

实现方法 #

结合你的C语言背景，下面是几种符合if-else逻辑思路的QML实现方案：

方法1：用Loader动态加载组件 #

Loader可以根据条件动态切换加载的组件，适合需要不同组件类型的场景：

Repeater {
    model: jsonLoader.jsonObject["ccu3"]
    delegate: Column {
        // 显示PinName（仅符合output条件时显示）
        Text {
            text: modelData.PinName
            color: "white"
            font.pointSize: 10
            visible: modelData.PinDirection === "output"
        }

        // 动态加载对应组件
        Loader {
            sourceComponent: {
                if (modelData.PinDirection === "output" && modelData.PinType === "digital") {
                    return switchComp;
                } else if (modelData.PinDirection === "output" && modelData.PinType === "analogue") {
                    return sliderComp;
                } else {
                    return null; // 不符合条件时不加载任何组件
                }
            }
        }

        // 预定义Switch组件
        Component {
            id: switchComp
            Switch {
                // 可根据需求绑定属性，比如checked状态
            }
        }

        // 预定义Slider组件
        Component {
            id: sliderComp
            Slider {
                // 可根据需求绑定属性，比如value值
            }
        }
    }
}

方法2：用visible属性控制显示/隐藏 #

这种方式和C语言的if逻辑最贴近，直接通过条件控制组件的可见性：

Repeater {
    model: jsonLoader.jsonObject["ccu3"]
    delegate: Column {
        // PinName仅在符合output条件时显示
        Text {
            text: modelData.PinName
            color: "white"
            font.pointSize: 10
            visible: modelData.PinDirection === "output" && 
                     (modelData.PinType === "digital" || modelData.PinType === "analogue")
        }

        // Digital Output对应Switch
        Switch {
            visible: modelData.PinDirection === "output" && modelData.PinType === "digital"
            // 绑定业务属性
        }

        // Analogue Output对应Slider
        Slider {
            visible: modelData.PinDirection === "output" && modelData.PinType === "analogue"
            // 绑定业务属性
        }
    }
}

方法3：用QML的Switch语句（类似C的switch-case） #

如果后续条件增多，用Switch语句会让逻辑更清晰：

Repeater {
    model: jsonLoader.jsonObject["ccu3"]
    delegate: Column {
        Text {
            text: modelData.PinName
            color: "white"
            font.pointSize: 10
            visible: modelData.PinDirection === "output"
        }

        Switch {
            // 组合条件作为判断key
            property string conditionKey: modelData.PinDirection + "_" + modelData.PinType
            
            case "output_digital":
                Switch { /* 组件内容 */ }
            case "output_analogue":
                Slider { /* 组件内容 */ }
            default:
                // 不符合条件时不渲染任何组件
        }
    }
}

注意事项 #

• QML中字符串比较需用===（严格相等），逻辑和C的==一致，但更严谨
• Repeater的modelData可直接访问当前项的属性，比通过index访问更简洁
• 若需扩展其他条件，直接在判断逻辑中补充即可

内容的提问来源于stack exchange，提问作者Clive N