Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

how to display a list from the inputs taken from a file using qml?



  • I have tried using listview in qml but i'm unable to set text that read from a file


  • Moderators

    Hi @vamsi1992 and welcome

    first of, more information pls, or no-one will be able to help you

    What format is that file, in what do you store it, how did you try to populate the listview.

    Show some code



  • Component {

        id: secondView
    
        Image
        {
            id:img
            source:"/BackGround (5).png"
            //            anchors.fill:parent
            antialiasing: true
            Rectangle{
                id:rect
                x:100
                y:100
                height:parent.height/2
                width:100
                color:"transparent"
                //                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                Component.onCompleted:{
     
                    for(var j=1;j<=30;j++)
                    {
    
                        mylist.model.append({songname:"Song "+str2})
                        console.log("song ",str2)
    
    
                        //console.log("song  "+usb.filename[5])
                    }
                }
    
                ListView{
                    id:mylist
                    anchors.fill:parent
                    model:ListModel{}
                    spacing:30
    
                    delegate:Text{
                        id:txt
                        text:songname
                        color: "lightsteelblue"
                        font.pixelSize: 20
                        MouseArea{
                            anchors.fill:parent
                            onClicked:{
                                console.log("List ")
                                console.log(mylist.currentIndex)
    

    //
    }
    }
    }
    }
    }

    I'm reading song list from a txt file and i'm trying to append song name to mylist so that contents of listview should be name of songs



  • @vamsi1992 said in how to display a list from the inputs taken from a file using qml?:

    I'm unable to set text that read from a file

    This is not the right way to do it! QML should only be used to create the graphic part / design. The logic should be written in C++!
    So, do not try to read your text file from QML to extract the data you want.
    Do it from C++ and expose it to QML, this is the most powerful solution and, in my eyes, the easiest!


  • Moderators

    @vamsi1992

    assuming this actually creates a valid ListModel, which I have serious doubt about,

    Component.onCompleted:{
     
                    for(var j=1;j<=30;j++)
                    {
    
                        mylist.model.append({songname:"Song "+str2})
                        console.log("song ",str2)
    
    
                        //console.log("song  "+usb.filename[5])
                    }
                }
    

    here:

    ListView{
                    id:mylist
                    anchors.fill:parent
                    model:ListModel{}
    

    you assign your ListView an empty model anyway.

    I would suggest looking into what @KroMignon suggested.

    A simple c++ file that reads your file and stores it in a QStringList property is all you need.

    and then:

    ...
    delegate:Text{
                 id:txt
                 text:modelData
    ....
    


  • hi
    @vamsi1992 said in how to display a list from the inputs taken from a file using qml?:

    Window {
        visible: true
        width: 640
        height: 480
    
        property var  songModel: []
    
        Component.onCompleted: {
            populateModel()
        }
    
        function populateModel (){
    
            var xhr = new XMLHttpRequest;
            xhr.open("GET", "songList.txt");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    var responseArr = xhr.responseText.split("\n")
                    songModel = responseArr
                }
            };
            xhr.send();
        }
    
        ListView{
    id:list
            anchors.fill: parent
            model:songModel
            delegate:Text {
                height:  80
                width: list.width
                text: songModel[index]
            }
        }
    }
    

    this is only QML solution,
    but of course it's better to use c++ to read the file content as the others suggested



  • thanks to all for providing solution


  • Moderators

    @vamsi1992 Great, don't forget to set the topic to solved, if your issue is solved :)


Log in to reply