How to create a qml component for currency?



  • Hi,

    I am new to qml and try to use Column and Row layout. But it seems I am having difficult to combine.
    I dont want to use canvas. So; how can I design below component?

    I can use columnlayouts for Buy and 0.0000 but I am having difficulty to combine like below picture.

    0_1520932558726_usd.jpg



  • @NTMS
    don't expect such a detailed example every time.

    import QtQuick 2.9
    
    Rectangle {
        id: root
        
        radius: width/10
        
        property alias topText: textAtTop.text
        
        Rectangle {
            id: topItem
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.verticalCenter
            
            color:"orange"
            
            Text{
                id:textAtTop
                color: "white"
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                
                text: qsTr("$")
            }
        }
        
        Item {
            id: bottemItem
            anchors.left:parent.left
            anchors.right: parent.right
            anchors.top: topItem.bottom
            anchors.bottom: parent.bottom
            
            Item{
                id:bottemLeft
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: (parent.width/2)-1
                Text{
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.verticalCenter
                    
                    color:"orange"
                    text: "Buy"
                    
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                }
                
                Text{
                    anchors.top: parent.verticalCenter
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    
                    color:"black"
                    text: "0.0000"
                    
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                }
            }
            
            Rectangle{
                id:seperator
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.topMargin: height/15
                anchors.bottomMargin: height/15
                
                width: 2
                
                color:"black"
            }
            
            Item {
                id: bottemRight
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: (parent.width/2)-1
                
                Text{
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.verticalCenter
                    
                    color:"orange"
                    text: "Sell"
                    
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                }
                
                Text{
                    anchors.top: parent.verticalCenter
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    
                    color:"black"
                    text: "0.0000"
                    
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                }
            }
        }
    }
    
    


  • @J-Hilk thank you. It is more than enough for me to study with your code. Kind Regards


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.