在 qml ui 表单中使用行为

Question

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

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

Answer 1

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

这将在 ui.qml 文件中创建一个 property alias。

// 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"
    }
}

步骤：添加行为

//New.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
    }
}

步骤：在您的 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包起来：

//New.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
        }
    }
}

在 qml ui 表单中使用行为

Using behavior in qml ui form

qml

qtquick-designer