QML TextField를 깜박임으로 만듭니다.

Question

버튼을 클릭하면 TextField이 깜박 거리고 싶습니다. 그것은 쉽게 QTimer 함께 할 수있는 : QTimerQML에 내가 애니메이션을 통해 그것을하기로 결정처럼

void MyLineEdit::buttonClickedSlot{ 
for(int i=1;i<15;i+=2){ 
    QTimer::singleShot(100*i, this, SLOT(changeBackgroundColor("QLineEdit{background: red;}"))); 
    QTimer::singleShot(100*(i+1), this, SLOT((changeBackgroundColor("QLineEdit{background: white;}"))); 

} 
} 
void MyLineEdit::changeBackgroundColor(QString str){ 
    this->setStyleSheet(str) 
} 

그러나, 나는 아무것도 찾지 못했습니다.

Rectangle{ 
ColumnLayout{ 
    anchors.fill: parent 
    TextField{ 
     id: txt 
     text: "hello" 
     style: TextFieldStyle{ 
      background:Rectangle { 
       id: rect  
       radius: 2 
       implicitWidth: 100 
       implicitHeight: 24 
       border.color: "#333" 
       border.width: 1 
       color: "white" 
      } 
     } 
    } 
    ColorAnimation{ 
     id: whiteToRed 
     target: rect  //reference error: rect is not defined 
     properties: "color" 
     from: "white" 
     to: "red" 
     duration: 300 

    } 

    ColorAnimation{ 
     id: redToWhite 
     target: rect //reference error: rect is not defined 
     properties: "color" 
     from: "red" 
     to: "white" 
     duration: 300 

    } 


    Button{ 
     text: "blink" 
     onClicked: { 
      for(var i=0;i<3;i++){ 
       whiteToRed.start() 
       redToWhite.start() 
      } 
     } 
    } 

} 
} 

여기서 문제는 컴파일 오류가 있다는 것입니다 : RECT는 정의되지 여기 QML는 코드입니다. 문제를 어떻게 해결해야합니까?

Answer 1

이 시도 :

Column{ 
    anchors.fill: parent 

    TextField{ 
     id: txt 
     text: "hello" 
     property string color: "white" 
     style: TextFieldStyle{ 
      background: Rectangle { 
       id: rect 
       radius: 2 
       implicitWidth: 100 
       implicitHeight: 24 
       border.color: "#333" 
       border.width: 1 
       color: txt.color 
       Behavior on color { 
        SequentialAnimation { 
         loops: 3 
         ColorAnimation { from: "white"; to: "red"; duration: 300 } 
         ColorAnimation { from: "red"; to: "white"; duration: 300 } 
        } 
       } 
      } 
     } 
    } 
    Button{ 
     text: "blink" 
     onClicked: { 
      txt.color = "red"; 
      txt.color = "white"; 
     } 
    } 
}