QListView ~ Center items horizontally

[scgrant327]

I have two QListViews, acting much like a contacts list.

ListA has and alphabetical listing ('A' - 'Z'), that allows the user to select a letter. Once done, ListB is popuplated with the corresponding names (ie. all 'A' names, 'B' names, etc...)

A QListView seems to always align each item to the left. The issue is that in ListA, where each item is a single character, each item gets shoved all the way left. I would like to make that QListView align each item in the horizontal center, which will make them a bit more readable.

How do I do that?

[sedi]

Have you set a delegate?
That is, if you mean QtQuick's ListView. QListView is a QWidget, iirc, so the forum would be wrong.
Some code would be helpful either way!

[anda_skoa]

You can use a custom delegate or make the model provide a different value for the Qt::TextAlignmentRole.

Cheers,
_

[scgrant327]

You can use a custom delegate or make the model provide a different value for the Qt::TextAlignmentRole.

Cheers,
_

I'm not seeing how to provide the TextAlignmentRole to my Model... How do I do that?

[anda_skoa]

It is one of the roles the standard item delegate will request from the model, i.e. your model's data() method will be called with that role.

Cheers,
_

[scgrant327]

I set up my ListView like this:

ListView {
                    id: boatAlphaList
                    anchors.fill: parent
 
                    ListModel {
                        id: boatAlphaModel
                        ListElement {
                            boatAlphaName: "..."
                            boatAlphaID: "0"
                        }
                    }
 
                    Component {
                        id: boatAlphaDelegate
                        Item {
                            id: boatAlphaContainer
                            width: parent.width
                            anchors.horizontalCenter: parent.horizontalCenter
                            height: Funcs.pointHeight(14)
                            Column {
                                Text {
                                    font.pixelSize: Funcs.fontHeight(12)
                                    text: boatAlphaName
                                    horizontalAlignment: Text.AlignHCenter
                                }
                            }
 
                            MouseArea {
                                id: boatAlphaMouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: {
                                    boatAlphaList.currentIndex = index
                                }
                            }
                        }
                    }
 
                    model: boatAlphaModel
                    delegate: boatAlphaDelegate
                    highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                    highlightFollowsCurrentItem: true
                    highlightMoveDuration: 250
                    highlightMoveVelocity: 50
                    focus: true
                    spacing: Funcs.fontHeight(8)
                    clip: true
                    currentIndex: -1
                    onCurrentItemChanged: {
                        appWin.myBoatAlpha = boatAlphaModel.get(boatAlphaList.currentIndex).boatAlphaName;
                        Funcs.loadSelectedBoats();
                    }
                }
            }

ListView {
                    id: boatAlphaList
                    anchors.fill: parent

                    ListModel {
                        id: boatAlphaModel
                        ListElement {
                            boatAlphaName: "..."
                            boatAlphaID: "0"
                        }
                    }

                    Component {
                        id: boatAlphaDelegate
                        Item {
                            id: boatAlphaContainer
                            width: parent.width
                            anchors.horizontalCenter: parent.horizontalCenter
                            height: Funcs.pointHeight(14)
                            Column {
                                Text {
                                    font.pixelSize: Funcs.fontHeight(12)
                                    text: boatAlphaName
                                    horizontalAlignment: Text.AlignHCenter
                                }
                            }

                            MouseArea {
                                id: boatAlphaMouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: {
                                    boatAlphaList.currentIndex = index
                                }
                            }
                        }
                    }

                    model: boatAlphaModel
                    delegate: boatAlphaDelegate
                    highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                    highlightFollowsCurrentItem: true
                    highlightMoveDuration: 250
                    highlightMoveVelocity: 50
                    focus: true
                    spacing: Funcs.fontHeight(8)
                    clip: true
                    currentIndex: -1
                    onCurrentItemChanged: {
                        appWin.myBoatAlpha = boatAlphaModel.get(boatAlphaList.currentIndex).boatAlphaName;
                        Funcs.loadSelectedBoats();
                    }
                }
            }

To copy to clipboard, switch view to plain text mode 

So, where and how do I set the alignment?

[anda_skoa]

I set up my ListView like this:

Ah, you changed your UI from QListView to a QtQuick ListView?

Then this is easier, QtQuick ListView makes creating custom delegates easier, in fact it requires it.

So, where and how do I set the alignment?

