Flutter 实现iOS双击状态栏返回列表顶端的效果

在 Flutter 中实现 iOS 双击状态栏返回列表顶端的效果，需要使用 ScrollController 和 GestureDetector。

首先在 ListView 中设置一个 ScrollController，用来监听列表的滑动和位置变化。在 initState 中初始化 ScrollController，并在 dispose 中清理资源：

ScrollController _scrollController;

@override
void initState() {
  super.initState();
  _scrollController = ScrollController();
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

ListView(
  controller: _scrollController,
  // ...
)

然后创建一个 GestureDetector，监听状态栏的双击事件，需要设置 onDoubleTap 回调来触发返回顶部的操作。在回调中使用 animateTo 方法来平滑滚动到列表顶部：

GestureDetector(
  onTap: () {},
  onDoubleTap: () {
    _scrollController.animateTo(0,
        duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
  },
  child: // ...
)

完整示例代码如下：

import 'package:flutter/material.dart';

class ScrollToTopPage extends StatefulWidget {
  @override
  _ScrollToTopPageState createState() => _ScrollToTopPageState();
}

class _ScrollToTopPageState extends State<ScrollToTopPage> {
  ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {},
        onDoubleTap: () {
          _scrollController.animateTo(0,
              duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
        },
        child: ListView.builder(
          controller: _scrollController,
          itemCount: 50,
          itemBuilder: (context, index) => ListTile(
            title: Text('Item $index'),
          ),
        ),
      ),
    );
  }
}

关于设置状态栏的双击事件可以查看 flutter_statusbar_manager 插件。在 iOS 中显示状态栏的插件为 flutter_statusbar_manager，需要在 Info.plist 中设置 UIViewControllerBasedStatusBarAppearance 为 false，然后在需要显示状态栏的页面中调用 FlutterStatusbarManager.showStatusBar 方法即可。