re-arranging list items and Gridlayout questions

Printable View

Hi Qt Masters,

Please advise any recommendations.

1) I'm having problem implementing the gridlayout columnspan. I wanted that when the orientation is portrait, the second row would span 2 columns and settings button will be centered.

Code:

property bool isPortrait : Screen.primaryOrientation === Qt.PortraitOrientation
 
GridLayout {
        id: displayGrid
        columnSpacing: 80
        columns: isPortrait ? 2 : 3
        rowSpacing: 80
        rows: isPortrait ? 2 : 1
        anchors.horizontalCenter: parent.horizontalCenter
 
        Button{ id: fit }
 
        Button { id: resize }
 
        Button { id: settings }
    }

2) Another one is, I wanted to re-arrange the order of the model when the orientation is landscape. I tried creating 2 models and put a condition which model to use, however I encountered a problem wherein the last item overlaps the first item after I changed the orientation.

Code:

GridLayout {
                    id: totGrid
                    columnSpacing: isPortrait ? 50 : 30
                    columns: isPortrait ? 2 : 3
                    rowSpacing: isPortrait ? 50 : 30
                    rows: isPortrait ? 3 : 2
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        verticalCenter: parent.verticalCenter
                    }
 
                    Repeater {
                        id: totRepeater
                        model: listModel
 
                        Button {
                            text: title
                        }
                    }
                }
 
    ListModel {
        id: listModel
        ListElement {
            title: "Input"
        }
        ListElement {
            title: "Display"
        }
        ListElement {
            title: "Record"
        }
        ListElement {
            title: "Connect"
        }
        ListElement {
            title: "Print"
        }
        ListElement {
            title: "Save"
        }
    }

Any help is greatly appreiated. TIA.

Re: re-arranging list items and Gridlayout questions

Quote:

Originally Posted by joko

1) I'm having problem implementing the gridlayout columnspan. I wanted that when the orientation is portrait, the second row would span 2 columns and settings button will be centered.

Column span can be set via an attached property

Code:

Item {
   Layout.columnSpan: 2
}

In your case with a conditional assignment based in isPortrait

Quote:

Originally Posted by joko

This works for me:

Code:

import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
 
ApplicationWindow {
    id: window
 
    toolBar: ToolBar {
        ToolButton {
            id: modeButton
            checkable: true
 
            text: window.isPortrait ? "Portrait" : "Landscape"
        }
    }
 
    readonly property bool isPortrait: modeButton.checked
 
    GridLayout {
        anchors.fill: parent
 
        columns: window.isPortrait ? 2 : 3
        rows: window.isPortrait ? 3 : 2
 
        Repeater {
            model: window.isPortrait ? portraitModel : landscapeModel
 
            Button {
                text: model.title
            }
        }
    }
 
    ListModel {
        id: portraitModel
 
        ListElement {
            title: "1"
        }
        ListElement {
            title: "2"
        }
        ListElement {
            title: "3"
        }
        ListElement {
            title: "4"
        }
        ListElement {
            title: "5"
        }
        ListElement {
            title: "6"
        }
    }
    ListModel {
        id: landscapeModel
 
        ListElement {
            title: "6"
        }
        ListElement {
            title: "5"
        }
        ListElement {
            title: "4"
        }
        ListElement {
            title: "3"
        }
        ListElement {
            title: "2"
        }
        ListElement {
            title: "1"
        }
    }
}

Cheers,
_

Re: re-arranging list items and Gridlayout questions

Quote:

Originally Posted by anda_skoa

In your case with a conditional assignment based in isPortrait

Code:

GridLayout {
  id: totGrid
  columnSpacing: isPortrait ? 50 : 30
  columns: isPortrait ? 2 : 3
  rowSpacing: isPortrait ? 50 : 30
  rows: isPortrait ? 3 : 2
  anchors {
      horizontalCenter: parent.horizontalCenter
      verticalCenter: parent.verticalCenter
   }
 
   Repeater {
       id: totRepeater
       model: isPortrait ? portraitModel : landscapeModel
 
       Rectangle
       {
            color: "#00000000"
            width: icon.implicitWidth + 50
             height: icon.implicitHeight + 50
 
             Image
             {
                 id: icon
                 source: iconName
                 fillMode: Image.PreserveAspectFit
                 anchors.horizontalCenter: parent.horizontalCenter
              }
 
              Text {
                  id: label
                  text: qsTr(title)
                  wrapMode: Text.WordWrap
                  color: "white"
                  anchors {
                       horizontalCenter: parent.horizontalCenter
                       bottom: parent.bottom
                  }
             }
        }
    }
 
    ListModel {
        id: portraitModel
        ListElement {
            iconName: "/images/input.png"
            title: "Input"
        }
        ListElement {
            iconName: "/images/display.png"
            title: "Display"
        }
        ListElement {
            iconName: "/images/record.png"
            title: "Record"
        }
        ListElement {
            iconName: "/images/connect.png"
            title: "Connect"
        }
        ListElement {
            iconName: "/images/print.png"
            title: "Print"
        }
        ListElement {
            iconName: "/images/save.png"
            title: "Save"
        }
    }
 
    ListModel {
        id: landscapeModel
        ListElement {
            iconName: "/images/input.png"
            title: "Input"
        }
        ListElement {
            iconName: "/images/display.png"
            title: "Display"
        }
        ListElement {
            iconName: "/images/print.png"
            title: "Print"
        }
        ListElement {
            iconName: "/images/record.png"
            title: "Record"
        }
        ListElement {
            iconName: "/images/connect.png"
            title: "Connect"
        }
        ListElement {
            iconName: "/images/save.png"
            title: "Save"
        }
    }
}

