Qml中带有垂直文本的水平列表视图

Question

我想创建一个带有水平列表视图但垂直文本的列表。就像这样。

我已经写好了代码，如下

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";
        }
    }
}

我的代码显示结果

1. 列表项具有水平视图，但文本相同！如何更改 ListElement 的文本方向？
2. 栏在底部，我怎样才能让它到顶部？

我的结果是这样的

Answer 1

您可以使用垂直的ListView 并旋转它：

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

垂直的ScrollBar 将在顶部变为水平。

Answer 2

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";
    }
  }
 }