Results 1 to 6 of 6

Thread: re-arranging list items and Gridlayout questions

  1. 19th December 2014, 17:54 #1
    joko
    joko is offline Intermediate user
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default re-arranging list items and Gridlayout questions

    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.

    Qt Code: 
    1. property bool isPortrait : Screen.primaryOrientation === Qt.PortraitOrientation
    2.  
    3. GridLayout {
    4.         id: displayGrid
    5.         columnSpacing: 80
    6.         columns: isPortrait ? 2 : 3
    7.         rowSpacing: 80
    8.         rows: isPortrait ? 2 : 1
    9.         anchors.horizontalCenter: parent.horizontalCenter
    10.  
    11.         Button{ id: fit }
    12.  
    13.         Button { id: resize }
    14.  
    15.         Button { id: settings }
    16.     }
    To copy to clipboard, switch view to plain text mode 

    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.

    Qt Code: 
    1. GridLayout {
    2.                     id: totGrid
    3.                     columnSpacing: isPortrait ? 50 : 30
    4.                     columns: isPortrait ? 2 : 3
    5.                     rowSpacing: isPortrait ? 50 : 30
    6.                     rows: isPortrait ? 3 : 2
    7.                     anchors {
    8.                         horizontalCenter: parent.horizontalCenter
    9.                         verticalCenter: parent.verticalCenter
    10.                     }
    11.  
    12.                     Repeater {
    13.                         id: totRepeater
    14.                         model: listModel
    15.  
    16.                         Button {
    17.                             text: title
    18.                         }
    19.                     }
    20.                 }
    21.  
    22.     ListModel {
    23.         id: listModel
    24.         ListElement {
    25.             title: "Input"
    26.         }
    27.         ListElement {
    28.             title: "Display"
    29.         }
    30.         ListElement {
    31.             title: "Record"
    32.         }
    33.         ListElement {
    34.             title: "Connect"
    35.         }
    36.         ListElement {
    37.             title: "Print"
    38.         }
    39.         ListElement {
    40.             title: "Save"
    41.         }
    42.     }
    To copy to clipboard, switch view to plain text mode 

    Any help is greatly appreiated. TIA.
    Reply With Quote Reply With Quote
  2. 20th December 2014, 10:39 #2
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: re-arranging list items and Gridlayout questions

    Quote Originally Posted by joko View Post
    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

    Qt Code: 
    1. Item {
    2.    Layout.columnSpan: 2
    3. }
    To copy to clipboard, switch view to plain text mode 
    In your case with a conditional assignment based in isPortrait

    Quote Originally Posted by joko View Post
    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.
    This works for me:
    Qt Code: 
    1. import QtQuick 2.0
    2. import QtQuick.Controls 1.2
    3. import QtQuick.Layouts 1.1
    4.  
    5. ApplicationWindow {
    6.     id: window
    7.  
    8.     toolBar: ToolBar {
    9.         ToolButton {
    10.             id: modeButton
    11.             checkable: true
    12.  
    13.             text: window.isPortrait ? "Portrait" : "Landscape"
    14.         }
    15.     }
    16.  
    17.     readonly property bool isPortrait: modeButton.checked
    18.  
    19.     GridLayout {
    20.         anchors.fill: parent
    21.  
    22.         columns: window.isPortrait ? 2 : 3
    23.         rows: window.isPortrait ? 3 : 2
    24.  
    25.         Repeater {
    26.             model: window.isPortrait ? portraitModel : landscapeModel
    27.  
    28.             Button {
    29.                 text: model.title
    30.             }
    31.         }
    32.     }
    33.  
    34.     ListModel {
    35.         id: portraitModel
    36.  
    37.         ListElement {
    38.             title: "1"
    39.         }
    40.         ListElement {
    41.             title: "2"
    42.         }
    43.         ListElement {
    44.             title: "3"
    45.         }
    46.         ListElement {
    47.             title: "4"
    48.         }
    49.         ListElement {
    50.             title: "5"
    51.         }
    52.         ListElement {
    53.             title: "6"
    54.         }
    55.     }
    56.     ListModel {
    57.         id: landscapeModel
    58.  
    59.         ListElement {
    60.             title: "6"
    61.         }
    62.         ListElement {
    63.             title: "5"
    64.         }
    65.         ListElement {
    66.             title: "4"
    67.         }
    68.         ListElement {
    69.             title: "3"
    70.         }
    71.         ListElement {
    72.             title: "2"
    73.         }
    74.         ListElement {
    75.             title: "1"
    76.         }
    77.     }
    78. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _
    Reply With Quote Reply With Quote

  3. The following user says thank you to anda_skoa for this useful post:

    joko (23rd December 2014)
  4. 23rd December 2014, 17:41 #3
    joko
    joko is offline Intermediate user
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: re-arranging list items and Gridlayout questions

    Quote Originally Posted by anda_skoa View Post
    In your case with a conditional assignment based in isPortrait
    Qt Code: 
    1. GridLayout {
    2.   id: totGrid
    3.   columnSpacing: isPortrait ? 50 : 30
    4.   columns: isPortrait ? 2 : 3
    5.   rowSpacing: isPortrait ? 50 : 30
    6.   rows: isPortrait ? 3 : 2
    7.   anchors {
    8.       horizontalCenter: parent.horizontalCenter
    9.       verticalCenter: parent.verticalCenter
    10.    }
    11.  
    12.    Repeater {
    13.        id: totRepeater
    14.        model: isPortrait ? portraitModel : landscapeModel
    15.  
    16.        Rectangle
    17.        {
    18.             color: "#00000000"
    19.             width: icon.implicitWidth + 50
    20.              height: icon.implicitHeight + 50
    21.  
    22.              Image
    23.              {
    24.                  id: icon
    25.                  source: iconName
    26.                  fillMode: Image.PreserveAspectFit
    27.                  anchors.horizontalCenter: parent.horizontalCenter
    28.               }
    29.  
    30.               Text {
    31.                   id: label
    32.                   text: qsTr(title)
    33.                   wrapMode: Text.WordWrap
    34.                   color: "white"
    35.                   anchors {
    36.                        horizontalCenter: parent.horizontalCenter
    37.                        bottom: parent.bottom
    38.                   }
    39.              }
    40.         }
    41.     }
    42.  
    43.     ListModel {
    44.         id: portraitModel
    45.         ListElement {
    46.             iconName: "/images/input.png"
    47.             title: "Input"
    48.         }
    49.         ListElement {
    50.             iconName: "/images/display.png"
    51.             title: "Display"
    52.         }
    53.         ListElement {
    54.             iconName: "/images/record.png"
    55.             title: "Record"
    56.         }
    57.         ListElement {
    58.             iconName: "/images/connect.png"
    59.             title: "Connect"
    60.         }
    61.         ListElement {
    62.             iconName: "/images/print.png"
    63.             title: "Print"
    64.         }
    65.         ListElement {
    66.             iconName: "/images/save.png"
    67.             title: "Save"
    68.         }
    69.     }
    70.  
    71.     ListModel {
    72.         id: landscapeModel
    73.         ListElement {
    74.             iconName: "/images/input.png"
    75.             title: "Input"
    76.         }
    77.         ListElement {
    78.             iconName: "/images/display.png"
    79.             title: "Display"
    80.         }
    81.         ListElement {
    82.             iconName: "/images/print.png"
    83.             title: "Print"
    84.         }
    85.         ListElement {
    86.             iconName: "/images/record.png"
    87.             title: "Record"
    88.         }
    89.         ListElement {
    90.             iconName: "/images/connect.png"
    91.             title: "Connect"
    92.         }
    93.         ListElement {
    94.             iconName: "/images/save.png"
    95.             title: "Save"
    96.         }
    97.     }
    98. }
    To copy to clipboard, switch view to plain text mode 

    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!
    Last edited by joko; 23rd December 2014 at 17:55.
    Reply With Quote Reply With Quote
  5. 23rd December 2014, 19:15 #4
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: re-arranging list items and Gridlayout questions

    Works for me.

    Qt Code: 
    1. import QtQuick 2.0
    2. import QtQuick.Controls 1.2
    3. import QtQuick.Layouts 1.1
    4.  
    5. ApplicationWindow {
    6.     id: window
    7.  
    8.     width: 800
    9.     height: 600
    10.  
    11.     toolBar: ToolBar {
    12.         RowLayout {
    13.             anchors.fill: parent
    14.  
    15.             ToolButton {
    16.                 id: modeButton
    17.                 checkable: true
    18.  
    19.                 text: window.isPortrait ? "Portrait" : "Landscape"
    20.             }
    21.         }
    22.     }
    23.  
    24.     readonly property bool isPortrait: modeButton.checked
    25.  
    26.     GridLayout {
    27.         id: totGrid
    28.         columnSpacing: isPortrait ? 50 : 30
    29.         columns: isPortrait ? 2 : 3
    30.         rowSpacing: isPortrait ? 50 : 30
    31.         rows: isPortrait ? 3 : 2
    32.         anchors {
    33.             centerIn: parent
    34.         }
    35.  
    36.         Repeater {
    37.             id: totRepeater
    38.             model: window.isPortrait ? portraitModel : landscapeModel
    39.  
    40.             Rectangle {
    41.                 color: "#00000000"
    42.                 width: icon.implicitWidth + 50
    43.                 height: icon.implicitHeight + 50
    44.  
    45.                 Image {
    46.                     id: icon
    47.                     source: iconName
    48.                     fillMode: Image.PreserveAspectFit
    49.                     anchors.horizontalCenter: parent.horizontalCenter
    50.                 }
    51.  
    52.                 Text {
    53.                     id: label
    54.                     text: qsTr(title)
    55.                     wrapMode: Text.WordWrap
    56.                     color: "white"
    57.                     anchors {
    58.                         horizontalCenter: parent.horizontalCenter
    59.                         bottom: parent.bottom
    60.                     }
    61.                 }
    62.             }
    63.         }
    64.  
    65.         ListModel {
    66.             id: portraitModel
    67.             ListElement {
    68.                 iconName: "icon.png"
    69.                 title: "Input"
    70.             }
    71.             ListElement {
    72.                 iconName: "icon.png"
    73.                 title: "Display"
    74.             }
    75.             ListElement {
    76.                 iconName: "icon.png"
    77.                 title: "Record"
    78.             }
    79.             ListElement {
    80.                 iconName: "icon.png"
    81.                 title: "Connect"
    82.             }
    83.             ListElement {
    84.                 iconName: "icon.png"
    85.                 title: "Print"
    86.             }
    87.             ListElement {
    88.                 iconName: "icon.png"
    89.                 title: "Save"
    90.             }
    91.         }
    92.  
    93.         ListModel {
    94.             id: landscapeModel
    95.             ListElement {
    96.                 iconName: "icon.png"
    97.                 title: "Input"
    98.             }
    99.             ListElement {
    100.                 iconName: "icon.png"
    101.                 title: "Display"
    102.             }
    103.             ListElement {
    104.                 iconName: "icon.png"
    105.                 title: "Print"
    106.             }
    107.             ListElement {
    108.                 iconName: "icon.png"
    109.                 title: "Record"
    110.             }
    111.             ListElement {
    112.                 iconName: "icon.png"
    113.                 title: "Connect"
    114.             }
    115.             ListElement {
    116.                 iconName: "icon.png"
    117.                 title: "Save"
    118.             }
    119.         }
    120.     }
    121. }
    To copy to clipboard, switch view to plain text mode 

    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,
    _
    Reply With Quote Reply With Quote
  6. 24th December 2014, 09:48 #5
    joko
    joko is offline Intermediate user
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: re-arranging list items and Gridlayout questions

    Quote Originally Posted by anda_skoa View Post
    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!
    Reply With Quote Reply With Quote
  7. 24th December 2014, 11:11 #6
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: re-arranging list items and Gridlayout questions

    Quote Originally Posted by joko View Post
    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 View Post
    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.

    Qt Code: 
    1. Text {
    2.    text: qsTr("Hello World") // OK
    3. }
    4. Text {
    5.    property string predefinedText:  qsTr("Hello World") // OK
    6.    text: predefinedText
    7. }
    8. Text {
    9.    property string predefinedText: "Hello World"
    10.    text: qsTr(predefinedText) // Not OK, lupdate has no way of finding "Hello World"
    11. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _
    Reply With Quote Reply With Quote

  8. The following user says thank you to anda_skoa for this useful post:

    joko (29th December 2014)
« Previous Thread | Next Thread »

Similar Threads

  1. How to use list of items?
    By Squall in forum Qt Programming
    Replies: 1
    Last Post: 19th March 2012, 00:22
  2. Making an Editable List (Add/Remove) and Adding Values of Items in List?
    By DLKenji in forum Newbie
    Replies: 1
    Last Post: 23rd April 2011, 17:33
  3. Arranging the Items in Qtopia
    By sar_van81 in forum Qt for Embedded and Mobile
    Replies: 3
    Last Post: 10th December 2007, 08:52
  4. Comparing Items In List Box
    By kenny_isles in forum Qt Programming
    Replies: 9
    Last Post: 21st February 2007, 13:06
  5. delete items from list box
    By vvbkumar in forum Qt Programming
    Replies: 4
    Last Post: 23rd June 2006, 19:08

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Qt is a trademark of The Qt Company.