Ошибка анимации перехода при нажатии на новый экран на нижней панели навигации

Question

У меня есть MaterialApp, в котором он имеет IndexedStack в качестве домашней страницы, чтобы использовать его для BottomBarNavigation. Теперь в одной из «вкладок» я хочу, чтобы переходы страниц выполнялись так же, как это делается в iOS.

Часть трюка можно выполнить с помощью CupertinoPageRoute в Navigator.pu sh, как следует:

Navigator.of(context, rootNavigator: true).push(CupertinoPageRoute<bool>(
      //fullscreenDialog: true,
      builder: (BuildContext context) => new DescriptionPage(),

    ));

, в результате чего новая страница будет скользить справа как приложение iOS. Но я также хочу, чтобы первая страница была смещена вправо с помощью параллакса, как сказано в документации CupertinoPageRoute:

Страница также смещается влево в параллаксе, когда появляется другая страница для ее покрытия.

это будет сделано, если сама первая страница будет создана с помощью «Navigator.pu sh (CupertinoPageRoute ...», но, как я уже говорил, моя первая страница является одной из главных страниц дом приложения.

текущий стиль перехода: новая страница скользит справа, но текущая страница не смещается влево

, как вы можете видеть, текущая страница не смещается влево. Может быть способ заставить виджет текущей страницы действовать как виджет, созданный CupertinoPageRoute, так что текущая страница сама сдвигается влево при входе новой страницы.

Answer 1

Если вы запустите приведенный ниже код, вы увидите, что первая вкладка делает то, что вы видите, а вторая вкладка - это то, что вы ожидаете.

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CupertinoStoreHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class CupertinoStoreHomePage extends StatelessWidget {
  const CupertinoStoreHomePage({title});

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.bell),
            title: Text('TAB1'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.bell_solid),
            title: Text('TAB2'),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return CupertinoTabView(builder: (context) {
              return CupertinoPageScaffold(
                child: TAB1(),
              );
            });
          case 1:
            return CupertinoTabView(
              builder: (context) {
                return CupertinoPageScaffold(
                  child: TAB2(),
                );
              },
              routes: {
                '/screen': (ctx) => NextScreen(),
              },
            );

          default:
            return Container();
        }
      },
    );
  }
}

class TAB1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TAB1"),
      ),
      body: Container(
        child: FlatButton(
          child: Text("Go To Next Screen"),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (_) => NextScreen())),
        ),
      ),
    );
  }
}

class TAB2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TAB2"),
      ),
      body: Container(
          child: FlatButton(
        child: Text("Go To Next Screen"),
        onPressed: () => Navigator.of(context).pushNamed("/screen"),
      )),
    );
  }
}

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Scaffold(
        appBar: AppBar(
          title: Text("NextScreen"),
        ),
        body: Container(
          child: Text("NextScreen"),
        ),
      ),
    );
  }
}

При использовании Navigator.of (ctx) .pu sh приложение пытается создать sh новый экран на root навигаторе, который в вашем случае является панелью вкладок, но не может заменить панель вкладок, поэтому вы видите неполную анимацию. Но при втором подходе, когда вы определили маршрут на соответствующей вкладке и используете имя Pu sh, приложение использует навигатор, назначенный этой вкладке, и, следовательно, ожидаемый результат.

Счастливое кодирование!

Answer 2

В параметре theme: MaterialApp попробуйте следующее:

MaterialApp(
  theme: ThemeData( //or replace with your custom ThemeData.copywith()
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder()
      }
    ),
  ),
)