Intro 🤗

本稿では,iPhoneのScrolsTop機能を簡単な例で紹介し,スクリーンがScollViewの場合の注意点について議論した.

scrollsToTop 📌

iPhoneでは、画面がScrollViewで、ユーザーがステータスバーを表示するジェスチャーを見ると、ユーザーにスクロールを要求します.
次の例は、scroolsTop機能が正常に動作している場合に表示できるイベントです.

#例01（通常動作）

class ScrollToTopGestureExample extends StatefulWidget {
  @override
  _ScrollToTopGestureExampleState createState() => _ScrollToTopGestureExampleState();
}

class _ScrollToTopGestureExampleState extends State<ScrollToTopGestureExample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: customAppBar("Scroll To Top Gesture Example"),
        body: ListView(
          children: [
            for(int i = 0; i < 100; i++)
              Container(
                height: 100.0,
                alignment: Alignment.center,
                color: i % 2 == 0 ? Colors.grey[100] : Colors.white,
                child: Text("$i"),
              ),
          ],

        ));
  }
}

注意事項📌

公式ホームページには、次の注意事項が表示されます.On iPhone, the scroll-to-top gesture has no effect if there is more than one scroll view on-screen that has scrollsToTop set to true.これに基づいて、複数のスクロールビューがある場合、スクロールアップのジェスチャーは消えます.これらの条件を満たす例は、上記の例にスクロールコントローラを追加するだけです.

#例02(複数のスクロールビューがある場合)

class ScrollToTopGestureExample extends StatefulWidget {
  @override
  _ScrollToTopGestureExampleState createState() => _ScrollToTopGestureExampleState();
}

class _ScrollToTopGestureExampleState extends State<ScrollToTopGestureExample> {

  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: customAppBar("Scroll To Top Gesture Example"),
        body: ListView(
          controller: _scrollController,
          children: [
            for(int i = 0; i < 100; i++)
              Container(
                height: 100.0,
                alignment: Alignment.center,
                color: i % 2 == 0 ? Colors.grey[100] : Colors.white,
                child: Text("$i"),
              ),
          ],

        ));
  }
}

#例03（トラブルシューティング）

例02では、ScrollControllerを追加した後、ステータスバーをクリックしてscrollsTop機能が機能しないことを確認します.
コントローラを使用しない場合は問題ありません.コントローラを使用する必要がある場合は、(ex. 무한 스크롤)で次のソリューションを適用できます.

class ScrollToTopGestureExample extends StatefulWidget {
  @override
  _ScrollToTopGestureExampleState createState() => _ScrollToTopGestureExampleState();
}

class _ScrollToTopGestureExampleState extends State<ScrollToTopGestureExample> {
  List contents = [for (int i = 0; i < 10; i++) i];

  @override
  Widget build(BuildContext context) {
  
    return Scaffold(
        appBar: customAppBar("Scroll To Top Gesture Example"),
        body: NotificationListener(
          onNotification: (Notification notification) {
            ScrollController scrollController = PrimaryScrollController.of(context);

            if (scrollController.offset == scrollController.position.maxScrollExtent && notification is ScrollEndNotification) {
              setState(() {
                contents.addAll([1, 2, 3, 4, 5]);
              });
            }

            return false;
          },
          child: ListView.builder(
            controller: PrimaryScrollController.of(context),
            itemBuilder: (context, index) {
              return Container(
                height: 100.0,
                alignment: Alignment.center,
                child: Text("$index"),
              );
            },
            itemCount: contents.length,
          ),
        ));
  }
}