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).boa tAlphaName;
Funcs.loadSelectedBoats();
}
}
}

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. }

[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. }



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