qml 对多个对象使用相同的矩形组件

Posted 2023-02-16

【中文标题】qml 对多个对象使用相同的矩形组件

【英文标题】：qml use same rectangle component for multiple objects

【发布时间】：2019-11-13 10:25:47

【问题描述】：

我正在尝试通过调用相同的矩形组件并仅更改必填字段并保持其余字段不变来减小 qml 文件的大小。

下面显示的部分正在工作，但想要减小尺寸。

基本上，我不想制作湿气矩形。 我想使用温度矩形并修改说“x”值，内部连接只修改“路径”。如果是的话，那有可能吗？谢谢！！！

Rectangle 
    id: landingScreen
    x: 0
    y: 0
    width: 800
    height: 350
    color: "#E4E4E4"
    visible: true

    property string path: ""
    property string val: ""

    Rectangle 
        id: temperature
        x: 8
        y: 11
        width: 351
        height: 329
        color: "#ffffff"
        radius: 10
        Text
            id: textFieldtemp
            text :qsTr("")
            y:50
            font.family: "Helvetica"
            font.pointSize: 24
            anchors.horizontalCenter: parent.horizontalCenter
        

        Connections
        
            target: myModel

            onSensorValueChanged:

                path = "/root/temp"
                val = value
                if (addr === path)
                
                    textFieldtemp.text = "Temperature " + val + "*C"
                
            
        
    

    Rectangle 
        id: moisture
        x: 369
        y: 13
        width: 209
        height: 157
        color: "#ffffff"
        radius: 10

        Text
            id: textFieldmoist
            text :qsTr("")
            y:50
            font.family: "Helvetica"
            font.pointSize: 24
            anchors.horizontalCenter: parent.horizontalCenter
        

        Connections
        
            target: myModel
            onSensorValueChanged:

                path = "/root/moist"
                val = value
                if (addr === path)
                
                    textFieldmoist.text = "Moisture " + val + "*C"
                
            
        
    

【参考方案1】：

听起来您应该只创建一个新的 QML 文件并为其提供一些您可以从 landingScreen 设置的属性。我把它命名为SensorRectangle.qml

Rectangle 
    id: sensor
    color: "#ffffff"
    radius: 10

    property string address
    property string title
    property string unit

    Text
        id: textField

        property var value

        text: sensor.title + " " + value + " " + sensor.unit
        y:50
        font.family: "Helvetica"
        font.pointSize: 24
        anchors.horizontalCenter: parent.horizontalCenter
    

    Connections
    
        target: myModel
        onSensorValueChanged:
            if (addr === sensor.address)
            
                textField.value = value
            
        
    

然后你的登陆屏幕变成：

Rectangle 
    id: landingScreen
    x: 0
    y: 0
    width: 800
    height: 350
    color: "#E4E4E4"
    visible: true

    property string path: ""
    property string val: ""

    SensorRectangle 
        id: temperature
        x: 8
        y: 11
        width: 351
        height: 329

        title: "Temperature"
        unit: "°C"
        address: "/root/temp"
    

    SensorRectangle 
        id: moisture
        x: 369
        y: 13
        width: 209
        height: 157

        title: "Moisture"
        unit: "°C"
        address: "/root/moist"