如何使用Navigator.push更改页面，使正文和页眉动画不同，而页脚保持不变

Question

​

​

我试图使用Navigator.push转到下一页，同时只更改页面上的正文。例如，当我在materialApp中包装第2页的索引时，我才得到这个结果。但是当我决定制作动画时(它平滑地把旧页推到左边，把新页推到右边)，原来是她推旧页，但后面是完全一样的静止的页面，后来被新的页面挡住了。

我理解这一点的方式是，第一个被删除的页面是一个索引2页，它被包装在MaterialApp中，它后面是整个应用程序的固定的MaterialApp。目前，我不知道如何删除一个固定的页面。我给出了一个图片，我目前是如何在应用程序中导航，它可能不是完美的，但我不知道更好，任何帮助将不胜感激。

在许多应用程序中，我看到了这样一个动画，标题平滑地消失了，同时出现了一个新的。而此时的身体被旧页替换为流畅的运动，我真的很喜欢它，我也想做同样的事情。

Answer 1

您可以尝试在支架内使用嵌套的Navigator。

页面索引1,2和3将在物质应用程序下的根导航器中。第2页将包含另一个导航器，以满足您的目的。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<NavigatorState> outgoingKey = GlobalKey<NavigatorState>();
    return MaterialApp(
          title: 'Sample',
          home: Scaffold(
            body: PageView(
        children: <Widget>[
          Page1(), 
          Page2(navigatorKey: outgoingKey,),
          Page3(),
        ],
        pageSnapping: false,
        scrollDirection: Axis.horizontal,
        physics: BouncingScrollPhysics(),
      ),
            bottomNavigationBar: /*SomeBottomNavigationBar()*/,
          ),
        );
  }
}

class Page2 extends StatelessWidget {
  Page2({Key key, this.navigatorKey}) : super(key: key);
  final GlobalKey<NavigatorState> navigatorKey;


  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: [
        Expanded(
          child: Navigator(
            key: navigatorKey, // you need to use this to pop i.e. navigatorKey.currentState.pop()
            initialRoute: 'initialPageIndex2',
             onGenerateRoute: (RouteSettings settings) {
        WidgetBuilder _builder;
        switch (settings.name) {
          case 'nextPageForPageIndex2':
             _builder = (context) => /*NextPageForPageIndex2()*/;
             break;
          case 'initialPageIndex2':
          default:
            _builder = (context) => /*InitialPageIndex2()*/;
        }
        return MaterialPageRoute(builder: _builder);
      },
      transitionDelegate: DefaultTransitionDelegate(),
    );
            )
      ],)
    );
  }
}


class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Page1'),
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Page3'),
    );
  }
}

Answer 2

您必须使用PageView，请检查下面的代码，希望它能帮助您：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic AppBar'),
      ),
      body: PageView(
        children: <Widget>[
          Page1(),
          Page2()
        ],
        pageSnapping: false,
        scrollDirection: Axis.horizontal,
        physics: BouncingScrollPhysics(),
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child:Text("Page 1")),
      color: Colors.red,
    );
  }
}

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child:Text("Page 2")),
      color: Colors.blueAccent,
    );
  }
}