Text Overflowing when flicked !!



  • Hey i am trying to make listview type qml scene where there are planets listed . When a user clicks on them it would show details about it . But the text is overflowing over image when flicked .

    alt text

    below is code

    
    import QtQuick 2.6
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.1
    Item {
        width: parent.width
        height: parent.height
    
        Rectangle {
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#4a4a4a" }
                GradientStop { position: 1.0; color: "#2b2b2b" }
            }
        }
    
        ListView {
            id: listView
    
            anchors.fill: parent
    
            delegate: detailsDelegate
            model: planets
        }
    
        ListModel {
            id: planets
    
            ListElement { name: "Mercury"; imageSource: "qrc:/images/merc.jpg"; facts: "Mercury is the smallest and innermost planet in the Solar System. Its orbital period around the Sun of 88 days is the shortest of all the planets in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.
    Like Venus, Mercury orbits the Sun within Earth's orbit as an inferior planet, so it can only be seen visually in the morning or the evening sky, and never exceeds 28° away from the Sun. Also, like Venus and the Moon, the planet displays the complete range of phases as it moves around its orbit relative to Earth. Seen from Earth, this cycle of phases reoccurs approximately every 116 days, the so-called synodic period. Although Mercury can appear as a bright star-like object when viewed from Earth, its proximity to the Sun often makes it more difficult to see than Venus." }
            ListElement { name: "Venus"; imageSource: "qrc:/images/logo.png"; facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years." }
            ListElement { name: "Earth"; imageSource: "images/logo.png"; facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'." }
            ListElement { name: "Mars"; imageSource: "images/logo.png"; facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood." }
        }
    
        Component {
            id: detailsDelegate
    
            Item {
                id: wrapper
    
                width: listView.width
                height: 30
    
                Rectangle {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
    
                    height: 30
    
                    color: "#333"
                    border.color: Qt.lighter(color, 1.2)
                    Text {
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 4
    
                        font.pixelSize: parent.height-4
                        color: '#fff'
    
                        text: name
                    }
                }
    
    
                Rectangle {
                    id: image
    
                    width: 26
                    height: 26
    
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.rightMargin: 2
                    anchors.topMargin: 2
    
                    color: "black"
    
    
                    Image {
                        anchors.fill: parent
    
                        fillMode: Image.PreserveAspectFit
    
                        source: imageSource
                    }
                }
    
                MouseArea {
                    anchors.fill: parent
                    onClicked: parent.state = "expanded"
                }
    
                Item {
                    id: factsView
    
                    anchors.top: image.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
    
                    opacity: 0
    
                    Rectangle {
                        id: fill
                        anchors.fill: parent
    
                        gradient: Gradient {
                            GradientStop { position: 0.0; color: "#fed958" }
                            GradientStop { position: 1.0; color: "#fecc2f" }
                        }
                        border.color: '#000000'
                        border.width: 2
                        Flickable {
                            id: flick
                            anchors.fill: fill
                            contentHeight: text.height
    
    
                            Text {
                                id:text
                                 anchors.fill: parent
                                anchors.margins: 5
    
                              clip: false
                              wrapMode: Text.WordWrap
                              color: '#1f1f21'
    
                                font.pixelSize: 12
    
                                text: facts
                            //    transform: Scale { yScale: -1; origin.y: text.height/2 }
    
                        }
                            // transform: Scale { yScale: -1; origin.y: flick.height/2 }
                        }
                    }
                }
    
                Rectangle {
                    id: closeButton
    
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.rightMargin: 2
                    anchors.topMargin: 2
    
                    width: 26
                    height: 26
    
                    color: "#157efb"
                    border.color: Qt.lighter(color, 1.1)
    
                    opacity: 0
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: wrapper.state = ""
                    }
                }
    
                states: [
                    State {
                        name: "expanded"
    
                        PropertyChanges { target: wrapper; height: listView.height }
                        PropertyChanges { target: image; width: listView.width; height: listView.width; anchors.rightMargin: 0; anchors.topMargin: 30 }
                        PropertyChanges { target: factsView; opacity: 1 }
                        PropertyChanges { target: closeButton; opacity: 1 }
                        PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
                    }
                ]
    
                transitions: [
                    Transition {
                        NumberAnimation {
                            duration: 200;
                            properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
                        }
                    }
                ]
            }
        }
    }
    
    

  • Moderators

    Set clip: true for our flickable.



  • Thanks !! It solved the issue :D


Log in to reply
 

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