Привет!
Может кто подскажет, возникла задача, иметь у списка заголовок разной высоты в зависимости от того где scroll, нужно иметь 2 вида заголовка, в начале большой, когда начинаем пролистывать он уменьшается, плюс в заголовке меняются позиции элементов, transition тут похоже не подходит, хочется плавного изменения размеров, как то придумывать формулы что от чего зависит не уверен что будет нормально, в том смысле что не вызовет рекурсию( меняем header size меняется content height, а header size как раз зависит от content height)
---
header
big
---
1 < content мы тут
2
3
4
5
6
...
Пролистали
---
header small
---
4 < conten мы тут
5
6
7
8
...
Здравствуйте, SaZ, Вы писали:
I>>Может кто подскажет, возникла задача, иметь у списка заголовок разной высоты в зависимости от того где scroll, нужно иметь 2 вида заголовка, в начале большой, когда начинаем пролистывать он уменьшается, плюс в заголовке меняются позиции элементов, transition тут похоже не подходит, хочется плавного изменения размеров, как то придумывать формулы что от чего зависит не уверен что будет нормально, в том смысле что не вызовет рекурсию( меняем header size меняется content height, а header size как раз зависит от content height)
I>>...
SaZ>Поделитесь, если сделаете реализацию.
SaZ>Я не умею qml, но когда-то давно делал что-то похожее на виджетах. Костыль примерно следующий: заголовок и сама вьюха — это два отдельных виджета с общим парентом. В зависимости от того насколько "уехал" первый элемент наверх — уменьшаем высоту виджета-шапки. Плюс для вьюхи надо перехватывать вертикальный скролл — первые несколько прокручиваний блокировать и на их количество только уменьшать размер виджета-заголовка, чтобы уплывание первого элемента по скорости не суммировалось с уменьшением шапки.
Как я и думал, привязки header.height и contentHeight вызывают "binding loop detected", может нужно вводить переменую что сейчас сами меняем размер заголовка. Поэтому сделал в header-e два состояния big, small
states: [
State {
name: "big"
PropertyChanges { target: root; showBig: true }
//..
},
State {
name: "small"
PropertyChanges { target: root; showBig: false; height: headerHeight }
//..
}
]
и переходы между ними,
transitions: [
Transition {
to: "small"
NumberAnimation { target: root; property: "height"; easing.type: Easing.InOutQuad; duration: root.defaultDuration }
AnchorAnimation { duration: root.defaultDuration }
//..
},
Transition {
to: "big"
AnchorAnimation { duration: root.defaultDuration }
//...
}
]
возможно придется вводить дополнительные переходы или менять анимацию, так как textAlignment никак в transition не обрабатывается, меняется в самом конце и AnchorAnimation до конца расстягивается тоже в конце, из-за чего background расширяется дергано.
А в ListView добавил что если скролим вверх показываем большой header если вниз и уже доскролились до маленького размера то маленький
ListView {
onContentYChanged: {
if( contentY > -headerItem.headerHeight && verticalVelocity > 0 ) {
headerItem.showSmallSize();
} else if( verticalVelocity < 0 && contentY <= -headerItem.height ) {
headerItem.showBigSize();
}
}
}
Выглядит анимация пока не очень хорошо, но это устранится переверсткой заголовка или заменой анимации по перемещению элементов на их затухание/появление.
