MouseArea über eine QML-Zeile (oder Auto-Sizing Bild + Text)

Question

Zusammenfassung: Wie kann ich ein Symbol neben Text, ohne Hardcoding-Dimensionen, und wickeln Sie die beiden in einer MouseArea ... in einem wie funktioniert das in einem GridLayout?

---

Ich habe ein QML-Layout erstellt, das Zeilen von Etiketten über tappable "Schaltflächen" hat. Die Tasten sind ein Symbol zusammen mit dem Text:

Um die Tasten erstelle ich ein verwende, so dass die beiden Elemente zusammen richtig halten (ohne hartcodierte Dimensionen) und verfügt über eine automatische Größe, dass die GridLayout kann verwenden:

GridLayout { 
    columns:2; rowSpacing:30 

    Text { 
    text: audioServer.label 
    Layout.alignment: Qt.AlignLeft 
    } 

    Row { 
    spacing:10; Layout.alignment:Qt.AlignRight 
    Image { width:29; height:30; y:10; source:"qrc:/rescan.png" } 
    Text { text:"Find Another" } 
    } 

    Text { 
    text: "System uptime "+system.uptime 
    Layout.alignment: Qt.AlignLeft 
    } 

    Row { 
    spacing:10; Layout.alignment:Qt.AlignRight 
    Image { width:29; height:30; y:10; source:"qrc:/restart.png" } 
    Text { text: "Restart" } 
    } 
} 

Ich möchte eine MouseArea um jede Schaltfläche setzen. Wenn ich es in einer Reihe gelegt, so ...

Row { 
    Image { width:29; height:30; y:10; source:"qrc:/rescan.png" } 
    Text { text:"Find Another" } 

    MouseArea { 
    anchors.fill: parent 
    onClicked: rescan() 
    } 
} 

... dann bekomme ich den (vernünftigen) Fehler QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function. Und was noch wichtiger ist, die Layout-Pausen (ich glaube, die Zeile Null Breite bekommt, so das Gridlayout hat es die rechte Seite abfließen.)

ich kann den MouseArea außerhalb der GridLayout wie diese bewegt ...

GridLayout { 
    ... 
    Row { 
    id: rescanButton 
    Image { width:29; height:30; y:10; source:"qrc:/rescan.png" } 
    Text { text:"Find Another" } 
    } 
} 
MouseArea { 
    anchors.fill: rescanButton 
    onClicked: rescan() 
} 

... weil man nur auf Geschwister oder Eltern verankern kann.

Aber ich kann nicht die MouseArea innerhalb der GridLayout setzen, denn dann wird es versuchen, es als ein Element zu legen.

Wie bekomme ich eine MouseArea, die die Schaltflächen umschließt?

Es ist akzeptabel für mich, einen anderen Container als zu verwenden, aber ich bevorzuge es, keine Text- oder Containerabmessungen fest zu codieren.

Answer 1

Mit Ihrer Hilfe haben wir denn diese:

GridLayout { 
    ... 
    MouseArea { 
    onClicked: rescan() 
    width: childrenRect.width 
    height: childrenRect.height 
    Row { 
     Image { width:29; height:30; y:10; source:"qrc:/rescan.png" } 
     Text { text:"Find Another" } 
    } 
    } 
}