Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Problem with Rectangle border width



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


  • @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
            }
        }
    


  • @guerinoni said in Problem with Rectangle border width:

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

    this 2 lines together make no sense to me



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



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


Log in to reply