笔记大全

Flutter之Navigator的高级用法有哪些

更新时间：2023-10-26

Flutter Navigator的基本概念

Flutter Navigator是一个管理路由栈的组件，它提供了在页面之间进行导航和传值的功能。当我们使用Navigator.push()时，Navigator会将新的页面压入栈中，使用Navigator.pop()时，Navigator会将当前页面弹出栈，返回上一个页面。

下面是一个简单的示例代码，其中通过Navigator.push()跳转到了新的页面，页面中通过Navigator.pop()返回上一个页面。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Navigator"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("跳转到下一页"),
          onPressed: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => NextPage()));
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("下一页"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("返回上一页"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Flutter Navigator的高级用法之路由传值

通过Navigator.push()跳转到下一个页面时，我们可以通过构造函数或者是静态方法将一些数据传递到下一个页面中，以便下一个页面根据传递的数据进行展示或处理逻辑。

下面是一个简单的示例代码，其中通过构造函数将一段文本传递到了下一个页面，在页面中进行展示。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Navigator"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("跳转到下一页传递参数"),
          onPressed: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => NextPage(
                          title: "下一页",
                          content: "这是传递的文本内容",
                        )));
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  final String title;
  final String content;

  NextPage({@required this.title, @required this.content});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(content),
      ),
    );
  }
}

Flutter Navigator的高级用法之命名路由

通过命名路由，我们可以像使用静态方法一样跳转到指定的页面，并传递参数。在使用命名路由时，我们需要将所有页面的路由名称在MaterialApp中进行注册，这样才能够通过路由名称进行跳转。

下面是一个简单的示例代码，其中使用命名路由跳转到了下一个页面，并传递了一段文本。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Navigator"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("跳转到下一页通过路由名称传递参数"),
          onPressed: () {
            Navigator.pushNamed(
              context,
              "/next",
              arguments: {"content": "这是通过命名路由传递的文本内容"},
            );
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context).settings.arguments as Map;
    return Scaffold(
      appBar: AppBar(
        title: Text("下一页"),
      ),
      body: Center(
        child: Text(args["content"]),
      ),
    );
  }
}

MaterialApp(
  title: "Flutter Navigator",
  initialRoute: '/',
  routes: {
    '/': (context) => MyHomePage(),
    '/next': (context) => NextPage(),
  },
),

Flutter Navigator的高级用法之自定义路由转换动画

通过自定义路由转换动画，我们可以让页面之间的切换更加的平滑，并且更符合我们的设计需求。在Flutter中，我们可以通过PageRouteBuilder自定义路由转换动画，实现自己所需的效果。

下面是一个简单的示例代码，其中自定义了一个页面向左侧滑入的路由转换动画。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Navigator"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("跳转到下一页自定义动画"),
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                transitionDuration: Duration(milliseconds: 1000),
                pageBuilder: (context, animation, secondaryAnimation) =>
                    NextPage(),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  var begin = Offset(1.0, 0.0);
                  var end = Offset.zero;
                  var curve = Curves.ease;

                  var tween = Tween(begin: begin, end: end).chain(
                      CurveTween(curve: curve));
                  return SlideTransition(
                    position: animation.drive(tween),
                    child: child,
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("下一页"),
      ),
      body: Center(
        child: Text("自定义路由转换动画"),
      ),
    );
  }
}

总结

本文介绍了Flutter中Navigator的基本概念和基本用法，以及Navigator的高级用法之路由传值、命名路由和自定义路由转换动画。在开发过程中，Navigator是不可或缺的一个组件，熟练掌握Navigator的使用方法和相关技巧，可以帮助我们快速的构建出完整的应用。

c语言编程笔录