flutter回到顶部代码片

点击按钮返回顶部

折叠代码块DART 复制代码

import 'package:flutter/material.dart';

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

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

class _ScrollControllerRouteState extends State<ScrollControllerRoute> {
  bool _showToTopBtn = false;
  Function _moveToTop = () {};

  void isShowToTopBtn(value) {
    setState(() {
      print("修改结果为$value");
      _showToTopBtn = value;
    });
  }

  void moveToTop(func) {
    setState(() {
      _moveToTop = func;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '滚动控制器',
      initialRoute: '/',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      routes: {
        '/': (context) => Scaffold(
              appBar: AppBar(
                title: Text(
                  '滚动控制器',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              body: ScrollControllerTestRoute(
                isShowToTopBtnChanged: isShowToTopBtn,
                moveToTopFunc: moveToTop,
              ),
              floatingActionButton: !_showToTopBtn
                  ? null
                  : FloatingActionButton(
                      child: Icon(
                        Icons.arrow_upward,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        //返回到顶部时执行动画
                        _moveToTop();
                      }),
            ),
      },
    );
  }
}

class ScrollControllerTestRoute extends StatefulWidget {
  ScrollControllerTestRoute(
      {required this.isShowToTopBtnChanged, required this.moveToTopFunc});
  //是否显示“返回到顶部”按钮
  final ValueChanged<bool> isShowToTopBtnChanged;
  final void Function(dynamic func) moveToTopFunc;
  @override
  createState() => _ScrollControllerTestRouteState();
}

class _ScrollControllerTestRouteState extends State<ScrollControllerTestRoute> {
  ScrollController _controller = ScrollController();
  bool _showToTopBtn = false;

  @override
  void initState() {
    super.initState();
    //监听滚动事件，打印滚动位置
    _controller.addListener(() {
      print(_controller.offset); //打印滚动位置
      if (_controller.offset < 1000 && _showToTopBtn) {
        _showToTopBtn = !_showToTopBtn;
        widget.isShowToTopBtnChanged(_showToTopBtn);
      } else if (_controller.offset >= 1000 && !_showToTopBtn) {
        _showToTopBtn = !_showToTopBtn;
        widget.isShowToTopBtnChanged(_showToTopBtn);
        //返回到顶部时执行动画
        widget.moveToTopFunc(() {
          _controller.animateTo(
            .0,
            duration: Duration(milliseconds: 200),
            curve: Curves.ease,
          );
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: ListView.builder(
          itemCount: 100,
          itemExtent: 50.0, //列表项高度固定时，显式指定高度是一个好习惯(性能消耗小)
          controller: _controller,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text("$index"),
            );
          }),
    );
  }

  @override
  void dispose() {
    //为了避免内存泄露，需要调用_controller.dispose
    _controller.dispose();
    super.dispose();
  }
}