Flutter学习-通过上下滑动打开新页面

最新推荐文章于 2024-06-27 18:07:02 发布

wenwst

最新推荐文章于 2024-06-27 18:07:02 发布

阅读量1.3k

点赞数

文章标签： flutter

本文链接：https://blog.csdn.net/wenwst/article/details/102623372

版权

笔记

Flutter 监听滚动打开新的页面

import 'dart:ui' as prefix0;
import 'package:flutter/material.dart';
class PersonalPage extends StatefulWidget {
  @override
  PersonalPageState createState() {
    return new PersonalPageState();
  }
}
class PersonalPageState extends State<PersonalPage> {
// 在这里创建一个监听.
  ScrollController scrollController = new ScrollController();
  @override
  void initState() {
    scrollController.addListener(() {
    // 在这里监听滚动,反正只要一动，就跳到新的页面，当然这个是没有任务的业务要求的，就是试着玩.
      if (scrollController.offset < 20) {
        Navigator.pushNamed(context, "/home");
      } else if (scrollController.offset >= 20) {
        Navigator.pushNamed(context, "/home");
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("个人信息"),
          ),
          body: Scrollbar(
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                ListView.builder(
                  itemCount: 100,
                  itemExtent: 50,
                  controller: scrollController,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text("编号： $index"),
                    );
                  },
                ),
              ],
            ),
          ),
        ),
        title: "个人信息",
        theme: ThemeData(
          primaryColor: Colors.grey,
        ));
  }
}

以下代码是稍微完整一点的。

import 'dart:ui' as prefix0;
import 'package:flutter/material.dart';

class PersonalPage extends StatefulWidget {
  @override
  PersonalPageState createState() {
    return new PersonalPageState();
  }
}

class PersonalPageState extends State<PersonalPage> {
  ScrollController scrollController = new ScrollController();
  bool isTop = false;
  String percent = "0%";
  @override
  void initState() {
    scrollController.addListener((){
      //print(scrollController.offset);
      if(scrollController.offset<500 && isTop) {
        setState(() {
          isTop = false;
        });
      } else if (scrollController.offset >= 500 && isTop == false) {
        setState(() {
          isTop = true;
          Navigator.pushNamed(context, "/home");
        });
      }
    });
  }
  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("个人信息"),
        ),
        body: Scrollbar(
          child: NotificationListener<ScrollNotification>(
            onNotification: (ScrollNotification sn) {
              double progress = sn.metrics.pixels / sn.metrics.maxScrollExtent;
              setState(() {
                percent = "${(progress*100).toInt()}%";
              });
            },
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                ListView.builder(
                  itemCount: 100,
                    itemExtent: 50,
                    controller: scrollController,
                    itemBuilder: (context,index) {
                  return ListTile(title: Text("编号： $index"),);
                },
                ),
                CircleAvatar(
                  backgroundColor: Colors.black12,
                  radius: 30,
                  child: Text(percent,style: TextStyle(color: Colors.red),),
                )
              ],
            ),
          ),
        ),
      ),
      title: "个人信息",
      theme: ThemeData(
        primaryColor: Colors.grey,
      )
    );

  }
}