Question

我有一个使用页面视图构建器构建的水平表单。我想知道如何在不使用滚动物理的情况下滚动到下一页。这是我的代码

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())
        ],
      ),
    ),
  ],
);
}

}

我想在单击按钮时动画到下一页。但这根本不起作用。我该如何运作？现在它什么也没做。为了简洁起见，我已经摘录了一些不必要的代码。

Answer 1

您的代码中有太多您无法共享的变量和方法，我们无法重复使用。因此，我创建了一个以编程方式更改页面的示例：

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
    );
  }
}

如何滚动到下一页PageView Flutter

1 个答案: