实现Flutter的一键回到顶部功能

1、创建回到顶部的触发按钮的样式

just like

   children:[
    页面整体代码，
     isHidden
        ? Positioned(
        bottom: 20,
        right: 20,
        child: InkWell(
          onTap: () {
            print(_scrollController);
            _scrollController.animateTo(0.0,
                duration: Duration(milliseconds: 500),
                curve: Curves.ease);
          },
          child: ClipOval(
            child: Container(
              width: 45,
              height: 45,
              decoration:
                  BoxDecoration(color: Colors.black12),
              child: const Icon(Icons.arrow_upward_rounded),
            ),
          ),
        ))
        : Container()
   ]
 
)

2、使用组件监听组件

效果如下

完整代码展示：

NotificationListener(
                  onNotification: (ScrollNotification scrollNotification) {
                //scrollNotification.depth 标识监听的层级组件 ， crollNotification is ScrollEndNotification表示滚动停止
                  if (scrollNotification.depth == 0 &&
                      scrollNotification is ScrollEndNotification) {
                    // scrollNotification.metrics.pixels 滚送距离
                    // MediaQuery.of(context).size.height 查询设备屏幕的高度
                    if (scrollNotification.metrics.pixels >=
                        MediaQuery.of(context).size.height) {
                      isHidden = true;
                    } else {
                      isHidden = false;
                    }
                    setState(() {});
                  }
                  return true;
                },
                child:滚动组件代码
               )

3、创建滚动组件控制器

late ScrollController _scrollController;
 @override
 void initState() {
 //创建监听器
     _scrollController = ScrollController();;
    super.initState();
 }
 @override
   void dispose() {
    super.dispose();
    //销毁监听器
    _scrollController.dispose();
  }
  
  CustomScrollView(
  //使用监听器
    controller: _scrollController,
    slivers: <Widget>[]
   )
  
 
 

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //滚送控制器
  late ScrollController _scrollController;
  //控制置顶按钮的显示隐藏
  bool isHidden = true;
  @override
 void initState() {
     _scrollController = ScrollController();;
    super.initState();
 }
  @override
   void dispose() {
    super.dispose();
    //销毁监听器
    _scrollController.dispose();
  }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff7f7f8),
        appBar: AppBar(
          title: const Text(
            "首页",
            style: TextStyle(color: Color(0xffffffff)),
          ),
          centerTitle: true,
          backgroundColor: Colors.blueAccent,
        ),
        body:
            // 添加组件监听事件（滚动、焦点、手势等）
            NotificationListener(
                  onNotification: (ScrollNotification scrollNotification) {
                //scrollNotification.depth 标识监听的层级组件 ， crollNotification is ScrollEndNotification表示滚动停止
                  if (scrollNotification.depth == 0 &&
                      scrollNotification is ScrollEndNotification) {
                    // scrollNotification.metrics.pixels 滚送距离
                    // MediaQuery.of(context).size.height 查询设备屏幕的高度
                    if (scrollNotification.metrics.pixels >=
                        MediaQuery.of(context).size.height) {
                      isHidden = true;
                    } else {
                      isHidden = false;
                    }
                    print("是否显示iconya${isHidden}");
                    setState(() {});
                  }
                  return true;
                },
                child: Stack(
                  children: [
                    Padding(
                        padding: EdgeInsets.only(left: 10, right: 10, top: 10),
                          child: CustomScrollView(
                            controller: _scrollController,
                            slivers: <Widget>[
                              // 轮播图
                              SliverToBoxAdapter(
                                  child: BannerSwiper(
                                      imageBanner: imageBanner,
                                      height: 140,
                                      type: BannerSwiperPaginationType.rect)),
                           
                            ],
                          ),
                        )),
                    isHidden
                        ? Positioned(
                            bottom: 20,
                            right: 20,
                            child: InkWell(
                              onTap: () {
                                print(_scrollController);
                                _scrollController.animateTo(0.0,
                                    duration: Duration(milliseconds: 500),
                                    curve: Curves.ease);
                              },
                              child: ClipOval(
                                child: Container(
                                  width: 45,
                                  height: 45,
                                  decoration:
                                      BoxDecoration(color: Colors.black12),
                                  child: const Icon(Icons.arrow_upward_rounded),
                                ),
                              ),
                            ))
                        : Container()
                  ],
                ))
        // 定位
        );
  }
}