英文:
clickable rectangles with different name property
问题
我正在尝试创建三个具有不同id和名称的不同矩形，以便我可以在后端使用它们，这是我的代码：
Window {
width: 800
height: 300
visible: true
ColumnLayout {
spacing: 10
Text {
text: "Eclairage"
}
RowLayout {
spacing: 10
Repeater {
model: rectangleModel
Rectangle {
id: rectangle
width: 100
height: 100
color: model.rectangleColor
Button {
anchors.centerIn: parent
text: model.buttonText
onClicked: {
console.log(rectangle.name)
// 在此处添加处理按钮点击的代码
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log(rectangle.name)
// 在此处添加处理矩形点击的代码
}
}
}
}
}
}
ListModel {
id: rectangleModel
ListElement {
id: 1
name: "principale"
buttonText: "Button 1"
rectangleColor: "lightblue"
}
ListElement {
id: 2
name: "heartbutton"
buttonText: "Button 2"
rectangleColor: "lightgreen"
}
ListElement {
id: 3
name: "lightbutton"
buttonText: "Button 3"
rectangleColor: "lightyellow"
}
}
}
请注意，我在每个矩形和按钮中都添加了MouseArea来处理点击事件，并在其中输出了矩形的名称。这将允许你在点击矩形或按钮时看到相应的名称。在按钮的onClicked事件中，你可以添加处理按钮点击的代码，而在矩形的MouseArea中，你可以添加处理矩形点击的代码。
英文:
I am trying to do 3 different rectangles with different id and name so i could use them in backend , this my code :
Window {
width: 800
height: 300
visible: true
ColumnLayout {
spacing: 10
Text {
text: "Eclairage"
}
RowLayout {
spacing: 10
Repeater {
model: rectangleModel
Rectangle {
id:rectangle
width: 100
height: 100
color: model.rectangleColor
Button {
anchors.centerIn: parent
text: model.buttonText
}
mouseArea:{
onClicked:console.log(rectangle.name)
}
}
}
}
ListModel {
id: rectangleModel
ListElement {
id:1
name:"principale"
buttonText: "Button 1"
rectangleColor: "lightblue"
}
ListElement {
id:2
name:"heartbutton"
buttonText: "Button 2"
rectangleColor: "lightgreen"
}
ListElement {
id:3
name:"lightbutton"
buttonText: "Button 3"
rectangleColor: "lightyellow"
}
}
}
-
i want to see rectangle name when i do clicked on a rectangle but it showed me an error name is not defined
-
im also trying to do like when i do click on the button , the rectangle is clicked too and that it's not worked without each rectangle id , like :
mouseArea{
if(buttonid == isClicked)
onClicked: console.log(rectanleid.name)
}
答案1
得分: 0
以下是翻译好的部分：
"当您单击按钮时，您想要看到ListElement对象的名称，这里是代码部分。"
Window {
width: 800
height: 300
visible: true
Column {
spacing: 10
Text {
text: "Eclairage"
}
Row {
spacing: 10
Repeater {
model: rectangleModel
Rectangle {
id: rectangle
width: 100
height: 100
color: model.rectangleColor
Button {
anchors.centerIn: parent
text: model.buttonText
onClicked: {
console.log(model.name)
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log(model.name)
}
}
}
}
}
}
ListModel {
id: rectangleModel
ListElement {
name: "principale"
buttonText: "Button 1"
rectangleColor: "lightblue"
}
ListElement {
name: "heartbutton"
buttonText: "Button 2"
rectangleColor: "lightgreen"
}
ListElement {
name: "lightbutton"
buttonText: "Button 3"
rectangleColor: "lightyellow"
}
}
}
英文:
So you want to see the name of the ListElement object when you click on a button and here you go.
Window {
width: 800
height: 300
visible: true
Column {
spacing: 10
Text {
text: "Eclairage"
}
Row {
spacing: 10
Repeater {
model: rectangleModel
Rectangle {
id:rectangle
width: 100
height: 100
color: model.rectangleColor
Button {
anchors.centerIn: parent
text: model.buttonText
onClicked: {
console.log(model.name)
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log(model.name)
}
}
}
}
}
ListModel {
id: rectangleModel
ListElement {
//id:1
name:"principale"
buttonText: "Button 1"
rectangleColor: "lightblue"
}
ListElement {
//id:2
name:"heartbutton"
buttonText: "Button 2"
rectangleColor: "lightgreen"
}
ListElement {
// id:3
name:"lightbutton"
buttonText: "Button 3"
rectangleColor: "lightyellow"
}
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论