qt - 在 QML 中锚定 4 个矩形以形成加号 - QtQuick

Question

这是我尝试过的：

/* The way I want it:
 *          red
 * blue             green
 *         yellow 
 */

import QtQuick 2.0

Item
{
  Rectangle 
  {
    id : one
    height : 100
    width  : 100
    color : "red"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20
  }

  Rectangle 
  {
    id : two
    height : 100
    width  : 100
    color : "blue"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20

    // On the top of blue rectangle there should be the red rectangle.
    anchors.top : one.bottom
    // And the blue rectangle should be on the bottom left of the red rectangle
    anchors.right : one.left
  }

  Rectangle 
  {
    id : three
    height : 100
    width  : 100
    color : "green"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20

    // On the top of green rectangle there should be the red rectangle.
    anchors.top  : one.bottom
    // And the green rectangle should be on the bottom right of the red rectangle
    anchors.left : one.right
  }

  Rectangle 
  {
    id : four
    height : 100
    width  : 100
    color : "yellow"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20

    // On the top of yellow rectangle there should be the blue rectangle and green rectangle.
    anchors.top   : two.bottom
    // And the yellow rectangle should be on the bottom right of the blue rectangle 
    anchors.left  : two.right
    // And the yellow rectangle should be on the bottom left of the green rectangle.
    anchors.right : three.left    
  }
}

这就是我得到的：

在这里看不到蓝色矩形：

Answer 1

这是一个制作加号的组件。我添加了一个新的Rectangle被调用rectCenter，然后每隔一个正确地锚定Rectangle到这个。

import QtQuick 2.0

Item
{
  width: 150
  height: width
  property int rectsDimension: 20


  Rectangle {
    id: rectCenter
    height: parent.rectsDimension
    width: height

    anchors.centerIn: parent
  }

  Rectangle
  {
    id : rectTop
    height: parent.rectsDimension
    width: height
    color : "red"
    anchors.bottom: rectCenter.top
    anchors.left: rectCenter.left
  }

  Rectangle
  {
    id : rectLeft
    height: parent.rectsDimension
    width: height
    color : "blue"
    anchors.right: rectCenter.left
    anchors.top: rectCenter.top
  }

  Rectangle
  {
    id : rectRight
    height: parent.rectsDimension
    width: height
    color : "green"
    anchors.left: rectCenter.right
    anchors.top: rectCenter.top
  }

  Rectangle
  {
    id : rectBottom
    height: parent.rectsDimension
    width: height
    color : "yellow"
    anchors.top: rectCenter.bottom
    anchors.left: rectCenter.left
  }
}

Answer 2

第一个矩形的左上角放置在默认位置 (0|0)，其他矩形通过锚点相对于那个矩形放置。

由于场景矩形的左上角显示为 (0|0)，因此您看不到蓝色矩形，因为它位于场景之外。

所以要么把整个东西移到右边一点，要么告诉场景在它的中间有 X = 0 （如果 QML 支持 - 不幸的是不能在这里测试它）