Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Problem with Rectangle border width
Forum Updated to NodeBB v4.3 + New Features

Problem with Rectangle border width

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 3 Posters 681 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    Circuits
    wrote on last edited by
    #1

    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
      }
    }
    
    1 Reply Last reply
    0
    • guerinoniG Offline
      guerinoniG Offline
      guerinoni
      wrote on last edited by
      #2

      @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ïO 1 Reply Last reply
      1
      • guerinoniG 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ïO Offline
        ODБOïO Offline
        ODБOï
        wrote on last edited by
        #3

        @guerinoni said in Problem with Rectangle border width:

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

        this 2 lines together make no sense to me

        1 Reply Last reply
        0
        • C Offline
          C Offline
          Circuits
          wrote on last edited by Circuits
          #4

          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!

          1 Reply Last reply
          0
          • C Offline
            C Offline
            Circuits
            wrote on last edited by
            #5

            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?

            1 Reply Last reply
            1

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved