Flutter - 如何为 NavigationRail 页面过渡设置动画 [windows]答案

【问题标题】：Flutter - How to animate NavigationRail page transition [windows]Flutter - 如何为 NavigationRail 页面过渡设置动画 [windows]
【发布时间】：2022-10-08 22:31:20
【问题描述】：

我已经这样实现了 NavigationRail：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            destinations: const [
              NavigationRailDestination(
                  icon: Icon(Icons.home), label: Text("Home")),
              NavigationRailDestination(
                  icon: Icon(Icons.settings), label: Text("Settings"))
            ],
            selectedIndex: _selectedIndex,
          ),
          Expanded(child: pageBuilder())
        ],
      ),
    );
  }

  Widget pageBuilder() {
    switch (_selectedIndex) {
      case 0:
        return const _HomePage();
      case 1:
        return const _SettingsPage();
      default:
        return const _HomePage();
    }
  }
}

和_主页：

class _HomePage extends StatefulWidget {
  const _HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<_HomePage> {

  @override
  Widget build(BuildContext context) {
    return Container(child: Text("HomePage"));
}

和设置页面是相同的，但改为“SettingsPage”。

问题是，如何为这些页面之间的过渡设置动画？我不能使用 Route 并在 switch 语句下调用 Navigator.of(context).push(_pageRouter()) ，因为它会引发有关构建等的错误（如果需要，我可以提供很长的错误）。

有什么方法可以在不使用 Route 的情况下实现这一目标？或一些解决方法？

【问题讨论】：

标签： windows flutter dart animation navigation

【解决方案1】：

有多种动画类型。您可以使用切换器在动画之间切换这是小部件的link。它将通过动画自动更改小部件。

AnimatedSwitcher(
    duration: const Duration(milliseconds: 500),
    transitionBuilder: (Widget child, Animation<double> animation) {
        return ScaleTransition(scale: animation, child: child);
    },
    child: pageBuilder(),
)

【讨论】：