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.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"
      }
    

    }
    }
    @



  • 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!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.