Items in the Grid component that are not Rectangle
-
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.0Rectangle
{
id: circleContainer
width: 100
height: 100
radius: 100
color: "grey"
}
@Ellipse.qml
@
import QtQuick 2.0Path
{
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 * magicstartX: centerX
startY: centerY - relativeYPathCubic { // 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.0PathView
{
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.0Circle
{
id: selectionContianer
anchors.centerIn: parentEllipseView
{
id: cycleSelectionEllipseView
height: selectionContianer.height + 150
width: selectionContianer.width + 150
model: 16
delegate: Text { text: index }
}
}
@main.qml
@import QtQuick 2.0Rectangle {
id: background
width: 500
height: 360Grid
{
id: layout
anchors.centerIn: parent
rows: 1
columns: 2
spacing: 50Selection { id: select1 height: 150 width: 150 color: "red" } Selection { id: select2 color: "blue" }
}
}
@ -
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) -
Oh, got it. Yeah I use different names in my actual code, I just tried to keep it similar.
Thanks Jens!