2

我试图将它包装在一个 Hero 小部件中，因为这应该可以实现我想要的。这适用于 BottomNavigationBar，但不适用于 BottomAppBar，这会给出此错误：Scaffold.geometryOf() called with a context that does not contain a Scaffold.我尝试使用 Builder 为其提供上下文，但这也不起作用。这是一个展示行为的示例应用程序：

void main() {
  runApp(
    MaterialApp(
      home: PageOne(),
    ),
  );
}

Widget _bottomNavigationBar() {
  return BottomNavigationBar(items: [
    BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('menu')),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_back), title: Text('back')),
  ]);
}

Widget _bottomAppBar() {
  return BottomAppBar(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(icon: Icon(Icons.menu), onPressed: null),
        IconButton(icon: Icon(Icons.arrow_back), onPressed: null),
      ],
    ),
  );
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Hero(
        tag: 'bottomNavigationBar',
        child: _bottomAppBar(),
      ),
      body: Center(
        child: IconButton(
          iconSize: 200,
          icon: Icon(Icons.looks_two),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => PageTwo()),
          ),
        ),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Hero(
        tag: 'bottomNavigationBar',
        child: _bottomAppBar(),
      ),
      body: Center(
        child: IconButton(
          iconSize: 200,
          icon: Icon(Icons.looks_one),
          onPressed: () => Navigator.pop(context),
        ),
      ),
    );
  }
}
4

2 回答 2

0

我通过在 BottomAppBar 中用 Hero 小部件包装 Row 解决了这个问题。这仍然允许页面转换，并且不会按预期为 BottomAppBar 设置动画。

BottomAppBar(
  child: Hero(
    tag: 'bottomAppBar',
    child: Material(
      child: Row(
        ...
      ),
    ),
  ),
);

但是，当使用 CircularNotchedRectangle 时，这会产生滞后的动画。

于 2020-02-24T08:29:21.473 回答
0

问题似乎是与导航堆栈一起使用的动画。因此，在页面加载期间摆脱动画将停止此动画。我在您的示例中将 PageRouteBuilder 添加到 PageOne 类中，以摆脱导航堆栈动画。使用下面的代码替换示例中的 PageOne 类。

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _bottomAppBar(),
      body: Center(
        child: IconButton(
          iconSize: 200,
          icon: Icon(Icons.looks_two),
          onPressed: () => Navigator.push(
            context,
            PageRouteBuilder(
              pageBuilder: (context, anim1, anim2) => PageTwo(),
              transitionsBuilder: (context, anim1, anim2, child) =>
                  Container(child: child),
            ),
          ),
        ),
      ),
    );
  }
}

这里还有其他方法可以控制 Navigation 的动画 （哦，我去掉了 Hero() 小部件）

于 2020-02-24T03:15:45.010 回答