Items in the Grid component that are not Rectangle

smileeFace

Hi,

Noticed something this morning, I feel that I might be overlooking something but I believe its worth asking. I am trying to place custom components in a Grid, but it seems like the components aren't placed into the grid. Or maybe they are but just into the first cell of the Grid. I don't know. What I would like is for the two circles to be next to each other. This might be intentional since the circle's and their text don't have "borders" where Grid can split them with.

Circle.qml
@
import QtQuick 2.0

Rectangle
{
id: circleContainer
width: 100
height: 100
radius: 100
color: "grey"
}
@

Ellipse.qml
@
import QtQuick 2.0

Path
{
id: point
property real width: 200
property real height: 200
property real margin: 25
property real centerX: width/2
property real centerY: height/2
property real relativeX: width/2 - margin
property real relativeY: height/2 - margin
property real magic: 0.551784
property real magicX: relativeX * magic
property real magicY: relativeY * magic

startX: centerX
startY: centerY - relativeY

PathCubic { // Quadrant II arc
control1X: point.centerX - point.magicX
control1Y: point.centerY - point.relativeY
control2X: point.centerX - point.relativeX
control2Y: point.centerY - point.magicY
x: point.centerX - point.relativeX
y: point.centerY
}

PathCubic { // Quadrant III arc
control1X: point.centerX - point.relativeX
control1Y: point.centerY + point.magicY
control2X: point.centerX - point.magicX
control2Y: point.centerY + point.relativeY
x: point.centerX
y: point.centerY + point.relativeY
}

PathCubic { // Quadrant IV arc
control1X: point.centerX + point.magicX
control1Y: point.centerY + point.relativeY
control2X: point.centerX + point.relativeX
control2Y: point.centerY + point.magicY
x: point.centerX + point.relativeX
y: point.centerY
}

PathCubic { // Quadrant I arc
control1X: point.centerX + point.relativeX
control1Y: point.centerY - point.magicY
control2X: point.centerX + point.magicX
control2Y: point.centerY - point.relativeY
x: point.centerX
y: point.centerY - point.relativeY
}
}
@

EllipseView.qml
@
import QtQuick 2.0

PathView
{
id: ellipseViewContainer
width: parent.width
height: parent.height
interactive: false
anchors.centerIn: parent
path: Ellipse {
width: ellipseViewContainer.width
height: ellipseViewContainer.height
}
}
@

Selection.qml
@import QtQuick 2.0

Circle
{
id: selectionContianer
anchors.centerIn: parent

EllipseView
{
id: cycleSelectionEllipseView
height: selectionContianer.height + 150
width: selectionContianer.width + 150
model: 16
delegate: Text { text: index }
}
}
@

main.qml
@import QtQuick 2.0

Rectangle {
id: background
width: 500
height: 360

Grid
{
id: layout
anchors.centerIn: parent
rows: 1
columns: 2
spacing: 50

  Selection
  {
     id: select1
     height: 150
     width: 150
     color: "red"
  }

  Selection
  {
     id: select2
     color: "blue"
  }

}
}
@

Jens

Your code was rather confusing. Using the names Ellipse and Circle in the same context when only one of them is a visible item is a bit weird :)

I can however solve your problem. The only issue is your definition of Selection.qml. There you explicitly set @anchors.centerIn:parent@
Anchors always wins over positioners, so despite your items correctly getting their x coordinates assigned by the Grid, it will simply be ignored due to placing the anchors there. (they both try to anchor to the center of the grid)

smileeFace

Oh, got it. Yeah I use different names in my actual code, I just tried to keep it similar.

Thanks Jens!