Есть ли способ исключить BottomAppBar из анимации во Flutter?

Я попытался обернуть его в виджет 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),
        ),
      ),
    );
  }
}

2 ответа

Я решил это, заключив строку в виджет Hero в BottomAppBar. Это по-прежнему позволяет переходы между страницами и не анимирует BottomAppBar, как предполагалось.

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

Однако при использовании CircularNotchedRectangle анимация замедляется.

Проблема, похоже, заключается в анимации, которая используется со стеком навигации. Следовательно, избавление от анимации во время загрузки страницы остановит эту анимацию. Я добавил 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),
            ),
          ),
        ),
      ),
    );
  }
}

Есть дополнительные способы контроля анимации для навигации здесь(О, и я избавилась от Hero() виджет)

Другие вопросы по тегам