Looks like you already do.
However, you don't specify any width for the text element, so it is as wide as the text.
So the text is by definition aligned left, right and center.

Cheers,
_

[scgrant327]

It was always a QtQuick ListView...sorry if I misspoke before.

I tried aligning the text...but it moved it to where each letter was centered under the lefthand border...

[anda_skoa]

Can you show the code you have for your delegate component now?

Alternatively to aligning the text in a resized text element, you could also try using the text in its default size and anchoring it horizontally centered.

Cheers,
_

[scgrant327]

Alternatively to aligning the text in a resized text element, you could also try using the text in its default size and anchoring it horizontally centered.
_

Isn't that what I'm already doing?

21.                                Text {
 
22.                                    font.pixelSize: Funcs.fontHeight(12)
 
23.                                    text: boatAlphaName
 
24.                                    horizontalAlignment: Text.AlignHCenter
 
25.                                }

21.                                Text {

22.                                    font.pixelSize: Funcs.fontHeight(12)

23.                                    text: boatAlphaName

24.                                    horizontalAlignment: Text.AlignHCenter

25.                                }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

Isn't that what I'm already doing?

I don't know, you are not posting enough of the delegate to see if you are e.g. horizontally anchoring the column inside its parent.
We can only see that you are not anchoring the text inside the column

Cheers,
_

[scgrant327]

Post #6 above has the full code.

[anda_skoa]

Ah, then my suggestion in comment #9 still applies.

Cheers,
_

[scgrant327]

Again... #10.

Aren't I already doing that? If not, then were am I going wrong?

[anda_skoa]

Again... #10.

But maybe I am just not seeing the correct code, can you point out where in which line in the code snippet of #10 you are using anchors?

Cheers,
_

[scgrant327]

13.                    Component {
 
14.                        id: boatAlphaDelegate
 
15.                        Item {
 
16.                            id: boatAlphaContainer
 
17.                            width: parent.width
 
18.                            anchors.horizontalCenter: parent.horizontalCenter
 
19.                            height: Funcs.pointHeight(14)
 
20.                            Column {
 
21.                                Text {
 
22.                                    font.pixelSize: Funcs.fontHeight(12)
 
23.                                    text: boatAlphaName
 
24.                                    horizontalAlignment: Text.AlignHCenter
 
25.                                }
 
26.                            }
 
27. 
 
28.                            MouseArea {
 
29.                                id: boatAlphaMouseArea
 
30.                                anchors.fill: parent
 
31.                                hoverEnabled: true
 
32.                                onClicked: {
 
33.                                    boatAlphaList.currentIndex = index
 
34.                                }
 
35.                            }
 
36.                        }
 
37.                    }

13.                    Component {

14.                        id: boatAlphaDelegate

15.                        Item {

16.                            id: boatAlphaContainer

17.                            width: parent.width

18.                            anchors.horizontalCenter: parent.horizontalCenter

19.                            height: Funcs.pointHeight(14)

20.                            Column {

21.                                Text {

22.                                    font.pixelSize: Funcs.fontHeight(12)

23.                                    text: boatAlphaName

24.                                    horizontalAlignment: Text.AlignHCenter

25.                                }

26.                            }

27. 

28.                            MouseArea {

29.                                id: boatAlphaMouseArea

30.                                anchors.fill: parent

31.                                hoverEnabled: true

32.                                onClicked: {

33.                                    boatAlphaList.currentIndex = index

34.                                }

35.                            }

36.                        }

37.                    }

To copy to clipboard, switch view to plain text mode 

Lines 18 & 24?

[anda_skoa]

Line 18 has no effect, since the item is as wide as its parent.

Line 24 is no anchor and, as previously explained, has no effect since the Text element has just enough width to hold the text.
Basically the same result as line 18.

In order to center something inside something else, the first needs to be smaller than the latter, or the latter needs to be bigger.

So what you have is
- a Text element that is just wide enough to display the text
- a Column element that is just as wide and positioned at 0/0 (default position)

What you want is
- a Column element that is larger than the Text, probably as wide as its parent
- either a Text element horizontally anchored in it or a Text element with the same width and using alignment

Cheers,
_

[scgrant327]

Thanks for pointing me in the right direction:

What you want is
- a Column element that is larger than the Text, probably as wide as its parent
- either a Text element horizontally anchored in it or a Text element with the same width and using alignment