QML中实现横向ListView搭配垂直文本的技术问题咨询

你的横向ListView已经搭建好了，但文本垂直排列的需求得靠自定义delegate来实现——默认的Text组件是默认水平显示文本的。下面给你两种常用的实现方案，你可以根据自己的需求选：

方式1：旋转文本实现整体竖排 #

这种方式是把整个文本块旋转90度，让文本呈竖状展示，适合希望文本整体垂直排列的场景：

ListView {
    id: listView;
    width: 400  // 给横向列表设置合适宽度
    height: 100  // 预留足够高度容纳垂直文本
    orientation: ListView.Horizontal
    delegate: listDelegate;
    ScrollBar.horizontal: ScrollBar {}

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

    Component {
        id: listDelegate
        Item {
            width: 40  // 给旋转后的文本预留宽度
            height: listView.height  // 高度和ListView保持一致
            Text {
                anchors.centerIn: parent
                text: name
                rotation: 90  // 顺时针旋转90度，文本从上到下展示
                // 如果想要从下到上的垂直文本，改成 rotation: -90 即可
                font.pixelSize: 14
                color: "#333"
            }
        }
    }
}

方式2：强制换行实现逐字符竖排 #

如果希望每个字符单独占一行，形成逐字垂直排列的效果，可以通过固定文本宽度+强制换行来实现：

ListView {
    id: listView;
    width: 400
    height: 150  // 根据文本行数调整高度
    orientation: ListView.Horizontal
    delegate: listDelegate;
    ScrollBar.horizontal: ScrollBar {}

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

    Component {
        id: listDelegate
        Item {
            width: 20  // 固定窄宽度，强制文本换行
            height: implicitHeight  // 根据文本实际高度自动适配
            Text {
                text: name
                width: parent.width
                wrapMode: Text.WrapAnywhere  // 允许在任意字符处换行
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 14
                color: "#333"
            }
        }
    }
}

关键注意点： #

• 必须自定义delegate：默认delegate不会处理文本垂直排列，所以一定要自己定义包含垂直文本逻辑的Item。
• 调整尺寸：根据你选的显示方式，要合理设置delegate的width和height，确保文本能完整展示不被截断。
• 旋转方向可灵活调整：rotation:90和rotation:-90对应两种垂直方向，按需切换就行。

内容的提问来源于stack exchange，提问作者Ryou