Problem with Rectangle border width

Circuits

I am sure this has been asked before so sorry about that. Is it possible to make it so that the shared side is not a 2 pixel thick border? This looks awkward to me:

Row
{
  id: titleColumn

  width: parent.width
  height: 90

  Rectangle
  {
    id: nameTextContainer

    width: parent.width/2
    height: parent.height
    border.width: 1
  }

  Rectangle
  {
    id: typeTextContainer

    width: parent.width/2
    height: parent.height
    border.width: 1
  }
}

guerinoni

@Circuits

Rectangle {
        id: leftRect

        anchors.fill: parent
        color: "red"
        width: parent.width / 2
        height: parent.height
        border.width: 1

        Rectangle {
            color: "yellow"

            width: parent.width / 2
            border.width: 1
            height: parent.height
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
        }
    }

ODБOï

@guerinoni said in Problem with Rectangle border width:

anchors.fill: parent
width: parent.width / 2

this 2 lines together make no sense to me

Circuits

While this does happen to work I am getting some errors about anchoring with rows. I think perhaps I shouldn't even be using a Row? Maybe what I need is an Item? I am going to roll with it for now, thanks guerinoni!

Circuits

I figured out a way to do this. Well, someone else figured it out and I just applied a Row and Repeater:

Row 
{    
  Repeater 
  {
    model: 3
    Rectangle 
    {
      width: 100
      height: 40
      CustomBorder
      {
        borderColor: "black"
      }
    }
  }
}

where CustomBorder is:

Rectangle
{
  property bool commonBorder : true
  
  property int lBorderwidth : 1
  property int rBorderwidth : 1
  property int tBorderwidth : 1
  property int bBorderwidth : 1
  
  property int commonBorderWidth : 1
  
  z : -1
  
  property string borderColor : "white"
  
  color: borderColor
  
  anchors
  {
    left: parent.left
    right: parent.right
    top: parent.top
    bottom: parent.bottom
    
    topMargin    : commonBorder ? -commonBorderWidth : -tBorderwidth
    bottomMargin : commonBorder ? -commonBorderWidth : -bBorderwidth
    leftMargin   : commonBorder ? -commonBorderWidth : -lBorderwidth
    rightMargin  : commonBorder ? -commonBorderWidth : -rBorderwidth
  }
}

which was created by @ Amit Tomar on SO.

I have a question. If instead of separating CustomBorder into it's own QML file. Is there a way I can use Component and Loader s/t I can keep CustomBorder inside of main but still refrence it the same way ie:

Rectangle
{
  CustomBorder
  {
  }
}

is that possible?

Solved Problem with Rectangle border width