Flutter PageView cara membuat animasi lebih cepat saat menggesek

Dec 16 2020

Saya memiliki PageView sederhana:

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

Yang ingin saya lakukan adalah saya ingin membuat animasi perubahan halaman setelah gesekan dilakukan oleh pengguna lebih cepat. Ini terjadi ketika pengguna melakukan gesekan dan mengangkat jarinya, PageView terkunci ke halaman berikutnya. Pengambilan gambar ini saat ini membutuhkan banyak waktu, memberikan UX yang buruk. Namun, tidak ada opsi untuk mengatur kecepatan dan durasi animasi gertakan.

Saya telah mencoba menambahkan pendengar:

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

Sayangnya, saya tidak dapat menemukan apa pun yang dapat membantu saya. Saya mencoba untuk menyalip gesekan dan membuat gesekan khusus dengan menelepon

  _pageController.animateToPage(0, .. PARAMS);

agar ini berfungsi, saya perlu mendeteksi kapan halaman akan berubah, sehingga saya dapat menimpa animasi dengan animateToPagemetode. Dapatkah saya mendeteksi saat halaman akan berubah di PageView? Saya tidak tertarik dengan onPageChangedpanggilan balik karena terlambat untuk menimpa animasinya.

Jawaban

6 JMooreLabs Dec 17 2020 at 04:55

Jawaban cs cowok tepat di jalurnya. Juga kredit untuk pskink . Kecepatan transisi widget PageView tidak didasarkan pada kurva animasi meskipun pendekatan terprogram adalah.

PageView sebenarnya menggunakan Simulasi Musim Semi untuk menangani transisi halaman saat digunakan dengan menggesek , sehingga properti "physics" harus diganti untuk mengubah "kecepatan animasi".

Berikut adalah cara sederhana untuk meningkatkan "kecepatan animasi" dengan menggunakan kelas Fisika Scroll kustom.

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

Ini bisa digunakan dalam konstruktor PageView seperti ini:

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

Dan jangan ragu untuk menyesuaikan parameter pegas mana pun!