如何滾動到下一頁 PageView Flutter

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