页面控制器:自定义滚动
PageController 总是给出空闲作为结果 pageController.position.userScrollDirection。 我想创建一个滚动效果,我只能通过浏览网页浏览来滚动到下一页或上一页,但网页浏览正在滚动多个页面。我使用了页面控制器,但 AxisDirection 总是给出向下的方向,而 userScrolldurection 给出空闲。请帮我解决这个问题。
法典:
import 'package:ed_cell/main.dart';
import 'package:ed_cell/registration_form.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:ed_cell/auth_service.dart';
import 'package:provider/provider.dart';
import 'package:ed_cell/userinfo_page.dart';
class MyHomePage extends StatefulWidget {
_MyHomePageState myHomePageState = new _MyHomePageState();
@override
_MyHomePageState createState() => myHomePageState;
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
@override
void initState() {
pageController = PageController(initialPage: 2);
pageController.addListener(() {
changepage();
});
super.initState();
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
changepage() {
if (pageController.position.userScrollDirection ==
ScrollDirection.forward) {
print('down');
setState(() {
pageController.animateToPage(pageController.page.toInt() + 1,
duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
});
}
if (pageController.position.userScrollDirection == ScrollDirection.idle) {
print('Idle');
}
if (pageController.position.userScrollDirection ==
ScrollDirection.reverse) {
print('up');
setState(() {
pageController.animateToPage(pageController.page.toInt() - 1,
duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
});
}
}
@override
Widget build(BuildContext context) {
return Consumer<AuthService>(
builder: (BuildContext context, value, Widget child) {
return PageView(
scrollDirection: Axis.vertical,
controller: pageController,
children: [
>Padding(
>Padding(
>Padding(
],
);
});
}
}
输出:
Idle
Idle
Idle
Idle
Idle
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.19.0-4.2.pre, on Microsoft Windows [Version 10.0.18363.900], locale en-IN)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 3.6)
[√] Connected device (2 available)
• No issues found!
您可以使用NotificationListener
小部件包装Pageview
,而不是在侦听器中添加逻辑,该小部件可以截获来自其子小部件的所有通知,如下所示。
我将您的逻辑从
changePage
方法移动到onNotification
回调。此外,将动画持续时间更改为 1000 毫秒以证明它有效。
在此代码笔中可以找到一个完整的工作示例。
@override
Widget build(BuildContext context) {
return NotificationListener(
onNotification: (notification) {
if(notification is UserScrollNotification){
if (notification.direction ==
ScrollDirection.forward) {
print('down');
setState(() {
pageController.animateToPage(pageController.page.toInt() - 1,
duration: Duration(milliseconds: 1000), curve: Curves.bounceIn);
});
}
if (notification.direction ==
ScrollDirection.idle) {
print('Idle');
}
if (notification.direction ==
ScrollDirection.reverse) {
print('up');
setState(() {
pageController.animateToPage(pageController.page.toInt() + 1,
duration: Duration(milliseconds: 1000), curve: Curves.bounceIn);
});
}
}
return false;
},
child: PageView(
scrollDirection: Axis.vertical,
controller: pageController,
children: [
Center(child: Container(child: Text('Page 1......'))),
Center(child: Container(child: Text('Page 2......'))),
Center(child: Container(child: Text('Page 3......'))),
],
),
);
}