Horizontal listview with vertical text in Qml

0
votes

I want to create a list with Horizontal listview but vertical text. Just like this. enter image description here

I have wrote the code,as following

ListView {
    id: listView;   
    orientation: ListView.Horizontal  
    delegate: listDelegate;
    ScrollBar.horizontal: bar
    model: ListModel {
        id: phoneModel;
        ListElement{
            name: "wewqeq";
        }
        ListElement{
            name: "rrr";
        }
        ListElement{
            name: "Engine auto stop";
        }
        ListElement{
            name: "wewq";
        }
        ListElement{
            name: "weweqwe";
        }
    }
}

My code showed the result that

  1. list item has Horizontal view, but the text is the same! How can i change the text orientation of ListElement?
  2. The bar is at the bottom side, how can i make it to top side?

My result like this

enter image description here

2
qtqml
if you rotate the Text element by 90/270 degrees rotation: 90 – Mohammad Kanan

2 Answers

1
votes

You can use a vertical ListView and rotate it:

ListView {
    id: listView
    height: //...
    width: //...
    transformOrigin: Item.TopLeft
    rotation: -90
    y: listView.width
    orientation: ListView.Vertical
    ScrollBar.vertical: ScrollBar{}
}

The vertical ScrollBar will become horizontal on the top side.

0
votes
ListView {

id: listView    

delegate: listDelegate

rotation:-90 

model: ListModel {
    id: phoneModel;
    ListElement{
        name: "wewqeq";
    }
    ListElement{
        name: "rrr";
    }
    ListElement{
        name: "Engine auto stop";
    }
    ListElement{
        name: "wewq";
    }
    ListElement{
        name: "weweqwe";
    }
  }
 }