当 QML 项目的大小发生变化时，如何保持其右上角的位置？答案

【问题标题】：How to keep the top-right position of QML item when its size is changing?当 QML 项目的大小发生变化时，如何保持其右上角的位置？
【发布时间】：2018-04-20 21:53:29
【问题描述】：

我有一个可以移动（通过拖动）的工具栏。根据上下文，此工具栏的内容会发生变化，其大小也会相应变化。

我的问题是，当大小发生变化时，左上角的位置保持不变，而右边框正在移动（默认和正常行为）。但我希望右上角位置保持不变，而左边框移动。

从屏幕 1 到 2，工具栏变小，显示为蓝色矩形。我希望它像红色矩形一样放置。

我怎样才能做到这一点？没有锚定在屏幕右侧，因为工具栏是可移动的。

【问题讨论】：

如何改变它的宽度？
@GrecKo 与加载器设置了不同的 QML 文件，加载器本身位于 Layout 中，顶部 Item 大小基于 _layout.childrenRect
试试Toolbar.x = (parent.width - toolbar.width - <margin>)

标签： qt qml qt-quick

【解决方案1】：

首先想到的是将工具栏包装在一个项目中，并将工具栏锚定在项目的右上角。

import QtQuick 2.8
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    width: 800
    height: 800
    visible: true

    Slider {
        id: slider
        value: 200
        to: 400
    }

    Item {
        x: 600

        ToolBar {
            id: toolBar
            anchors.top: parent.top
            anchors.right: parent.right

            implicitWidth: slider.value

            MouseArea {
                anchors.fill: parent
                drag.target: toolBar.parent
            }
        }
    }
}

Item 本身不呈现任何内容，并且具有“零”大小，因此 ToolBar 被正确锚定。

编辑：感谢@GrecKo 提出 MouseArea 的想法。 :) 这允许您拖动工具栏。

【讨论】：

【解决方案2】：

一个简单的解决方案是在width发生变化时重新调整item的位置：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 640
    height: 480

    Slider {
        id: slider
        value: 200
        to: 400
    }

    Rectangle {
        id: block
        color: "red"
        width: parseInt(slider.value)
        height:50
        x: 100
        y: 50

        readonly property int previousWidth: width

        onWidthChanged: {
            block.x += previousWidth - width
        }

        MouseArea {
            anchors.fill: parent
            drag.target: block
        }
    }
}

由于onWidthChanged 在previousWidth 属性更改之前被称为，因此您可以根据以前的宽度值和新的宽度值轻松调整x 位置。

（编辑：使用@Mitch Slider 改进了我的示例）

【讨论】：

【解决方案3】：

您可以使用 Behavior 和 PropertyAction 做到这一点。这依赖于您可以在 Behavior 的链接属性实际更改时指定点的功能。然后，您可以在此有效更改之前和之后添加一些逻辑：

import QtQuick 2.8
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    width: 800
    height: 800
    visible: true

    Slider {
        id: slider
        value: 200
        to: 400
    }

    Rectangle {
        id: rect
        width: slider.value
        y: 40
        height: 40
        color: "orange"

        Behavior on width {
            id: behavior
            property real right
            SequentialAnimation {
                ScriptAction { script: behavior.right = rect.x + rect.width } // the width of the rectangle is the old one
                PropertyAction { } // the width of the rectangle changes at this point
                ScriptAction { script: rect.x = behavior.right - rect.width } // the width of the rectangle is the new one
            }
        }

        MouseArea {
            anchors.fill: parent
            drag.target: parent
        }
    }
}

【讨论】：