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

Answer 2

虽然上述解决方案回答了这个问题，但我认为它有点低效，因为每次发生方向变化时您都会调用 setState()。这可能适用于小型应用程序，但在大型复杂应用程序中可能会导致长时间滞后，因为当您调用 setState() 时，整个小部件树会重建自身及其后续子项。

我的解决方案？使用 Provider 和 Consumer。

Provider acts like a reference to a widget and a certain variable of which you want to keep a track of and using consumer you can listen to change when you need and where you need.

优于 setState()，当调用消费者的 builder 方法时，它只会重建监听它的小部件（在您的情况下是底部应用栏），而不会影响小部件树的其余部分。

同样，Provider 是 Flutter 状态管理的支柱，所以我强烈建议他们尽快知道。

Answer 3

用SingleChildScrollView包装您的容器。在容器内使用iconButton而不是floatActionButton

颤动处理滚动方向

3 个答案: