Flutter PageView cách tạo hoạt ảnh nhanh hơn khi vuốt

Dec 16 2020

Tôi có một PageView đơn giản:

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

Điều tôi muốn làm là tôi muốn làm cho hoạt ảnh thay đổi trang sau khi người dùng thực hiện thao tác vuốt nhanh hơn. Điều này xảy ra khi người dùng thực hiện thao tác vuốt và nhấc ngón tay ra, PageView sẽ chuyển sang trang tiếp theo. Việc chụp nhanh này hiện mất rất nhiều thời gian, cung cấp trải nghiệm người dùng không tốt. Tuy nhiên, không có tùy chọn để đặt tốc độ và thời lượng hoạt ảnh nhanh.

Tôi đã cố gắng thêm một người nghe:

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

Đáng buồn thay, tôi không thể tìm thấy bất cứ điều gì có thể giúp tôi. Tôi đã cố gắng vượt qua thao tác vuốt và thực hiện thao tác vuốt tùy chỉnh bằng cách gọi điện

  _pageController.animateToPage(0, .. PARAMS);

để điều này hoạt động, tôi cần phát hiện khi một trang sắp thay đổi, để tôi có thể ghi đè hoạt ảnh bằng animateToPagephương thức. Tôi có thể phát hiện khi nào một trang sắp thay đổi trong PageView không? Tôi không quan tâm đến việc onPageChangedgọi lại vì đã muộn để ghi đè hoạt ảnh.

Trả lời

6 JMooreLabs Dec 17 2020 at 04:55

Câu trả lời của anh chàng cs là đúng hướng. Cũng tín dụng cho pskink . Tốc độ chuyển đổi của tiện ích PageView không dựa trên đường cong hoạt ảnh mặc dù phương pháp lập trình là như vậy.

PageView thực sự sử dụng Mô phỏng mùa xuân để xử lý các chuyển đổi trang khi được sử dụng với thao tác vuốt , do đó, thuộc tính "vật lý" phải được ghi đè để thay đổi "tốc độ hoạt ảnh".

Đây là một cách đơn giản để tăng "tốc độ hoạt ảnh" bằng cách sử dụng lớp Vật lý cuộn tùy chỉnh.

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,
      );
}

Nó có thể được sử dụng trong phương thức khởi tạo PageView như thế này:

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

Và thoải mái điều chỉnh bất kỳ thông số lò xo nào!