flowing horizontal layout ?

[djobet]

Hello, I'm trying to implement a pgn reader in rust/slint where the user would be able to see chess positions accross different variants. I have the chessboard working fine and I've used the list view + the hack described here to make a tree view out of it. That part is working fine too.
Each item of my list view is a collection of moves. I've used an horizontal layout to display them :

ListView {
        for chess_move in MoveTreeModel.chess_moves: HorizontalLayout {
            width: parent.preferred-width;
            spacing: 5px;
            Rectangle { width: chess_move.indentation * 20px; }
            Text {
                text: !chess_move.has_children ? "" : chess_move.open ? "⊟" : "⊞";
                horizontal-alignment: right;
                vertical-alignment: center;
                width: 20px;
                TouchArea {
                    clicked => { chess_move.open = !chess_move.open; }
                }
            }
            for move in chess_move.moves : Rectangle {
                HorizontalLayout {
                    Text {
                        text: move-desc(move);
                    }
                    Text {
                        text: MoveTreeModel.nag-str(move.nag);
                    }
                    Text {
                        text: " " + move.comment;
                    }
                }
                ta := TouchArea {
                }
                background: ta.has-hover ? #f5d4d4 : root.background;
            }
        }
    }

now the problem is that if, in a variant, the list of moves is too long, it will be cut. See screenshot attached

if you look at the last line, there's more to display, but the listview does not have an horizontal scrollbar (which I think is better in my case). However, I'd still like to be able to see my entire line displayed.

Ideally, I'd like to keep a layout but have it automatically create a new row when all the horizontal display area has been consumed. It would be a little bit like if I was editing some text : when the sentence is too long it would insert a new line and render the rest of the text there.

Is there a solution for this ?

PS : love slint so far !

[ogoffart]

Could you perhaps use word-wrap on the Text so that it would be several lines?

[djobet]

Hello, Each move notation is independent and can be highlighted and clicked (and perhaps tooltip-able in a next version). For that they are put in different elements (see attached slint code). this part : ``` for move in chess_move.moves : Rectangle { HorizontalLayout { Text { text: move-desc(move); } Text { text: MoveTreeModel.nag-str(move.nag); } Text { text: " " + move.comment; } } ta := TouchArea { } background: ta.has-hover ? #f5d4d4 : root.background; } ``` so each line is not composed of a single Text control but a list of Rectangle containing several texts

[vonnieda]

I need this as well, for implementing a list of tags like this:

[vonnieda]

I've written a component that does this pretty well. Not perfect, and has an issue on initial display, but I'm moving forward with it for now. See https://github.com/vonnieda/slint-flowlayout-test

[djobet]

Looks pretty simple, thank you ! Le sam. 1 févr. 2025, 18:47, Jason von Nieda ***@***.***> a écrit :

…

I've written a component that does this pretty well. Not perfect, and has an issue on initial display, but I'm moving forward with it for now. See https://github.com/vonnieda/slint-flowlayout-test — Reply to this email directly, view it on GitHub <#7243 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIATIUOIEQVFBDY36Y5CEB32NUJCTAVCNFSM6AAAAABUNX3U7OVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMBSG43TQNY> . You are receiving this because you authored the thread.Message ID: ***@***.***>