Forums

OverviewV-Play 2 Support (Qt 5) › How to anchor items in Row{}?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #18068

    Niyazi

    Hi,

    I have Row and has 3 items in it. The 2 text and 1 image. I need the text-1 to be anchor to the left and the text-2 to right.

    I try left and right Margin and is not working. How to anchor items in row? 

     

       Row {
            Text {
                id: text1
                text: "Text 1"
                anchors.leftMargin: dp(10)
            }
    
            Image {
                id: image1
                source: "../assets/vplay-logo.png"
                anchors.horizontalCenter: parent.horizontalCenter
            }
    
            Text {
                id: text2
                text: "Text 2"
                anchors.rightMargin: dp(10)
            }
        }

     

     

     

    #18070

    Alex
    V-Play Team

    Hi,

    a Row already handles the horizontal placement, by placing the items next to each other. You don’t need to (and cannot actually) use horizontal anchoring, only vertical.

    If you want some space between each item, use the spacing property of the Row.

    Cheers,
    Alex

    #18074

    Niyazi

    Thanks Alex. I am using now the verticalCenter option.

     

    By the way:

    I have a 9 items as shown below.

    How to anchor them?

    Should I use column and the row or should I use grid?

    how can I use them?

    This is the fixed item and no need the repeater.

     

    item1 and item2 will be text and the item3 will be image

    item4 is label, item5 is empty and the item6 will be label

    item7 is text, item8 will be label and the item9 will be empty

     

    item1                         item2                   item3

    item 4                       item 5                   item 6

    item7                        item8                   item9

    #18075

    Alex
    V-Play Team

    I’d say you can use whatever suits you best, all of them should work equally good.

    Since you use different items as content though (image, label, empty) I’d fill the grid (or rows) with wrapper items (totalWidth/3) and then center your content in the wrapper items. This gives you also more options in terms of spacing and padding of each item, to get the perfect look.

    Cheers,
    Alex

    #18076

    Niyazi

    Thanks Alex, Where do I get the v-paly grid layout examples?

    I have a Column and The row shown below. And the User vs Admin button position shows differently on android and ios.

    So if I try to implement the V-Play grid I am hoping the position of the item will be same in both android and ios. But I couldnt find any vplay grid examples.

    Kind regards

     

        // Loging Sections #################################################################################################
        Column {
            id: loginSection
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: dp(10)
            anchors.top: userPhoto.bottom
            anchors.topMargin: dp(10)
            width: parent.width
    
            Row {
                anchors.top:parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                width: parent.width
    
                // User Login Button
                AppButton {
                    id: userLoginButton
                    anchors.left: parent.left
                    anchors.leftMargin: dp(100)
                    text: qsTr("User")
                    flat: false
                    radius: 15
                    backgroundColor: "#ffffff"
                    minimumHeight : dp(15)
                    minimumWidth : dp(75)
                    textSize: sp(12)
                    onClicked: {
                        // on Clicked event here
                    }
                } 
    
                // Admin Login Button
                AppButton {
                    id: adminLoginButton
                    anchors.right: parent.right
                    anchors.rightMargin:  dp(100)
                    text: qsTr("Admin")
                    flat: false
                    radius: 15
                    backgroundColor: "#ffffff"
                    minimumHeight : dp(15)
                    minimumWidth : dp(75)
                    textSize: sp(12)
                    onClicked: {
                        // on Clicked event here
                    }
                } 
            }
        }// Loging Sections

     

    #18077

    Alex
    V-Play Team

    You can just search google for “qml grid”. V-Play is based on Qt and fully compatible, all Qt/Qml examples also work with V-Play.

    Cheers,
    Alex

    #18078

    Niyazi

    Thanks Alex

    #18079

    Niyazi

    Hi Alex,

    I couldn’t find any good qt grid example. So, I use Row with each item I try anchors.verticalCenter: parent.verticalCenter and I am getting below error on output window.

    The Error:

    /data/user/0/net.vplay.apps.QMLLive/files/qml/MainTemplate.qml:102: QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.

     

    The Code:

        // Loging Sections ####################################
        Row {
            id: loginSection
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: dp(10)
            anchors.top: userPhoto.bottom
            anchors.topMargin: dp(10)
            width: parent.width
    
                // User Login Button
                AppButton {
                    id: userLoginButton
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("User")
                    flat: false
                    radius: 15
                    backgroundColor: "#ffffff"
                    minimumHeight : dp(15)
                    minimumWidth : dp(75)
                    textSize: sp(12)
                    onClicked: {
                        // on Clicked event here
                    }
                } 
    
                // Admin Login Button
                AppButton {
                    id: adminLoginButton
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("Admin")
                    flat: false
                    radius: 15
                    backgroundColor: "#ffffff"
                    minimumHeight : dp(15)
                    minimumWidth : dp(75)
                    textSize: sp(12)
                    onClicked: {
                        // on Clicked event here
                    }
                } 
        }// Loging Sections

     

    #18080

    Marcin

    Hi,
    You can’t anchor to left or right items inside a Row, like the error describes.
    Row by design put things in the row, next to previous.
    Row controls left/right position, so if you override it you basically disable Row.
    Similar issue is with Column, if you change/affect top/bottom positioning.

    Another bit is text positioning where you can position text container and align text separately.
    I suggest to look at align related properties in the docs.

    Did you go through:
    Layouts (I suggest to read sections about Row and Column there)
    Grid QML type (there are few examples there, maybe will help)

    In general my approach to get around the column/row limitations is to wrap them with another container.
    For example put some columns inside the row etc.

    If I find some time maybe will give you some possible solution.
    The truth is that this is not that much V-Play related but more pure Qt, maybe you can try to ask there?

    #18081

    Niyazi

    Thanks Marcin,

    I did find the Layouts and Grid Qml type and couldn’t read fully. I did similar that you describe in your post. Only differences that the gap between buttons it looks different than the Android (Samsung galaxy s7 edge) and the iOS (ipone 7).

    Inside the column I put row to work with. My problem was the anchors.leftMargin and the anchors.rightMargin. I want to show 2 buttons on middle of the screen with certain gap between them.

    Here is my working code (best I can) and would like to be corrected by you :)

     

        Column {
            id: loginSection
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: dp(10)
            anchors.top: userPhoto.bottom
            anchors.topMargin: dp(15)
            width: parent.width
    
            Row {
                anchors.top:parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                width: parent.width
    
                AppButton  {
                    id: userLogin
                    anchors.left: parent.left
                    anchors.leftMargin: ((parent.width / 2) - userLogin.width - 15)
                    width: dp(75)
                    height: dp(25)
                    text: qsTr("User")
                    flat: false
                    radius: 15
                    backgroundColor: "#ffffff"
                    minimumHeight : dp(15)
                    minimumWidth : dp(75)
                    textSize: sp(12)
                    onClicked: {
                        // on Clicked event here
                    }
                }
    
                AppButton  {
                    id: adminLogin
                    anchors.right: parent.right
                    anchors.rightMargin: ((parent.width / 2) - userLogin.width - 15)
                    width: dp(75)
                    height: dp(25)
                    text: qsTr("Admin")
                    flat: false
                    radius: 15
                    backgroundColor: "#ffffff"
                    minimumHeight : dp(15)
                    minimumWidth : dp(75)
                    textSize: sp(12)
                    onClicked: {
                        // on Clicked event here
                    }
                }
    
            }
        } // Login Section

     

    #18096

    Günther
    V-Play Team

    Hi Niyazi,

    regarding the different spacings on iOS and Android:

    The AppButton itself also comes with some margin, which uses the default spacings of the Android/iOS platform style. See AppButton::horizontalMargin and verticalMargin.

    Best,
    Günther

    #18132

    Niyazi

    Thanks Günther.

    I found the solution using qml ColumnLayout{} and RowLayout{}. (needs to be import QtQuick.Layouts 1.3)

    Now I dont use the Column{} or Row{}. I am using V-Play App and not game.

Viewing 12 posts - 1 through 12 (of 12 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support