qml - 在 qml ui 表单中使用行为

Question

有没有办法使用项目外部的行为？（QtQuick 设计器不支持行为）。

假设我在 From.ui.qml 中定义了一个矩形，然后 id 为 rec，在文件 Form.qml 中我想在 rec 的 x 属性上分配一个行为，我该怎么做。

Answer 1

1. 步骤：使用要更改的属性公开对象

property alias这将在ui.qml-file中创建一个。

// NewFormular.ui.qml

import QtQuick 2.4

Item {
    width: 400
    height: 400
    property alias rectangle1: rectangle1

    Rectangle {
        id: rectangle1
        x: 77
        y: 69
        width: 200
        height: 200
        color: "#ffffff"
    }
}

2. 步骤：添加行为

//新建.qml

import QtQuick 2.4

NewFormular {
    Behavior on rectangle1.x {
        NumberAnimation { duration: 500 }
    }

    Timer {
        running: true
        interval: 1000
        repeat: true
        onTriggered: rectangle1.x = (rectangle1.x + 500) % 600
    }
}

3. 步骤：在你的实例化它main.qml

//main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: window
    width: 800
    height: 600
    visible: true
    color: 'grey'
    New {
        anchors.fill: parent
    }
}

如果你想再次隐藏它，你可以再次将它包裹Item起来：

//新建.qml v2

import QtQuick 2.4
Item {
    id: root
    NewFormular {
        anchors.fill: parent
        Behavior on rectangle1.x {
            NumberAnimation { duration: 500 }
        }

        Timer {
            running: true
            interval: 1000
            repeat: true
            onTriggered: rectangle1.x = (rectangle1.x + 500) % 600
        }
    }
}