Question

我希望在Flutter中的页面之间导航时，按屏幕的上半部分显示为静态。

为尝试实现此目的，我使用了Hero小部件，并将其用于包含AppBar和在推送新页面时希望静态显示的其他内容的列。

应用栏本身保持静态，但是在动画开始时后退箭头消失，并且在动画完成后重新出现。

当页面的其余部分动画到位时，如何使后退箭头始终保持可见？

 class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Hero(
            tag: 'top',
            child: Column(
              children: <Widget>[
                AppBar(
                  title: Text('First'),
                  backgroundColor: Color.fromARGB(255, 50, 64, 182),
                ),
                Container(
                  height: 80.0,
                )
              ],
            ),
          ),
          RaisedButton(
            child: Text('Next'),
            onPressed: () {
              Navigator.pushNamed(context, '/second');
            },
          ),
        ],
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Hero(
            tag: 'top',
            child: Column(
              children: <Widget>[
                AppBar(
                  title: Text('Second'),
                ),
                Container(
                  height: 80.0,
                  // color: Colors.green,
                ),
              ],
            ),
          ),
          RaisedButton(
            child: Text('Back'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

您的代码中的设置不正确。它应该去Scaffold / Hero / your content。在执行导航时，我还使用了this simple fading page route：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('First'),
          leading: Icon(null),
          backgroundColor: Color.fromARGB(255, 50, 64, 182)),
      body: Hero(
        tag: 'top',
        child: Column(
          children: <Widget>[
            Container(height: 80.0),
            RaisedButton(
              child: Text('Next'),
              onPressed: () {
                Navigator.push(context, MyCustomRoute(builder: (context) {
                  return SecondScreen();
                }));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('Second'),
          leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {
            Navigator.pop(context);
          },),
          backgroundColor: Color.fromARGB(255, 50, 64, 182)),
      body: Hero(
        tag: 'top',
        child: Column(
          children: <Widget>[
            Container(height: 80.0),
            RaisedButton(
              child: Text('Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    // Fades between routes. (If you don't want any animation, 
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

Answer 2

您可以先做automaticallyImplyLeading: false，然后再做

leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () => Navigator.of(context).pop(),
),

Answer 3

我通过自动添加ImplyLeading：true来做到这一点

希望这可以解决您的问题！

  appBar: AppBar(
    automaticallyImplyLeading: true,
    ),

导航到新屏幕时如何保持AppBar和后退箭头固定

3 个答案: