组合命名路由和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

你可以直接通过页面控制器。这里是相同的例子，但有你的问题。

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

Answer 2

您真的需要使用命名路由进行导航吗？

如果没有，那么您可以只为PageView添加一个PageController，并在IconButtons中使用nextPage/previousPage函数。这只是一个通过PageController导航的粗略示例。

class SamplePageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PageController pageController = PageController(initialPage: 0);
    return PageView(
      controller: pageController,
      children: [
        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),
                  )
                ],
              )
            ],
          ),
        ),
        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),
                  )
                ],
              )
            ],
          ),
        ),
        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),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

Answer 3

我还是有点卡住了。如何在多个屏幕之间传递PageController，以便调用它的方法？

我当前的代码：

main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WeinCheckerApp',
      home: PageViewScreen(),
    );
  }
}

class PageViewScreen extends StatefulWidget {
  @override
  _PageViewScreenState createState() => _PageViewScreenState();
}

class _PageViewScreenState extends State<PageViewScreen> {
  PageController _pageController = PageController(
    initialPage: 1,
  );

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      appBar: AppBar(
        backgroundColor: Colors.red[900],
        title: Center(child: Text("WeinCheckerApp")),
      ),
      body: PageView(
        controller: _pageController,
        children: [
          SearchScreen(),
          ScanScreen(),
          FavScreen(),
        ],
      ),
    );
  }
}

ScanScreen.dart (3个屏幕中的一个)：

class ScanScreen extends StatefulWidget {
  @override
  _ScanScreenState createState() => _ScanScreenState();
}

class _ScanScreenState extends State<ScanScreen> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return SafeArea(
      minimum: EdgeInsets.only(
        left: SizeConfig.safeBlockVertical,
        right: SizeConfig.safeBlockVertical,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Expanded(
                child: IconButton(
                  icon: Icon(Icons.search),
                  color: Colors.white,
                  onPressed: () => {},
                  iconSize: SizeConfig.safeBlockVertical * 5,
                ),
              ),
              Ink(
                decoration:
                    ShapeDecoration(shape: CircleBorder(), color: Colors.white),
                child: IconButton(
                  icon: Icon(Icons.camera_alt),
                  color: Colors.grey[800],
                  onPressed: () => print("ScanButtonPressed"),
                  iconSize: SizeConfig.safeBlockVertical * 6,
                ),
              ),
              Expanded(
                child: IconButton(
                  icon: Icon(Icons.star),
                  color: Colors.white,
                  onPressed: () => {},
                  iconSize: SizeConfig.safeBlockVertical * 5,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

IconButtons应指向其他屏幕。