在颤动中处理滚动方向

Question

我有一个虚拟的项目列表，我想在向上滑动的方向上显示一个浮动操作按钮并在向下的方向上隐藏它。我怎样才能实现这个功能？

class _MyHomePageState extends State<MyHomePage> {
  bool upDirection = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          child: Row(
            children: <Widget>[
              Expanded(
                  child: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context,index){
                      return ListTile(
                        title: Text(index.toString()),
                      );
                    },
                  ),
              )
            ],
          ),
        ),
      ),
      floatingActionButton:upDirection==true?FloatingActionButton(onPressed: (){},):Container() ,
    );
  }
}

Answer 1

所有你需要的是

ScrollController.position.userScrollDirection

设置一个ScrollController监听器并听取方向。这是完整的代码。

bool upDirection = true, flag = true;
ScrollController _controller;

@override
void initState() {
  super.initState();
  _controller = ScrollController()
    ..addListener(() {
      upDirection = _controller.position.userScrollDirection == ScrollDirection.forward;

      // makes sure we don't call setState too much, but only when it is needed
      if (upDirection != flag) 
        setState(() {});


      flag = upDirection;
    });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                controller: _controller,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(index.toString()),
                  );
                },
              ),
            )
          ],
        ),
      ),
    ),
    floatingActionButton: upDirection == true ? FloatingActionButton(onPressed: () {}) : Container(),
  );
}