flutter - FloatingActionButton 上下滚动

Question

朋友 我希望在浮动操作按钮中上下滚动页面时浮动操作按钮滑动，我应该使用哪个小部件？

我的代码

 FloatingActionButton.extended(
                onPressed: () {
                  print("hello world");
                },

                label: const Text('Update',style: TextStyle(color: Colors.white),),
                icon: const Icon(Icons.update_outlined,color: Colors.white,),
                backgroundColor: Colors.blue,
                // foregroundColor: Text(Colors.white),

              ),

标签： flutterdart

Answer 1

让我们试试，这里我们使用NotificationListener. 在 的帮助下NotificationListener，我们获取屏幕信息，当开始向上或向下滚动时，我们更改FloatingActionButtonLocation.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage()));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key key,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  ScrollController _scrollController = ScrollController();
  FloatingActionButtonLocation _floatingActionButtonLocation =
      FloatingActionButtonLocation.endFloat;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text("test"),
        ),
        floatingActionButtonLocation: _floatingActionButtonLocation,
        body: Container(
          child: NotificationListener(
            onNotification: (ScrollNotification scrollInfo) {
              setState(() {
                if (scrollInfo.metrics.pixels > 0.0) { // here you change the condition
                  _floatingActionButtonLocation =
                      FloatingActionButtonLocation.endTop;
                } else {
                  _floatingActionButtonLocation =
                      FloatingActionButtonLocation.endFloat;
                }
              });

              return true;
            },
            child: ListView(
              children: [
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                SizedBox(
                  height: 500,
                ),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
                Text("data"),
              ],
            ),
          ),
        ),
      ),
    );
  }
}