I would like to have centered items in QML ListView and therefore I've added following code of my ListView:
import QtQuick 2.0import QtMultimedia 5.5import QtQuick.Controls 1.3import QtQuick.Extras 1.4import QtQuick.Layouts 1.2import QtQuick.Window 2.2import QtTest 1.1Rectangle { id: ueKeypad width: ueMainColumnLayout.implicitWidth+2*radius height: ueMainColumnLayout.implicitHeight+2*radius color: "grey" radius: 8 border.color: "#99c6f0" border.width: 4 ColumnLayout { id: ueMainColumnLayout anchors.fill: parent anchors.margins: radius spacing: 4 RowLayout { id: ueTextLayout Text { id: ueStaffLoginText text: qsTr("Staff Login") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter font.family: "Padauk" textFormat: Text.RichText font.pointSize: 16 font.bold: true color: ueKeypad.border.color Layout.fillWidth: true } // ueStaffLoginText } // ueTextLayout RowLayout { id: uePeopleViewLayout ListView { id: uePeopleView keyNavigationWraps: true spacing: 4 antialiasing: true model: uePeopleModel Layout.fillWidth: true Layout.fillHeight: false //Layout.minimumWidth: 64 Layout.minimumHeight: 64 //Layout.preferredWidth: 96 Layout.preferredHeight: 96 //Layout.maximumWidth: 128 Layout.maximumHeight: 128 orientation: ListView.Horizontal layoutDirection: Qt.LeftToRight snapMode: ListView.SnapToItem highlightRangeMode: ListView.ApplyRange Component.onCompleted: { var newIndex=(count%2==0)?(count/2):(Math.round(count/2)); positionViewAtIndex(newIndex, ListView.Center); currentIndex=newIndex; print(newIndex) } // onCompleted - center items delegate: Rectangle { id: uePersonDelegate width: 32 height: 32 ColumnLayout { id: uePersonDelegateMainLayout anchors.fill: parent anchors.margins: radius RowLayout { id: uePersonDelegateImageLayout Image { id: uePersonImage antialiasing: true fillMode: Image.PreserveAspectFit source: "image://uePeopleModel/"+model.ueRoleImage } // uePersonImage } // uePersonDelegateImageLayout RowLayout { id: uePersonDelegateNameLayout Text { id: ueTextPersonName color: "#ffffff" text: model.ueRoleName font.bold: true font.pixelSize: 16 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } // ueTextPersonName } // uePersonDelegateNameLayout } // uePersonDelegateMainLayout } // uePersonDelegate add: Transition { NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 100 } // NumberAnimation NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 100 } // NumberAnimation } // Transition displaced: Transition { NumberAnimation { properties: "x,y"; duration: 100; easing.type: Easing.OutBounce } // NumberAnimation } // Transition } // uePeopleView } // uePeopleViewLayout RowLayout { id: ueTumblerLayout Tumbler { id: ueLoginKeypadTumbler Layout.fillWidth: true Layout.fillHeight: false height: 100 antialiasing: true TumblerColumn { id: ueNumericTumblerColumnDigit1000 model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] } // ueNumericTumblerColumnDigit1000 TumblerColumn { id: ueNumericTumblerColumnDigit100 model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] } // ueNumericTumblerColumnDigit100 TumblerColumn { id: ueNumericTumblerColumnDigit10 model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] } // ueNumericTumblerColumnDigit10 TumblerColumn { id: ueNumericTumblerColumnDigit1 model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] } // ueNumericTumblerColumnDigit1 } // ueLoginKeypadTumbler } // ueTumblerLayout RowLayout { id: ueButtonsLayout Button { id: ueButtonLogin Layout.fillWidth: true text: qsTr("Login") } // ueButtonLogin Button { id: ueButtonClear Layout.fillWidth: true text: qsTr("Clear") } // ueButtonClear Button { id: ueButtonQuitApp Layout.fillWidth: true text: qsTr("Quit") } // ueButtonQuitApp } // ueButtonsLayout } // ueMainColumnLayout states: [ State { name: "ueStateLoginOk" PropertyChanges { target: ueKeypad border.color: "#00ff00" } PropertyChanges { target: ueLoginText color: "#00ff00" } }, // ueStateLoginOk State { name: "ueStateLoginOkFailed" PropertyChanges { target: ueKeypad border.color: "#ff0000" } PropertyChanges { target: ueLoginText color: "#ff0000" } } // ueStateLoginOkFailed ] // states} // ueKeypadNow, print(newIndex) statement prints out correct value 3 (in my case, since at the moment I have 5 items), and I would like the 3rd item to be in the center of ListView and other two items on the left side and the right side. Is this possible? And out of scope of this question, why Transitions also does not work, taken from example?
I've also set highlightRangeMode: ListView.ApplyRange taken from comment hint .
Here is a screenshot of the problem:
