[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)
        }
    }

 

 

 

[AlexFelgo 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

[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

[AlexFelgo 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

[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 Felgo 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

 

[AlexFelgo Team]

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

Cheers,
Alex

[Niyazi]

Thanks Alex

[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

 

[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 Felgo related but more pure Qt, maybe you can try to ask there?

[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

 

[GüntherFelgo 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

[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 Felgo App and not game.