9. 页面的跳转

1. 页面的导航与返回

界面的导航与返回,一般都会使用到按钮的点击事件,此时,我们使用ElevatedButton()组件

class MyFirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("跳转详情页"),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => MySecondScreen()));
          },
        ),
      ),
    );
  }
}

class MySecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("返回上级页面"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
Navigator.push()和Navigator.pop()
  • Navigator.push: 跳转到下一个界面,它接收俩个参数,一个是上下文Context,另一个是要跳转的函数
  • Navigator.pop: 返回到上一个页面,使用时传递一个Context

推荐阅读更多精彩内容