将 qml 项目移出窗口左侧

Posted 2023-02-16

【中文标题】将 qml 项目移出窗口左侧

【英文标题】：Moving qml Item out of left side of window

【发布时间】：2017-05-31 10:32:13

【问题描述】：

我想将一个 qml 项移出应用程序窗口的左侧。 虽然通过定义这样的状态，此任务在窗口右侧完美运行

states: State 
    name: "hidden"
    when: is_hidden == true

    AnchorChanges 
        target: right_item_to_move
        anchors.right: undefined
    

    PropertyChanges 
        target: right_item_to_move
        x: main_window.width
    

并定义了适当的转换，我无法让它在主窗口的左侧工作，因为不允许负 x 坐标。 IE。这不起作用：

states: State 
    name: "hidden"
    when: is_hidden == true

    AnchorChanges 
        target: left_item_to_move
        anchors.left: undefined
    

    PropertyChanges 
        target: left_item_to_move
        x: -left_item_to_move.width
    

我怎样才能完成这项任务？我正在使用 Qt 5.8 和 QtQuick 2.0。

【问题讨论】：

允许负 x 坐标。请将您的示例设为MCVE，以便我们调查您的问题。

你是对的。我想我误读了文档中的某些内容，并且在实现中出现了问题。无论如何，它现在可以工作了，所以谢谢你指出我正确的方向。

【参考方案1】：

在我看来，一个人应该努力坚持一种定位方式，所以你应该使用anchors或x/y-coordinates。

Here您可以找到如何做出正确选择的概述。

简而言之：如有疑问，请使用锚点。当定位仅相对于父级（静态）时，使用x 和y，如果不可能，即使不相对于父级也这样做。

因为你选择了anchors，在我看来你应该坚持这一点——意思是：改变锚定，这样右锚线将锚定在窗口的左边，而不是对象的左锚线。

看起来像这样：

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow 
    id: myWindow
    visible: true
    width: 600
    height: 600
    color: 'white'

    Rectangle 
        anchors.centerIn: parent
        width: 300
        height: 600
        color: 'green'
        Button 
            id: but
            anchors 
                verticalCenter: parent.verticalCenter
                left: parent.left
            
            onClicked: 
                state = (state === 'left' ? '' : 'left')
            

            states: [
                State 
                    name: 'left'
                    AnchorChanges 
                        target: but
                        anchors.left: undefined
                        anchors.right: parent.left
                    
                

            ]

            transitions: [
                Transition 
                    AnchorAnimation 
                        duration: 200
                    
                
            ]
        
    

一个例子，如果你选择修改x值，它可能看起来像这样：

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow 
    id: myWindow
    visible: true
    width: 600
    height: 600
    color: 'white'

    Rectangle 
        anchors.centerIn: parent
        width: 300
        height: 600
        color: 'green'
        Button 
            id: but
            property bool shown: true
            anchors 
                verticalCenter: parent.verticalCenter
            
            onClicked: 
                shown = !shown
            

            x: (shown  ? 0 : -width)

            Behavior on x 
                XAnimator 
                    duration: 200
                
            
        
    

【讨论】：

是的，我懒得删除/更改它。现在做了。我什至可以省略 bool 并直接更改 x...或者我可以使用状态的 PropertyChange 更改 x...许多可能性:-)