QML之Row水平定位器

Row爲QML中一個水平自動佈局定位器,需要設置的屬性不多。下面詳細說明。

Rectangle{
        anchors.fill: parent
        color: "black"

        Row{ //水平佈局子對象
            y:10
            spacing: 20  //相鄰項的間隔
            anchors.centerIn: parent
            Rectangle{
                id:rec_1
                height: 100
                width: 100
                radius: 5
                color: "red"
            }
            Rectangle{
                id:rec_2
                height: 100
                width: 100
                radius: 5
                color: "blue"
            }
            Rectangle{
                id:rec_3
                height: 100
                width: 100
                radius: 5
                color: "yellow"
            }
             move: Transition {   //移除過度
                       NumberAnimation {
                           properties:"x";
                           duration: 1000
                       }
                   }
             //例子中當第二個的visible爲false時,執行動畫第三個矩形往左移動到第二個矩形的位置
             //反之,當第二個由不可見變可見的時候,第三個往右移動回來原來的位置

             add:Transition { //增加子對象的時候執行的動畫
                 NumberAnimation {
                     properties:"x";
                     duration: 1000
                 } //剛開始進入時慢慢從左往右滑,而不是一進入就顯示

             }

             //layoutDirection: Qt.LeftToRight //本人qt版本沒有這個屬性,這個屬性表示子項從左往右佈局
             //layoutDirection: Qt.RightToLeft //從右往左佈局
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {rec_2.visible = !rec_2.visible}
        }
    }



發佈了30 篇原創文章 · 獲贊 29 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章