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

Question

我想创建一个包含水平列表视图但是垂直文本的列表。就像这样。 The docs

我已经编写了代码，如下所示

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