Question

我正在使用PageView.builder管理一组5页。 PageView小部件允许用户向左/向右滑动以在页面之间导航。我还可以使用PageController以编程方式导航到不同的页面，例如按一下按钮。这是所有期望的行为。话虽如此，在第一页上，我有一个要允许用户继续之前要验证的表单。使用该按钮，我可以在导航之前调用表单的验证方法进行检查，如下所示：

          onPressed: () {
            if (_formKey.currentState.validate()) {
              //Navigate to next page...
              _pageController.nextPage(duration: Duration(milliseconds: 300), curve: Curves.linear);
            }
          },

我的问题是：在允许用户使用滑动手势导航之前，如何执行此验证？

谢谢

Answer 1

您可以修改PageView的物理特性：

GlobalKey<FormState> _formKey = GlobalKey<FormState>();
StreamController isValidController = StreamController();
bool isValid = false;

List pages;

@override
void initState() {
  super.initState();

  isValidController.stream.listen((value){
    setState(() {
      isValid = value;
    });
  });

  pages = [
    FormPage(isValidController: isValidController, formKey: _formKey,),
    SecondPage(),
    ThirdPage(),
    FourthPage(),
    FifthPage(),
  ];
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: PageView.builder(
      physics: isValid ? ClampingScrollPhysics() : NeverScrollableScrollPhysics(), //changing here
      itemBuilder: (_, index) {
        return pages[index];
      },
    ),
  );
}

@override
void dispose() {
  isValidController.close();
  super.dispose();
}

并在带有表单的页面中：

class FormPage extends StatelessWidget {

  final GlobalKey<FormState> formKey;
  final StreamController isValidController;

  const FormPage({Key key, this.formKey, this.isValidController});

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Align(
        child: RaisedButton(
          onPressed: () {
            if (formKey.currentState.validate()) {
                isValidController.add(true);
            }
          },
        ),
      ),
    );
  }
}

如何为多页PageView的首页自定义页面滚动行为？

1 个答案: