检测可滚动小部件是手动滚动还是以编程方式滚动

时间:2020-10-21 06:36:48

标签: flutter dart flutter-layout flutter-animation

有没有一种方法可以检测到是否滚动

  1. PageViewPageController)或
  2. Scrollable小部件(ScrollController

由用户手动完成,或通过编程方式使用控制器对象上的jumpTo()animateTo()

NotificationListener中包装可滚动窗口小部件也不会给我们提供任何此类回调或标志。

我找到了一个解决方案,但是我发现它有点怪异,想知道是否有更好的解决方案:

我的解决方案:Scrollable小部件包装在GestureDetector小部件中,并使用onTapUponTapDown回调函数并设置标志(isScrollManual)来检查滚动是否为手动或编程方式。

代码如下:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyPageControllers(),
        ),
      ),
    );
  }
}

class MyPageControllers extends StatefulWidget {
  @override
  _MyPageControllersState createState() => _MyPageControllersState();
}

class _MyPageControllersState extends State<MyPageControllers> {

  PageController _controller1;
  bool isScrollManual = false;

  @override
  void initState() {
    super.initState();
    _controller1 = PageController();

    _controller1.addListener(() {
      if(isScrollManual){
        /// Manual Scroll
      }else{
        /// Programmatic scroll
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: GestureDetector(
        onTapDown: (tapDownDetails){
          isScrollManual = true;
          setState(() {});
        },
        onTapUp: (tapUpDetails){
          isScrollManual = false;
          setState(() {});
        },
        child: PageView.builder(
          controller: _controller1,
          itemBuilder: _itemBuilder,
        ),
      ),
    );
  }

  Widget _itemBuilder(BuildContext context, int index) =>
      Container(
        color: Colors.primaries[index % Colors.primaries.length],
        child: Center(
          child: Text(
            index.toString(),
            style: TextStyle(color: Colors.white, fontSize: 60),
          ),
        ),
      );
}

0 个答案:

没有答案