Hi anda_skoa, above is my code.

The problem occurs when the orientation changes. At first everything is okay, then when i rotate the device, the Save element from landscapeModel is being displayed on top of Input element, it leaves the last rectangle blank. It happens always even if I only use four elements in the models. Then when i'll rotate again the device in portrait orientation, the same problem will occur, first and last elements still overlapped with each other and the last rectangle is blank.

Can you spot any problem with the code? I tried using the button into the repeater and it is working fine, it only occurred with this specific code.

Thanks!

Re: re-arranging list items and Gridlayout questions

Works for me.

Code:

import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
 
ApplicationWindow {
    id: window
 
    width: 800
    height: 600
 
    toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent
 
            ToolButton {
                id: modeButton
                checkable: true
 
                text: window.isPortrait ? "Portrait" : "Landscape"
            }
        }
    }
 
    readonly property bool isPortrait: modeButton.checked
 
    GridLayout {
        id: totGrid
        columnSpacing: isPortrait ? 50 : 30
        columns: isPortrait ? 2 : 3
        rowSpacing: isPortrait ? 50 : 30
        rows: isPortrait ? 3 : 2
        anchors {
            centerIn: parent
        }
 
        Repeater {
            id: totRepeater
            model: window.isPortrait ? portraitModel : landscapeModel
 
            Rectangle {
                color: "#00000000"
                width: icon.implicitWidth + 50
                height: icon.implicitHeight + 50
 
                Image {
                    id: icon
                    source: iconName
                    fillMode: Image.PreserveAspectFit
                    anchors.horizontalCenter: parent.horizontalCenter
                }
 
                Text {
                    id: label
                    text: qsTr(title)
                    wrapMode: Text.WordWrap
                    color: "white"
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        bottom: parent.bottom
                    }
                }
            }
        }
 
        ListModel {
            id: portraitModel
            ListElement {
                iconName: "icon.png"
                title: "Input"
            }
            ListElement {
                iconName: "icon.png"
                title: "Display"
            }
            ListElement {
                iconName: "icon.png"
                title: "Record"
            }
            ListElement {
                iconName: "icon.png"
                title: "Connect"
            }
            ListElement {
                iconName: "icon.png"
                title: "Print"
            }
            ListElement {
                iconName: "icon.png"
                title: "Save"
            }
        }
 
        ListModel {
            id: landscapeModel
            ListElement {
                iconName: "icon.png"
                title: "Input"
            }
            ListElement {
                iconName: "icon.png"
                title: "Display"
            }
            ListElement {
                iconName: "icon.png"
                title: "Print"
            }
            ListElement {
                iconName: "icon.png"
                title: "Record"
            }
            ListElement {
                iconName: "icon.png"
                title: "Connect"
            }
            ListElement {
                iconName: "icon.png"
                title: "Save"
            }
        }
    }
}

Btw, that qsTr(title) is not going to work, but that is probably just demo code, your actual code will have the actual strings translated, right?

Cheers,
_

24th December 2014, 09:48
joko

Re: re-arranging list items and Gridlayout questions

Quote:

Originally Posted by anda_skoa

Works for me.

Btw, that qsTr(title) is not going to work, but that is probably just demo code, your actual code will have the actual strings translated, right?

Cheers,
_

Thanks for your quick response anda_skoa, greatly appreciated.

It is actually working in this way, however when I tried to run it into the actual device, the issue still occur.
The 'title' is coming from the model and it is actually working fine, all my text properties in Text elements, I used qsTr. You mean it is not advisable to do it that way?

Cheers!
24th December 2014, 11:11
anda_skoa

Re: re-arranging list items and Gridlayout questions
Quote:

Originally Posted by joko

It is actually working in this way, however when I tried to run it into the actual device, the issue still occur.

Must be something else then.
Unfortunately I don't have a device here to test this with.

Quote:

Originally Posted by joko

The 'title' is coming from the model and it is actually working fine, all my text properties in Text elements, I used qsTr. You mean it is not advisable to do it that way?

No, sorry, misunderstanding.

Of course qsTr() is the correct function, but it needs to be at the source string, so that lupdate can extract it for the translation file.
In this code snippet it is used on a variable.
Code:

Text { text: qsTr("Hello World") // OK } Text { property string predefinedText: qsTr("Hello World") // OK text: predefinedText } Text { property string predefinedText: "Hello World" text: qsTr(predefinedText) // Not OK, lupdate has no way of finding "Hello World" }
Cheers,
_