Re[2]: qml listview header size
От: Igore Россия  
Дата: 14.09.21 10:39
Оценка:
Здравствуйте, 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();
      }
   }
}

Выглядит анимация пока не очень хорошо, но это устранится переверсткой заголовка или заменой анимации по перемещению элементов на их затухание/появление.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.