QML自定义布局

Question

我使用QML显示背景图像，并且此图像需要用图标叠加。每个这些项目都附有一个MouseArea，因此图标实际上用作按钮。

现在，图标需要缩放并随背景图像一起移动。它们的布局行为需要使图标看起来好像是背景图像的一部分（我没有将图标包含在背景图像中，因为图标是“活动的”并且与MouseArea相关联）。

我得到的行为是图标可以很好地与背景图像（当图像被调整大小时，图标会相应地重新调整比例）很好地进行比例调整。现在不幸的是，图标的位置x/y不正确，我不管理找到x/y的公式，以便将图标与背景调整大小一起移动，并让图标成为背景图像的一部分。

这里是我当前的代码：

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Controls.Material 2.0 
import QtQuick.Layouts 1.3 

Rectangle 
{ 
    color: palette.grey 

    // Manual move background and buttons. 
    Image 
    { 
     id: robotBody 
     fillMode: Image.PreserveAspectFit 
     anchors.top: parent.top 
     anchors.topMargin: 10 
     anchors.horizontalCenter: parent.horizontalCenter 
     width: parent.width 
     height: parent.height * 0.8 
     source: "../UI/Pictures/ManualMove_body.png" 
     smooth: true 

     // Buttons. 
     Image 
     { 
      id: xFrontButton 
      fillMode: Image.PreserveAspectFit 
      source: "../UI/Icons/ManualMove_XFront.png" 
      smooth: true 
      x: 0.8 * parent.paintedWidth 
      y: 0.8 * parent.paintedHeight 
      transformOrigin: Item.TopLeft 
      width: implicitWidth * robotBody.paintedWidth/robotBody.implicitWidth 
      // NOTE: no need to specify the height because of the preserve aspect ratio fill mode. 

      MouseArea 
      { 
       id: xFrontMouseArea 
       anchors.fill: parent 
       hoverEnabled: true 
       onPressed: { uiController.onXFrontMouseAreaPressed() } 
       onReleased: { uiController.onXFrontMouseAreaReleased() } 
      } 
     } 
    } 

} 

什么错误的任何想法？

谢谢，

安托万。

Answer 1

不要忘记这一刻：

  x: (parent.width - parent.paintedWidth)/2 + 0.8 * parent.paintedWidth 
      y: (parent.height - parent.paintedHeight)/2 + 0.8 * parent.paintedHeight 

即来自俄罗斯

import QtQuick 2.0 
//import QtQuick.Controls 2.0 
//import QtQuick.Controls.Styles 1.4 
//import QtQuick.Controls.Material 2.0 
//import QtQuick.Layouts 1.3 

Rectangle 
{ 
// color: palette.grey 
    color: "grey" 

    // Manual move background and buttons. 
    Image 
    { 
     id: robotBody 
     fillMode: Image.PreserveAspectFit 
     anchors.top: parent.top 
     anchors.topMargin: 10 
//  anchors.horizontalCenter: parent.horizontalCenter 
     width: parent.width 
     height: parent.height * 0.8 
//  source: "../UI/Pictures/ManualMove_body.png" 
     source: "Large.png" 
     smooth: true 

     // Buttons. 
     Image 
     { 
      id: xFrontButton 
      fillMode: Image.PreserveAspectFit 
//   source: "../UI/Icons/ManualMove_XFront.png" 
      source: "small.png" 
      smooth: true 
      x: (parent.width - parent.paintedWidth)/2 + 0.8 * parent.paintedWidth 
      y: (parent.height - parent.paintedHeight)/2 + 0.8 * parent.paintedHeight 
//   transformOrigin: Item.TopLeft 
      width: implicitWidth * robotBody.paintedWidth/robotBody.implicitWidth 
      // NOTE: no need to specify the height because of the preserve aspect ratio fill mode. 

      MouseArea 
      { 
       id: xFrontMouseArea 
       anchors.fill: parent 
       hoverEnabled: true 
       onClicked: console.log("Heya!") 
//    onPressed: { uiController.onXFrontMouseAreaPressed() } 
//    onReleased: { uiController.onXFrontMouseAreaReleased() } 
      } 
     } 
    } 
} 

干杯:)