Move an aligned item in a GridLayout

Question

I've got a 2x2 Gridlayout. All items are Aligned left and each column spans 50% of the space.

Now I'd like to move one of the 4 items of the GridLayout 20 pixel more to the right. How do I this?

import QtQuick 2.2 
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Gridlayout {
   rows: 2
   flow: GridLayout.TopToBottom
   TextEdit {
      Layout.alignment: Qt.AlignLeft
      text: "test 1"
   }
   Image {
      // This one is supposed to be aligned left + 20 pixels
      source: "cool-pic.jpg"
   }
   TextEdit {
      Layout.alignment: Qt.AlignLeft
      text: "test 3"
   }
   TextEdit {
      text: "test 4"
   }
}

Jablonski · Accepted Answer · 2014-09-14T18:44:24.470

1

I found this solution. It works and maybe it will be useful for you. You can change width as you want

import QtQuick 2.2
import QtQuick.Layouts 1.1

GridLayout {
   rows: 2
   flow: GridLayout.TopToBottom
   TextEdit {
      Layout.alignment: Qt.AlignLeft
      text: "test 1"
   }

   Row{
       Rectangle{width: 20;height:parent.height; color:"transparent"}
   Image {
      // This one is supposed to be aligned left + 20 pixels
      source: "sub/tst.jpg"
   }
   }
   TextEdit {
      Layout.alignment: Qt.AlignLeft
      text: "test 3"
   }
   TextEdit {
      text: "test 4"
   }
}

edited Sep 14 '14 at 18:44

answered Sep 14 '14 at 18:23

Jablonski

18,083
2
46
47

Sorry for convenience sake I want with 4x TextEdit but I actually need to move an Image. I updated my original question. – Hedge Sep 14 '14 at 18:26
@Hedge I totally updated my answer. See my edit please. – Jablonski Sep 14 '14 at 18:45
Marvellous! Thank you and sorry for the inconvenience. – Hedge Sep 14 '14 at 18:52

Move an aligned item in a GridLayout

1 Answers1