flutter - 结合命名路由和 PageView

Question

我对 Flutter 和构建我的第一个真正的应用程序还很陌生。我实现了一个路由器类并从用于导航的图标按钮生成命名路由。下一步，我还想通过滑动在 3 个屏幕之间切换。

我的结构是:

main.dart (returns MaterialApp)  
FirstScreen.dart (returns Scaffold)  
SecondScreen.dart (returns Scaffold)  
ThirdScreen.dart (returns Scaffold)

我试图通过向 main.dart 添加一个 Pageview 小部件来实现滑动功能，但是当我切换到使用 IconButtons 导航并切换到另一个屏幕时，滑动功能将不再起作用。我想问题很明显，因为我不在 main.dart 上了，它不会加载 PageView。但是我缺少一种干净的方法来集成这两个功能。

非常高兴能得到所有帮助，提前致谢!

Answer 1

你可以只传递页面 Controller 。这是同一个例子，但有你的问题。

class SamplePageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PageController pageController = PageController(initialPage: 0);
    return PageView(
      controller: pageController,
      children: [
        First(pageController: pageController),
        Second(pageController: pageController),
        Third(pageController: pageController),
      ],
    );
  }
}

class Third extends StatelessWidget {
  const Third({
    Key key,
    @required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Third page'),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                color: Colors.yellow,
                child: Text('Previous'),
                onPressed: () => pageController.previousPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class Second extends StatelessWidget {
  const Second({
    Key key,
    @required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Second page'),
          Row(
            children: [
              FlatButton(
                color: Colors.yellow,
                child: Text('Previous'),
                onPressed: () => pageController.previousPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              ),
              FlatButton(
                color: Colors.orange,
                child: Text('Next'),
                onPressed: () => pageController.nextPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              )
            ],
          )
        ],
      ),
    );
  }
}

class First extends StatelessWidget {
  const First({
    Key key,
    @required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('First page'),
          Row(
            children: [
              FlatButton(
                color: Colors.orange,
                child: Text('Next'),
                onPressed: () => pageController.nextPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              )
            ],
          )
        ],
      ),
    );
  }
}