flutter - 如何滚动到下一页 PageView Flutter
问题描述
我有一个使用页面视图构建器构建的水平表单。我想知道如何在不使用滚动物理的情况下滚动到下一页。这是我的代码
import 'package:flutter/material.dart';
import 'package:flutter_repo/screens/login.dart';
import 'package:flutter_repo/utils/beziercontainer.dart';
class SignUpPage extends StatefulWidget {
SignUpPage({Key key, this.title}) : super(key: key);
final String title;
@override
_SignUpPageState createState() => _SignUpPageState();
}
class _SignUpPageState extends State<SignUpPage> {
PageController pageController;
@override
void initState() {
pageController = PageController(initialPage: 0);
super.initState();
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body:
);
}
onNext(){
if (pageController.hasClients) {
pageController.animateToPage(2, duration: Duration(milliseconds: 300), curve: Curves.easeIn);
}
}
onComplete(){
}
Widget _registrationFields() {
return PageView(
physics: NeverScrollableScrollPhysics(),
controller: pageController,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
children: <Widget>[
_entryField("First Name"),
SizedBox(
height: 20,
),
_submitButton(text: 'Continue', function: onNext())
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
children: <Widget>[
_entryField("Last Name"),
SizedBox(
height: 20,
),
_submitButton(text: 'Continue', function: onNext())
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
children: <Widget>[
_entryField("Email Address"),
SizedBox(
height: 20,
),
_submitButton(text: 'Continue', function: onNext())
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
children: <Widget>[
_entryField("Password", isPassword: true),
SizedBox(
height: 20,
),
_submitButton(text: 'Continue', function: onNext())
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
children: <Widget>[
_entryField("Confirm Password", isPassword: true),
SizedBox(
height: 20,
),
_submitButton(text: 'Continue', function: onNext())
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Column(
children: <Widget>[
_entryField("Set PIN", isPassword: true),
SizedBox(
height: 20,
),
_submitButton(text: 'Register', function: onNext())
],
),
),
],
);
}
}
我想在单击按钮时动画到下一页。但它根本不起作用。我怎样才能让它工作?现在它什么也没做。为简洁起见,我已经抽象出一些不必要的代码。
解决方案
你的代码有太多变量和方法,你没有共享给我们重复使用。所以我创建了一个以编程方式更改页面的示例:
class PageView60672934 extends StatefulWidget {
@override
_PageView60672934State createState() => _PageView60672934State();
}
class _PageView60672934State extends State<PageView60672934> {
PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
children: <Widget>[
Center(
child: Text('Page 1'),
),
Center(
child: Text('Page 2'),
),
Center(
child: Text('Page 3'),
),
],
),
bottomNavigationBar: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: previousPage,
child: Text('Previous'),
),
RaisedButton(
onPressed: nextPage,
child: Text('Next'),
)
],
),
);
}
void nextPage(){
_pageController.animateToPage(_pageController.page.toInt() + 1,
duration: Duration(milliseconds: 400),
curve: Curves.easeIn
);
}
void previousPage(){
_pageController.animateToPage(_pageController.page.toInt() -1,
duration: Duration(milliseconds: 400),
curve: Curves.easeIn
);
}
}
推荐阅读
- c++ - std::filesystem::create_directories() 在带有斜杠的路径上的返回值
- c# - C# 使用 AutoIt 中的 ImageSearch
- python - 在python中使用for循环进行集成?
- reactjs - 如何在多个通用组件之间共享/拆分 Redux Store?
- java - 实现了 2 个相同的 JMS 侦听器而不是第一个。ActiveMQ 并且无法传输和接收对象
- python - Keras 加载使用 scipy mat 保存的模型权重
- c# - C# - 简化 ValueType 转换
- search - 如何跟踪访问 bfs/dfs 中所有节点的路径
- google-cloud-sql - 为什么我在指定 TCP 时使用 Cloud SQL 代理获得“不支持的网络 unix”?
- reactjs - React Apollo 配置问题