Flutter PageView 스 와이프에서 더 빠른 애니메이션을 만드는 방법

Dec 16 2020

간단한 PageView가 있습니다.

PageView(
  controller: _pageController,
  physics: PlatformScrollPhysics.getPlatformScrollPhysics(),
  children: [
    Text("I am Text1"),
    Text("I am Text"),
  ],
  onPageChanged: (index) {
    print("page changed $index");
  },
);

제가하고 싶은 것은 사용자가 스 와이프를 한 후 페이지 변경 애니메이션을 더 빠르게 만들고 싶습니다. 사용자가 스 와이프하고 손가락을 떼면 PageView가 다음 페이지로 이동합니다. 이 스냅은 현재 너무 많은 시간이 걸리고 나쁜 UX를 제공합니다. 그러나 스냅 애니메이션 속도 및 지속 시간을 설정하는 옵션은 없습니다.

리스너를 추가하려고했습니다.

_pageController.addListener(() {
      _pageController.position // this variable holds lots of information but yet I couldnt find what i looked for
      print("LISTENERRR ${_pageController.position}");
    }); 

슬프게도 나는 나를 도울 수있는 것을 찾을 수 없었다. 나는 스 와이프를 추월하고 호출하여 맞춤 스 와이프를 만들려고했습니다.

  _pageController.animateToPage(0, .. PARAMS);

이 작업을 수행하려면 페이지가 변경 될 때를 감지하여 animateToPage메서드로 애니메이션을 덮어 쓸 수 있도록해야 합니다. PageView에서 페이지가 변경 될 때를 감지 할 수 있습니까? onPageChanged애니메이션 덮어 쓰기가 늦어 콜백에 관심이 없습니다 .

답변

6 JMooreLabs Dec 17 2020 at 04:55

CS 남자 의 대답은 올바른 방향입니다. 또한 pskink . PageView 위젯의 전환 속도는 프로그래밍 방식이 그렇더라도 애니메이션 곡선을 기반으로하지 않습니다.

PageView는 실제로 스 와이프와 함께 사용할 때 페이지 전환을 처리하기 위해 Spring 시뮬레이션을 사용 하므로 "애니메이션 속도"를 변경하려면 "physics"속성을 재정의해야합니다.

사용자 정의 Scroll Physics 클래스를 사용하여 "애니메이션 속도"를 높이는 간단한 방법이 있습니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/physics.dart';

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({ScrollPhysics parent})
      : super(parent: parent);

  @override
  CustomPageViewScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomPageViewScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 80,
        stiffness: 100,
        damping: 1,
      );
}

다음과 같이 PageView 생성자에서 사용할 수 있습니다.

PageView(... physics: const CustomPageViewScrollPhysics(),)

스프링 매개 변수를 자유롭게 조정하십시오!